javascript - Gulpfile 没有输出到正确的位置

Question

所以我正在尝试使用 sass 设置基本的 gulp 工作流程，但我遗漏了一些东西，但我找不到它。我在网上搜索了一个带有 dist/src 文件夹的工作流示例，没有人会一步一步地告诉你事情是如何以及为什么完成的。

无论如何，我有一个包含 dist、src、node_modules、gulpfile.js 和 package.json 的基本文件夹元素。

我的主要问题是输出的src/sass/main.scss没有输出到dist/css/main.css中。这仅在我创建 src/css/main.css 文件并在那里生成输出的 .css 文件时有效，尽管我的 gulpfile.js 中显然有 .pipe(gulp.dest("dist/css"))。

这是我的 gulpfile.js

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./src"
    });

    gulp.watch("src/scss/*.scss", ['sass']);
    gulp.watch("src/*.html").on('change', browserSync.reload);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("src/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("dist/css"))
        .pipe(browserSync.stream());
});

gulp.task('default', ['serve']);

在我的 html 文件中，我将 .css 与此链接:

 <link rel="stylesheet" type="text/css" href="css/main.css"/>

我什至没有尝试在 gulp 中添加更多插件，因为在我的一生中，我无法弄清楚为什么这不起作用。

使事情更容易理解的目录树:

|-dist
    |-css
        |-main.css
    |-img
    index.html
|-node_modules
|-src
    |-css
        |-main.css
    |-img
    |-sass
        |-_custom.scss
        |-main.scss
    index.html
gulpfile.js
package.json

有人能解释一下为什么我需要在 src 而不是 dist 中运行服务器吗？ gulp 是否生成 sass 然后知道如何将其复制到 dist？ 我的 gulpfile 到底出了什么问题？

Answer 1

在 src 中没有您要定位的 scss 文件夹

return gulp.src("src/scss/*.scss")

首先尝试解决这个问题