0

There are a few .less files in less folder like style.less (it's main working file), colors.less, fonts.less, mixins.less and so on.

I use @import to add additional files in main style.less file.

@import "colors.less";
@import "fonts.less";
@import "mixins.less";

It's my gulpfile.js below

'use strict';

var gulp = require('gulp');
var less = require('gulp-less'); 
var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;
var csscomb = require('gulp-csscomb');
var autoprefixer = require('gulp-autoprefixer');

function swallowError (error) {

  // If you want details of the error in the console
  console.log(error.toString());

  this.emit('end');
}


/* Task to compile less */
gulp.task('compile-less', function() {  
  gulp.src('./src/less/style.less')
    .pipe(less())
    .on('error', swallowError)
    .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
    }))
    .pipe(csscomb())
    .pipe(gulp.dest('./prod/css/'));
}); 
/* Task to watch less changes */
gulp.task('watch-less', function() {  
  gulp.watch('./src/**/*.less' , ['compile-less']);
});

gulp.task('serve', function () {

    // Serve files from the root of this project
    browserSync.init({
        server: {
            baseDir: "./prod/"
        }
    }); 
    gulp.watch("./src/less/*.less").on("change", reload);
    gulp.watch("./prod/*.html").on("change", reload);
});

/* Task when running `gulp` from terminal */
gulp.task('default', ['watch-less', 'serve']);

(I used this code as example).

So gulp works great with style.less file and compiles it correctly and fast, but when I'm trying to change colors.less file, for example, or other imported file, gulp doesn't work. I need to stop gulp and restart it again manually to compile changes in imported files. What's wrong?

Heidel
  • 3,174
  • 16
  • 52
  • 84
  • 1
    This line in the 'serve' task looks wrong: gulp.watch("./src/less/*.less").on("change", reload); don't you want to reload on css changes not .less changes? Since you already have a .less watch task 'watch-less', put a reload call at he end of your 'compile-less' task ala .pipe(reload({ stream:true })); and delete gulp.watch("./src/less/*.less").on("change", reload); in the 'serve' task and see if it helps. – Mark Mar 10 '18 at 21:34
  • Nope, all stays the same. Gulp compiles imported files only after the very first change in any of that files, after that it doesn't compile any new changes. – Heidel Mar 10 '18 at 21:40
  • 1
    See also https://stackoverflow.com/questions/49132742/gulp-watch-in-combination-with-gulp-less-caching-issue. – seven-phases-max Mar 10 '18 at 21:41
  • @seven-phases-max I use "gulp": "^3.9.1" – Heidel Mar 10 '18 at 21:44
  • 1
    Good find by @seven-phases-max but you still don't want to reload on a .less change. You want to reload on a .css change. – Mark Mar 10 '18 at 21:44
  • The problem is not with reload on change, the problem is changes in imported less files don't reflect in css file at all. – Heidel Mar 10 '18 at 21:45
  • What gulp-less version? You have multiple issues. – Mark Mar 10 '18 at 21:46
  • No, only the one ussue - I change any imported less file, gulp detects changes (in console I could see it), reloads page, but it works for the only first time, then gulp detects any new changes, reloads page, but css stays the same. "gulp": "^3.9.1". – Heidel Mar 10 '18 at 21:50
  • This is because (as Mark pointed out) you need to reload css files after they are compiled. But your script tries to reload on less files change (and they are not used in your page at all) - while changes in css files are totally ignored (thus the reload may be triggered even *before* less->css compilatoin is finished). – seven-phases-max Mar 10 '18 at 21:50
  • NO! For the first time it works, then css stays the same, no new changes. No new changes in css file (at all!) if it was imported less file which was changed. – Heidel Mar 10 '18 at 21:57
  • Still try to solve the problems one-by-one instead of all at once. The reload task is definitely wrong anyway. Now if you remove that part completely - is css file (I mean *real* file not the one that served by `serve`) updated? If it's not - double check the Less version behind `gulp-less` (should be 2.x and not 3.x). – seven-phases-max Mar 10 '18 at 22:03
  • "gulp-less": "^4.0.0". Gulp changes css only for the first time if I change any imported less file. Then css stays the same, no changes from imported less files are not reflected in css file, only for main file style.less Gulp works. – Heidel Mar 10 '18 at 22:14
  • *"gulp-less": "^4.0.0"*. - please reread comments at the Q inked above (i.e. *do not* upgrade to "gulp-less 4.0.0"). – seven-phases-max Mar 10 '18 at 22:30
  • I did not do any upgrades, I've just created my new project a few hours ago and installed gulp-less :) – Heidel Mar 10 '18 at 22:32
  • I installed npm install gulp-less@3.5.0 and now gulp works just fine with imported files. But now @import (less) "../bootstrap/bootstrap.min.css"; doesn't work, I'm getting just pile of css code in console http://prntscr.com/iphjv2 and no less files are compiled. – Heidel Mar 10 '18 at 22:52

0 Answers0