Is there a way to compile fewer files with @imports and merge them using Gulp, all in one thread?

Question

I trick in my gulpfile.js:

gulp.task('buildStyles', function() { return gulp.src([ './styles/less/main.less', './styles/less/widgets/widgets.less', './styles/less/pages/pages.less', './styles/less/themes/default.less', './styles/less/rtl/rtl.less' ]) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(less()) .pipe(concat('allmin.css')) .pipe(sourcemaps.write('./maps')) .pipe(gulp.dest('./dest')); }); 

But I always get a message like:

 $ gulp buildStyles [18:46:31] Using gulpfile /Library/WebServer/Documents/qjt2015/trunk/gulpfile.js [18:46:31] Starting 'buildStyles'... gulp-sourcemap-write: source file not found:/Library/WebServer/Documents/qjt2015/trunk/styles/less/support-tickets.less gulp-sourcemap-write: source file not found:/Library/WebServer/Documents/qjt2015/trunk/styles/less/comments.less gulp-sourcemap-write: source file not found:/Library/WebServer/Documents/qjt2015/trunk/styles/less/article-comments.less gulp-sourcemap-write: source file not found:/Library/WebServer/Documents/qjt2015/trunk/styles/less/threads.less gulp-sourcemap-write: source file not found:/Library/WebServer/Documents/qjt2015/trunk/styles/less/chat.less 

I use @imports in all of my smaller files, and the links are those that appear as not found in the message. For example, my widgets.less file looks like this:

 // ### Bootstrap variables andmixins @import "../../../bower_components/bootstrap/less/variables.less"; @import "../../../bower_components/bootstrap/less/mixins.less"; @import '../variables.less'; @import '../mixins.less'; @import './support-tickets.less'; @import './comments.less'; @import './article-comments.less'; @import './threads.less'; @import './chat.less'; 

Am I missing something? Thank you in advance!

Answer 1

You just need to specify the paths option for gulp to tell her where she should start searching for files specified with @import.

For example, in widgets.less its attempt to find

• support-tickets.less
• comments.less
• article-comments.less

• etc..

  in Library/WebServer/Documents/qjt2015/trunk/styles/less/ (see the error message you sent), but I believe that it should be in Library/WebServer/Documents/qjt2015/trunk/styles/less/widgets/ (relative to your widgets.less file)

Just set the path as follows:

 gulp.task('buildStyles', function() { return gulp.src([ // ... ]) // ... other gulp tasks here .pipe(less({ paths: [ '/Library/WebServer/Documents/qjt2015/trunk/styles/less/', '/Library/WebServer/Documents/qjt2015/trunk/styles/less/widgets/', '/Library/WebServer/Documents/qjt2015/trunk/styles/less/pages/', // add additional paths here for less to find imports in // less will tell you which import files it can't find, so simply tell it where to find them. ] )) .pipe(concat('allmin.css')) // ... }); 

`` ``