Sass不能用gulp / plumber / browsersync进行编译

Question

我只是重新开始编程，并试图使SPA浮出水面。 我已经了解到Gulp正在监视我的所有任务。 它可以识别何时更改HTML并且BrowserSync可以正常工作而无需刷新。 我遇到的问题更多是与SCSS / CSS相关。 上次检查时它在工作，我进行了npm更新，所以现在所有内容都已更新。 它似乎不想监视scss的更改。 我认为这部分是由于它如何在文件中链接，或者可能是为sass任务设置了错误的gulpfile。

我的文件夹设置为：

项目应用程序css / scss / index.html js / gulpfile.js

有人看到我没在这里看到的东西吗？ 同样，一切都加载完毕，应用了引导程序，启用了browsersync，但是从我的style.scss到CSS的改动都没有最小化。

谢谢！

Gulp文件：

 /* Required */ var gulp = require('gulp'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); var sass = require('gulp-sass'); var browserSync = require('browser-sync').create(); var reload = browserSync.reload; var plumber = require('gulp-plumber'); var autoprefixer = require('gulp-autoprefixer'); /* Scripts Task */ gulp.task('scripts', function(){ gulp.src(['app/js/**/*.js', '!app/js/**/*min.js']) .pipe(plumber()) .pipe(rename({suffix:'.min'})) .pipe(uglify()) .pipe(gulp.dest('app/js')) .pipe(reload({stream:true})); }); /* Sass Task */ gulp.task('sass', function(){ return gulp.src('app/scss/**/*.scss') .pipe(plumber()) .pipe(sass()) .pipe(autoprefixer('last 2 versions')) .pipe(gulp.dest('app/css')) .pipe(reload({stream:true})); }); /* HTML Task */ gulp.task('html', function(){ gulp.src('app/**/*.html') .pipe(plumber()) .pipe(reload({stream:true})); }); /* Browser-Sync Task */ gulp.task('default', ['browser-sync'], function () { }); gulp.task('browser-sync', function() { browserSync.init(null, { proxy: "http://localhost:5000", files: ["public/**/*.*"], browser: "opera", port: 7000, }); }); /* gulp.task('nodemon', function (cb) { var started = false; return nodemon({ script: 'server.js' }).on('start', function () { // to avoid nodemon being started multiple times // thanks @matthisk if (!started) { cb(); started = true; } }); }); */ /* Watch Task */ gulp.task('watch', function(){ gulp.watch('app/js/**/*.js', ['scripts']); gulp.watch('app/scss/**/*.scss', ['sass']); gulp.watch('app/**/*.html', ['html']); }) /* Default */ gulp.task('default', ['scripts', 'sass', 'html', 'browser-sync', 'watch']); 

样式表包括：

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <!-- Latest compiled and minified Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> <!-- Modernizr --> 

Answer 1

1：所有这些sass文件的输出CSS会去哪里？ 是在html中引用的样式调用？ 2：也许您缺少目标文件夹？ 举这个例子：

gulp.src('src/scss/application.scss')
    .pipe(sass({
      includePaths: [
       'node_modules/foundation-sites/scss',
       'node_modules/compass-mixins/lib'
      ],
      outputStyle: 'compressed'
    }).on('error', sass.logError))
    .pipe(gulp.dest('./public/css/'))

如果检查最后一行，我将调用gulp.dest来定义sass文件的输出。

Answer 2

你有这个链接：

<link rel="stylesheet" href="css/style.css">

但是您的sass任务不会显式输出“ style.css”， 除非您有一个style.scss文件，该文件通常会将所有其他scss文件作为部分导入（例如“ _colors.scss”）。 请注意下划线指示该文件是partial文件。 在这种情况下，gulp-sass将创建“ style.css”，以导入所有这些部分。 否则，它将为您的每个非部分scss文件创建一个css文件-但您仅链接到其中一个。

另一种方法是concat你的CSS文件到一个名为“style.css文件”一个文件。