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

Question

'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。我有一个 styles.scss 文件，看起来像这样：

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

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

因为我正在使用源映射，所以我可以在检查器中查看文件，我可以看到它们没有得到更新。比如说，如果我删除 _navigation.scss 的所有内容，在使用 f5 刷新或使用 ctrl+f5.

硬刷新后，我仍然会保留它的旧内容

我的 gulpfile 有什么问题？

Answer 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);
});

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

GULP executes watch-sass task only once after server start

css

sass

gulp