Question

所以我试图用sass设置基本的gulp工作流程，但我遗漏了一些东西，但我无法找到它。我在网上搜索了一个带有dist / src文件夹的工作流示例，NOBODY带您一步一步地了解事情的完成方式和原因。

无论如何，我有一个带有dist，src，node_modules，gulpfile.js和package.json的基本文件夹项目。

我的主要问题是输出的src / sass / main.scss没有输出到dist / css / main.css。这只有在我创建一个src / css / main.css文件并且在那里生成输出的.css文件时才有效，尽管我在我的脑中显然有.pipe（gulp.dest（＆＃34; dist / css＆＃34;）） gulpfile.js。

这是我的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"/>

我甚至没有尝试过添加更多的插件，因为对于我的生活，我无法弄清楚为什么这不起作用。

目录树，使事情更容易理解：

|-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")

尝试修复第一个

Gulpfile没有输出到正确的位置

1 个答案: