0

I'm trying to compile all the .less files to css, and leave .import.less files unprocessed (similar to Meteor less package). My file structure is as follow:

assets/less/normalize.less
assets/less/main.less
assets/less/header.import.less
assets/less/footer.import.less
assets/less/...

My lessCompile task works fine by itself (i.e. run it manually by gulp lessCompile).

gulp.task('lessCompile', function() {
    gulp.src(['assets/less/main.less', '!assets/less/*.import.less'])
        .pipe(less())
        .pipe(autoprefix('last 2 version'))
        .pipe(minifyCSS({ advanced: true }))
        .pipe(concat('style.min.css'))
        .pipe(gulp.dest('public/stylesheets'));
});

Now I add a watch to all the .less files to automate the compilation. 

gulp.task('default', ['lessCompile'], function () {
    gulp.watch('assets/less/*.less', ['lessCompile']);
});

Problem is after I edited assets/less/footer.import.less , lessCompile task re-ran itself and all the styles in footer.import.less disappeared from the minified style.min.css. The same disappearance goes for editing any other *.import.less such as header.import.less. Also, there are no errors during the re-compile process.

movila
  • 927
  • 1
  • 8
  • 12
  • The source path `'assets/less/*.less'` is watching all `*.less` files in the `assets/less/` path including your `*.import.less` files. Did you mean to not include them? – talves May 15 '15 at 19:04
  • I actually mean to include them such that when I make changes to `assets/less/footer.import.less` the gulp `lessCompile` task will re-compile `main.less` and import the `footer.import.less` – movila May 15 '15 at 19:26
  • Doesn't the import happen in the `main.less` file already? Using `@import "footer.import.less";`? – talves May 15 '15 at 19:34
  • Yes, the `main.less` imports all the `*.import.less` files. And I simply need a trigger to re-compile `mail.less` after I made changes to any `*.import.less` files. – movila May 15 '15 at 19:49
  • Do you have a public repository of the gulp project? That may help to debug if we get the same issue. You could always create one with just the less and gulp tasks. – talves May 15 '15 at 20:11
  • So, all the `*.import` files are getting imported by `main.less`? What I find weird is your gulp.src, which actually just could point to `main.less` alone. I recreated your setup and given the circumstances it works fine... I'm with talves to see some sort of public repo where we could recreate it – ddprrt May 16 '15 at 09:53
  • Thank you guys for your help. I found the solution that simply add a `return` before `gulp.src` to activate async and using a callback function in the `gulp.watch` that run `gulp.start('lessCompile')` to reran the whole task. – movila May 21 '15 at 15:23

0 Answers0