Gulp/Node - SASS 编译错误

Question

我目前正在使用 Gulp 运行各种任务，包括编译和缩小 SASS（我也在使用 Gulp Watch）。我遇到的问题是，当我对文件（特别是 app.scss）进行更改时，它会吐出一个相当无信息的错误：

"C:\Program Files (x86)\JetBrains\PhpStorm 2016.1\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" C:\Users\Matthew\PhpstormProjects\mattrick\node_modules\gulp\bin\gulp.js --color --gulpfile c:\Users\Matthew\PhpstormProjects\website\gulpfile.js watch
[20:48:35] Using gulpfile c:\Users\Matthew\PhpstormProjects\website\gulpfile.js
[20:48:35] Starting 'watch'...
[20:48:35] Finished 'watch' after 7.94 ms
events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: ENOENT, stat 'c:\Users\Matthew\PhpstormProjects\website\resources\assets\sass\app.scss___jb_tmp___'
    at Error (native)

Process finished with exit code 1

我真的不确定是什么导致了这个错误，从谷歌搜索来看，它似乎发生在许多不同的情况下。我不太确定我做错了什么。我的 gulpfile 如下：

var gulp = require('gulp');
var watch = require('gulp-watch');
var batch = require('gulp-batch');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');
var plumber = require('gulp-plumber');
var del = require('del');

var config = {
    bowerDir: './bower_components/',
    publicDir: './public',
};

//Build Tasks
gulp.task('build', ['clean'], function() {
   gulp.start(['css', 'fonts', 'js']);
});

//Clean Dir
gulp.task('clean', function() {
    return del([config.publicDir + "/css", config.publicDir + "/fonts", config.publicDir + "/js"]);
});

//CSS Concat + Minification
gulp.task('css', function() {
    return gulp.src(
        [
            config.bowerDir + 'bootstrap-sass/assets/stylesheets',
            config.bowerDir + 'fontawesome/scss',
            './resources/assets/sass/app.scss'
        ])
        .pipe(plumber())
        .pipe(sass({
            errLogToConsole: true
        }))
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest(config.publicDir + '/css'));
});

//Font Awesome
gulp.task('fonts', function() {
    return gulp.src(config.bowerDir + '/fontawesome/fonts/**.*')
        .pipe(plumber())
        .pipe(gulp.dest(config.publicDir + '/fonts'));
});

//JavaScript Concat + Uglify
gulp.task('js', function() {
    return gulp.src(
        [
            config.bowerDir + '/jquery/dist/jquery.min.js',
            config.bowerDir + '/bootstrap-sass/assets/javascripts/bootstrap.min.js'
        ])
        .pipe(plumber())
        .pipe(concat('app.js'))
        .pipe(uglify())
        .pipe(gulp.dest(config.publicDir + "/js"));
});

//Watch Task
gulp.task('watch', function() {
    watch(['./resources/assets/sass/*', config.bowerDir + '/bootstrap-sass/assets/stylesheets/**'], batch(function(events, done) {
        gulp.start('build', done);
    }));
});

//Default Task
gulp.task('default', ['build']);

非常感谢您能提供的任何帮助。谢谢！

Answer 1

__jb_tmp__ suffix 表示由 JetBrains 应用程序（如 PhpStorm）创建的临时文件。保存文件时，文件内容首先写入一个临时文件，然后是renamed。当gulp.watch() 尝试stat() 临时文件时，它已经消失了。

尝试限制您的 gulp.watch() glob 来自：

watch(['./resources/assets/sass/*',

仅适用于 SASS/SCSS 文件：

watch(['./resources/assets/sass/*.{sass,scss}',