GULP 仅在服务器启动后执行一次 watch-sass 任务答案

【问题标题】：GULP executes watch-sass task only once after server startGULP 仅在服务器启动后执行一次 watch-sass 任务
【发布时间】：2021-04-03 12:12:16
【问题描述】：

'use strict';

var gulp = require('gulp'),
    connect = require('gulp-connect-php'),
    browserSync = require('browser-sync'),
    sass = require('gulp-sass'),
    watchSass = require("gulp-watch-sass"),
    concatCss = require('gulp-concat-css'),
    notify = require("gulp-notify"),
    sourcemaps = require("gulp-sourcemaps"),
    autoprefixer = require("gulp-autoprefixer")

function defaultTask(cb) {
    cb();
}

exports.default = defaultTask;

gulp.task('serve', function () {
    connect.server({}, function () {
        browserSync({
            proxy: 'localhost/'
        });
    });

    console.log('server started');

    gulp.watch(['**/*.php', '**/essentials/*.php', '**/essentials/*.phtml']).on('change', function () {
        browserSync.reload();
    });

    gulp.watch('./css/styles.css').on('change', function () {
        browserSync.reload();
    });

    gulp.watch('./js/*.js').on('change', function () {
        browserSync.reload();
    })

    gulp.watch('./styles/*.scss').on('change', function () {
        browserSync.reload();
    })
});

var gulpRanInThisFolder = process.cwd();


console.log(gulpRanInThisFolder);

var config = {
    sassPath: './styles'
}


gulp.task('sass', function () {
    gulp.src(config.sassPath + '/styles.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({
            errorLogToConsole: true,
            outputStyle: 'compressed'
        }))
        .on('error', console.error.bind(console))
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./css'));
})


gulp.task("watch-sass", function () {
    gulp.watch("./styles/*.scss", gulp.series(['sass']));

    gulp.watch('./styles/*.scss').on('change', function () {
        browserSync.reload();
    })
});


gulp.task('run', gulp.parallel('serve', 'sass'));

这是我的 gulpfile.js。我有一个 style.scss 文件，如下所示：

@import "flexgrid";
@import "main";
@import "navigation";

所有导入文件都以和下划线开头并且是partilas。我希望它们被重新编译并放入 ./css/styles.css 每次对我的任何 scss 文件应用更改时，我都会重新加载浏览器，但是这些更改并未应用。

当我使用源映射时，我可以查看检查器中的文件，我可以看到它们没有得到更新。比如说，如果我删除 _navigation.scss 的所有内容，在使用 f5 刷新或使用 ctrl+f5 硬刷新后，我仍然会保留它的旧内容。

我的 gulpfile 有什么问题？

【问题讨论】：

标签： css sass gulp

【解决方案1】：

在你的：

gulp.watch('./styles/*.scss').on('change', function () {
    browserSync.reload();
})

在serve 任务中，它重新加载但从不调用sass 任务。所以你只调用一次sass 任务（作为run 任务的一部分）。将以上内容更改为：

gulp.watch('./styles/*.scss', gulp.series( `sass`, browserSync.reload ));

或者，因为您有一个从未调用过的 watch-sass 任务，所以让您的 run 任务看起来像这样：

gulp.task('run', gulp.series('sass', 'serve', 'watch-sass'));

你可以去掉serve任务中的scss部分。并将sasswatch` 任务简化为：

gulp.task("watch-sass", function () {
  gulp.watch("./styles/*.scss", gulp.series('sass', browserSync.reload);
});

【讨论】：