临时解决方案

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中更新。

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

Answer 2

解决方案是PHPStorm设置

似乎PHPStorm使用了一种文件缓存形式，这就是为什么我没有看到反映的变化。解决方案可以在这里找到！

How to prevent phpstorm to reload file without prompt when file on disk is changed?

Gulp Watch不工作

临时解决方案

2 个答案:

解决方案是PHPStorm设置