javascript - Gulp Watch 不工作

Question

我正在使用 Gulp 在我的 SCSS 和 CSS 上完成一些任务。现在的问题是，当我运行 Gulp 时，它正在启动 watch ，但什么也没有发生:没有创建 css。我三次检查了文件夹结构，它可以。

这是我的代码:

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
var watch = require('gulp-watch');

gulp.task('sass', function () {
    return gulp.src('resources/assets/sass/**/*.scss')
        .pipe(plumber())
        .pipe(sass({errLogToConsole: true}))
        .pipe(autoprefixer({browsers: ['last 2 version']}))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest('./public/css'))
});

gulp.task('default', function () {

    watch('resources/assets/sass/**/*.scss', function () {
        gulp.start('sass');
    });

});

临时解决方案

经过与一些人的长期搜索，只是 PHPStorm 没有显示更新的文件。必须首先访问该文件。这就像一种缓存。

当我保存 .scss 文件并立即用记事本打开它，或访问使用该文件的 php 文件时，它也会在 PHPStorm 中更新。

Answer 1

试试这个

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');

gulp.task('sass', function () {
    return gulp.src('resources/assets/sass/**/*.scss')
        .pipe(plumber())
        .pipe(sass({errLogToConsole: true}))
        .pipe(autoprefixer({browsers: ['last 2 version']}))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest('./public/css'))
});

gulp.task('default', function () {

    gulp.watch('resources/assets/sass/**/*.scss', ['sass']);

});

我不认为你真的需要另一个插件来编译你的 sass 文件，gulp.watch 工作得很好。

所以基本上我在这里做的是，我只是告诉 gulp 查看该文件夹中的所有 sass 文件，只要有变化，就在给定的数组中运行任务 ['sass']。