0

I currently am using Gulp to run various tasks, which includes compiling and minifying SASS (I am also utilizing Gulp Watch). I am having the issue where when I make changes to a file (specifically app.scss), It spits out a rather uninformative error:

"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

I'm really not sure what is causing this error, and from Googling, it appears to happen in many different circumstances. I'm not too sure what I am doing wrong. My gulpfile is below:

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']);

I would really appreciate any help you could provide. Thank you!

1 Answer 1

3

The __jb_tmp__ suffix signifies a temp file created by JetBrains applications like PhpStorm. When saving a file the file contents are first written to a temp file which is then renamed. By the time gulp.watch() tries to stat() the temp file it's already gone.

Try limiting your gulp.watch() glob from:

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

to only SASS/SCSS files:

watch(['./resources/assets/sass/*.{sass,scss}',
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you very much! I wasn't aware PhpStorm made temp files such as that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.