进行更改时，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');
}));

我正在使用节点版本 12.16.1、gulp-sass 版本 4.1.0、gulp-cli 版本 2.3.0、gulp 本地版本 4.0.2 和浏览器同步版本 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...

不要被最后一行骗了，browser-sync 总是把它吐出来。 sass:watch 任务没有启动的原因是因为 gulp 永远无法通过 browser-sync 任务 - 你必须以某种方式向 gulp 发出任务已完成的信号，而 done 是一种方法。然后 gulp 可以进行下一个任务，即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.com/choyan/ab034dc0539942ee0d8f0ab9788d790f