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

[sonicparke]

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.

[skyrpex]

I think there are some flaws in your code.

$.lessWatcher() and $.less() accept a configuration object, which could be, for example:

  const config = {
    paths: ['node_modules/'],
  };

Also, when lessWatcher hits "../app/**/*.less" or "../theming/<%= client %>/*.less", I think it'll throw an exception because less couldn't parse the file.

Assuming you want to include a single theme based on a client variable, you could just add it to the pipeline using javascript.

var config = {
  // Your Less configuration...
};

var client = 'gray-theme';

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

Also, note that with this approach, three or more files would be written to config.temp.

[sonicparke]

Thanks for the help but unfortunately it's still not working. Here's what I have now and I'm getting the same results as before. I've dropped the config because I don't think I need it anymore with some other changes I'd made previously.

var client = 'gray-theme';

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

It's watching the files it seems because when I edit 'theming/gray-theme/gray.less' the browser refreshes. It's just not handling the less imports correctly.

[skyrpex]

Look closely to this line:

var lessFiles = ['styles/app.less',  'app/**/*.less', `theming/${client}/**/*.less`];

The last quotes aren't really quotes. They are tildes: ```. You should change it so ${client} can be injected into the current string.

Next, I forgot to comment that you don't need $.template anymore.

Also, if you're adding the required less files to the pipeline, you should remove those imports in your app.less file:

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

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

[skyrpex]

I'm closing this since the issue isn't related to the behavior of this plugin.