Gulp / Node - SASS编译时的错误

时间:2016-04-06 04:24:23

标签: node.js sass gulp

我目前正在使用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']);

我非常感谢您提供的任何帮助。谢谢!

1 个答案:

答案 0 :(得分:3)

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

尝试限制您的gulp.watch() glob:

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

仅限SASS / SCSS文件:

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