CODEWITHSUNDEEP
node.jssassgulp
mattrick
mattrick

Reputation: 3910

Gulp/ Node - Errors on SASS Compile

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!

Upvotes: 0

Views: 231

Answers (1)

Sven Schoenung
Sven Schoenung

Reputation: 30574

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}',

Upvotes: 3

Related Questions