skyrpex / gulp-less-watcher

(Not Maintained) Watches Less files (and imports) using an endless streaming interface (and generates sourcemaps)

WARNING! This project is not maintained anymore.

Gulp Less Watcher

Watches Less files (and imports) using an endless streaming interface (and generates sourcemaps).

Usage

npm install gulp-less-watcher --save-dev

import gulp        from 'gulp';
import loadPlugins from 'gulp-load-plugins';

const $ = loadPlugins();
const config = {
  // Less config...
};

gulp.task('default', () => {
  return gulp.src('main.less', { cwd: 'resources/assets/styles/' })
    .pipe($.lessWatcher(config))
    .pipe($.sourcemaps.init())
    .pipe($.less(config))
    .pipe($.sourcemaps.write('./', { includeContent: true }))
    .pipe(gulp.dest('public/assets/'));
});

Or if you don't use ES6/7...

var gulp = require('gulp');
var loadPlugins = require('gulp-load-plugins');

var $ = loadPlugins();
var config = {
  // Less config...
};

gulp.task('default', function() {
  return gulp.src('main.less', { cwd: 'resources/assets/styles/' })
    .pipe($.lessWatcher(config))
    .pipe($.sourcemaps.init())
    .pipe($.less(config))
    .pipe($.sourcemaps.write('./', { includeContent: true }))
    .pipe(gulp.dest('public/assets/'));
});

gulp-less-watcher's Issues

Watch Glob

I fear the answer but is there a way to watch multiple files?

gulp.task('csswatch', function() {
     return gulp.src( './less/builders/**/*.less' )   
        .pipe( $.lessWatcher( LESSConfig ) )
        .pipe( $.less( LESSConfig ) )       
        .pipe( gulp.dest( paths.CSSOutput ) )
});

debounce and notify

I've had fair success triggering less-watcher in my builds based on a --watch flag:

.pipe( $.if( watch, $.lessWatcher( LESSConfig ) ) )

It can only watch one file at a time but I understand you will be looking at that here: #6

However, I'd like to solve two annoying things:

1. trigger a notice when the file is built:

   function() { notifier.notify( { message: fileName + " Rebuilt" } ) }

2. debounce the file changes. If a file (or files) is saved within 1-2 seconds, it should only trigger one rebuild.

Any thoughts on how I can do either now?

Here was my attempt which failed silently on both accounts:

.pipe( $.if( watch, $.lessWatcher( 
    LESSConfig,
    {debounceDelay: 2000},
    function() {
        notifier.notify({
            message: "Portal files rebuilt"
        })
    }
) ) ) 

(Gulp 4)

Can you add a license?

MIT preferred. Thanks.

JS Code

I am new to gulp, so sorry if I misunderstand something, but which languange is your example code:

import gulp from 'gulp';
import loadPlugins from 'gulp-load-plugins';
....

Thats not JavaScript, right? How would I write this in normal js code?

Struggling to get imports to trigger recompilation

I wonder if you can help - I'm struggling to get a gulp task working the way I'd like. I'm new to gulp, so might be missing something basic!

I'm trying to do what I think is the basic task of this plugin - compile the parent .less files when any of the @imported files are updated.

In its current state nothing happens when any files are saved :( but I can't see where I might be going wrong!

The relevant part of the gulpfile looks like this:

gulp.task('watch:css', function() {

    return gulp.src('assets/less/*.less')
        .pipe(watchLess('assets/less/*.less'))
        .pipe(plumber({
            errorHandler: onError
        }))
        .pipe(less())
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'ie 8', 'ie 9'],
            cascade: false
        }))
        .pipe(minifyCss())
        .pipe(gulp.dest('./assets/css/'));
});

Any pointers?

Does not compile full file if injecting imports via stream

I'm using the plugin gulp-insert (https://github.com/rschmukler/gulp-insert) to modify the stream contents and insert imports into my build file dynamically.

It seems like gulp-less-watcher is only watching the original LESS build file and not the one being passed through the stream.

I'm calling it in a similar way to the code below:

return gulp.src(glob)
    .pipe(insert.prepend(importString))
    .pipe(watchLess())
    .pipe(less())
    .pipe(gulp.dest(targetDir));

This is particularly noticeable if the dynamically inserted imports create variables or mixins which are used by later files.

I'm having trouble getting it to work on the import less files

I'm not sure what I'm doing wrong here but I can't get it to update any of the changes made to the files that are imported. I will update when app.less is changed though.

var config = {
  less: [
    'styles/app.less'
  ]
}

gulp.task('less-watcher', function(done) {
        var lessFiles = [config.less,  'app/**/*.less', 'theming/<%= client %>/**/*.less'];
        return gulp.src(lessFiles)
            .pipe($.lessWatcher(lessFiles))
            .pipe($.template({client: config.buildClient}))
            .pipe($.less(config.less))
            .pipe($.autoprefixer({browsers: ['last 2 version', '> 5%']}))
            .pipe(gulp.dest(config.temp, {flatten: true}));
    });

app.less

// Import all app less stuff
@import "../app/**/*.less";

// Import App Themeing stuff
@import "../theming/<%= client %>/*.less";

To me it seems like it's all fine but I must be missing something.