Gulp Watch不起作用。

Question

我正在使用Gulp来处理我的SCSS和CSS文件。现在的问题是，当我运行Gulp时，它启动了监视器，但没有任何事情发生：没有创建任何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中更新。

- Miguel Stevens

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']中的任务。

- Wadu

Answer 2

解决方案是PHPStorm设置

看起来PHPStorm使用了一种文件缓存，这就是为什么我没有看到反映出的更改。 解决方案可以在此处找到！

如何防止phpstorm在磁盘上的文件更改时重新加载文件而不提示？

- Miguel Stevens