修改时，Gulp不会重新编译sass。

Question

我创建了一些任务来重新编译sass与浏览器同步，每当有变化时，我的gulp文件如下。

'use strict';

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

gulp.task('sass', function() {
    return gulp.src('./css/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function() {
    gulp.watch('./css/*.scss', ['sass']);
});

gulp.task('browser-sync', function() {
    var files = [
        './*.html',
        './css/*.css',
        './img/*.{png,jpg,gif}',
        './js/*.js'
    ];

    browserSync.init(files, {
        server: {
            baseDir: "./"
        }
    });

});


gulp.task('default', gulp.series('browser-sync', function() {
    gulp.start('sass:watch');
}));

我使用node 12.16.1版本，gulp-sass 4.1.0版本，gulp-cli 2.3.0版本，gulp local 4.0.2版本和browser-sync 2.26.7版本。

Answer 1

更改这个

// gulp.task('default', gulp.series('browser-sync', function() {
//     gulp.start('sass:watch');
// }));

到

gulp.task('default', gulp.series('browser-sync', 'sass:watch'));

我严重怀疑gulp v4是否支持 gulp.start.

也改成这样。

gulp.task('browser-sync', function(done) {   // added done here
    var files = [
        './*.html',
        './css/*.css',
        './img/*.{png,jpg,gif}',
        './js/*.js'
    ];

    browserSync.init(files, {
        server: {
            baseDir: "./"
        }
    });
  done();                                    // called done() here
});

当我运行你的代码时，我注意到 sass:watch 任务从来没有启动过，因此你根本没有在看任何文件。 这是你在终端中应该看到的内容。

[21:26:21] Using gulpfile ~\OneDrive\Test Bed\simple\gulpfile.js
[21:26:21] Starting 'default'...
[21:26:21] Starting 'browser-sync'...
[21:26:21] Finished 'browser-sync' after 164 ms
[21:26:21] Starting 'sass:watch'...         // this line missing when running your code
[Browsersync] Access URLs:
 -----------------------------------
       Local: http://localhost:3000
    External: http://10.0.0.186:3000
 -----------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -----------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...

不要被最后一行愚弄了, 浏览器同步总是会吐出来. 之所以会出现 sass:watch 任务没有启动是因为Gulp永远无法通过。browser-sync 任务 - 你必须以某种方式向gulp发出信号，表明任务已经完成，并且 done 是一种方法。 然后，咕噜咕噜就可以进入下一个任务，那就是 sass:watch. 见 gulp: async completion.

你也需要做出你在评论中提到的改变。gulp.watch('./css/*.scss', gulp.series('scss'));

你的代码没有其他问题--对我来说运行得很好。

Answer 2

你的Gulpfile在修改时没有观察sass文件。它只是在寻找CSS的变化。这是我的Gulp任务函数的一部分，用来寻找SCSS文件的变化。

function serve() {
  browserSync.init({
    open: false,
    port: 8000,
    server: {
      baseDir: 'src/',
      index: 'index.html'
    },
  });
  gulp.watch(paths.scss.src, gulp.series([compileSCSS]));
}

这是我的SCSS编译函数

function compileSCSS() {
  return gulp
    .src('./src/scss/style.scss')
    .pipe(plugins.rename('style.css'))
    .pipe(gulp.dest('./src/css/'));
}

我准备了一个Gulp函数，里面有很多需要的工具。你可以在这里查看https:/gist.github.comchoyanab034dc0539942ee0d8f0ab9788d790f。