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 文件在进行更改时不会监视 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

Answer 2

改变这个

// 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 是一种方法。然后 gulp 可以转到下一个任务，即 sass:watch。参见 gulp: async completion。

您还需要进行您在评论中注明的更改 gulp.watch('./css/*.scss', gulp.series('scss'));

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

Gulp 不会在进行更改时重新编译 sass

Gulp won't recompile sass when changes are made

sass

node.js

gulp

gulp-watch