Gulp-sass fires but does not write output when saving partials

3
votes

I work with gulp sass to compile, prefix and minify my scss to css and min.css, I use watch to fire compiling each time I save files but suddenly gulp-sass stopped writing the output files ONLY when saving partials, everything works fine when I save the main style.scss

This is the SASS log in my terminal on both cases, wether saving main file or partial scss files. As you can see it fires both times but only on the main files saving the output is generated and saved.

[11:54:50] Starting 'sass'...
[11:54:51] Finished 'sass' after 886 ms
[11:54:52] Starting 'sass'...
[11:54:53] Finished 'sass' after 809 ms

Gulp is installed globally and the Gulpfile.js below always worked until yesterday. I tried to change the gulp.src path several times but without luck. Obviously I still can compile everything saving the main style.scss but is really annoying when you work on several file simultaneously.

Another strange thing is that trying to change files path to compile the minified version wa reverted to an older date version; I thought it could be an NPM cache problem but I'm not really confident with node/npm, I use it just to compile SCSS and concatenate JS and that's it.

Thanks a lot in advance to anyone who could help me.

var themeurl = './';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var rename = require("gulp-rename");
var watch = require('gulp-watch');
var concat = require('gulp-concat'); 
var uglify = require('gulp-uglify'); 
var cleanCSS = require('gulp-clean-css');
var sourcemaps = require('gulp-sourcemaps');


gulp.task('sass', function () {
  return gulp.src(themeurl + '_sass/style.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
        browsers: ['last 10 versions']
    }))
    .pipe(sourcemaps.write())   
    .pipe(gulp.dest(themeurl))
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(rename('style.min.css'))
    .pipe(gulp.dest(themeurl));

});


gulp.task('scripts', function() {
    gulp.src('_js/*.js')
    .pipe(concat('scripts.js'))
    .pipe(gulp.dest('assets/js'));
    return gulp.src(themeurl + 'assets/js/scripts.js')
        .pipe(uglify().on('error', function(e){
            console.log(e);
         }))
        .pipe(rename('scripts.min.js'))
        .pipe(gulp.dest(themeurl+'assets/js/'));    
});


gulp.task('watch', function () {
    gulp.watch(themeurl + '_sass/**/*.scss', gulp.series('sass') );
    gulp.watch(themeurl + '_js/*.js', gulp.series('scripts') );  
});
3
sassgulp
Did something about your setup change before it stopped working? Did you upgrade versions of any of the packages? Are you sure the partials are being imported in the main file? – TheDancingCode
UPDATE: in fact it seems that files are updated but their meta data date/time are not. So it's not a problem while developing on my local environment since I can see the frontend working properly while writing SCSS, it's annoying since my IDE does not detect the files to publish due to their obsolete dates. @TheDancingCode the weird thing is that I haven't changed nothing. Really weird. I tried uninstall node and install it from scratch (with all needed gulp modules obviously) but behaviour remained the same. I guess I can consider my issue solved even if in fact it is not – Andrea Ubaldi

3 Answers

1
votes

Have you solved your problem? I have the same issue.

My workaround is related how I write watch task. And I have to delete css bundle before every new compilation

// old 
watch(`${paths.src}/sass/**/*.scss`, series(css, reload));
// workaround
watch(`${paths.src}/sass/*.scss`, series(delCSSbundle, css, reload));

The result is content of the CSS bundle is updated every compilation but date/time of the bundle remains the same.

0
votes

Does it work when you replace the style with an * as shown in the code block below? The * tells gulp to search for all files ending with .scss in the folder.

gulp.task('sass', function () {
  return gulp.src(themeurl + '_sass/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
        browsers: ['last 10 versions']
    }))
    .pipe(sourcemaps.write())   
    .pipe(gulp.dest(themeurl))
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(rename('style.min.css'))
    .pipe(gulp.dest(themeurl));

});
0
votes

Thank you Remco , I tried already but unfortunately nothing changed. As i described upon in the update the problem seems to be related to file's date/time and not on the compiling: the compiling is updated with all my modifications but the date/time is not.