Struggling to get imports to trigger recompilation

[hellopablo]

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?

[skyrpex]

@hellopablo hi!

watchLess() doesn't need to be told what to watch. You should pass the same object as you pass to less(). In your case, it should simply look like this:

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

    return gulp.src('assets/less/*.less')
        .pipe(watchLess())
        .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/'));
});

[hellopablo]

Thanks, but it's still not doing anything :(

I've stripped my gulpfile to the following, which I feel should be an absolute minimum (and work!)

var gulp      = require('gulp');
var watchLess = require('gulp-less-watcher');
var less      = require('gulp-less');

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

    return gulp.src('assets/less/*.less')
        .pipe(watchLess())
        .pipe(less())
        .pipe(gulp.dest('./assets/css/'));
});

Running gulp watch:css starts the watcher, but does nothing when I save a file, child or otherwise.

[skyrpex]

It works to me... I've created a gist that works: https://gist.github.com/skyrpex/54bad3e370bb224b340f

git clone https://gist.github.com/54bad3e370bb224b340f.git
cd 54bad3e370bb224b340f
npm install
gulp watch:css

Any time I edit other.less, the css/main.css file is updated.

[hellopablo]

Ok, great, must be something else! Thanks @skyrpex I'll keep trying.

[hellopablo]

Ok, I worked out the issue (my issue anyway). My filenames take the format vendor.package.less. I think it's the multiple periods which is confusing things, somehow (and likely unrelated to the plugin).

If I rename to not have two periods then all works well, or if I specify the filename explicitly (i.e only watch one file) then it also works. In the meantime I can rename my files, I guess.

I wonder if this is helpful for you (perhaps it is related to your plugin), or if it's something I should report to the Gulp team?

[hellopablo]

Interestingly, in this Gist (which is nearly identical to your except for filename):

https://gist.github.com/hellopablo/57821fda2ae47a7fcf76

If I save other.less it compiles, if I save vendor.main.less it does not. And the resultant css file is only the contents of other.less.

[skyrpex]

I think that the problem resides in my plugin when more than one file is passed using gulp.src('*'). I'm using gulp-debug and only the first file is being watched...

If you only need one file.css, you should watch a single less file that imports the rest. If you need multiple outputs, you should use various gulp.src() calls at the moment...

I'll dig into this when I have time, but I'm not sure when it will be.