Есть ли способ скомпилировать файлы с @imports и объединить их с Gulp, все в одном потоке?

Question

I`m triyng это в моих 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')); 
}); 

Но я всегда получаю такое сообщение:

$ 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`m использованием @imports внутри всех моих меньших файлов и ссылок это те, которые отображаются как не найденные в сообщении. Например, мой файл widgets.less выглядит следующим образом:

// ### Bootstrap's 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'; 

Я что-то не хватает? Заранее благодарим за помощь!

Answer 1

Вам просто нужно указать опцию paths для gulp-less, чтобы сообщить, где она должна начинать поиск файлов, указанных в директивах @import.

Для, например, в widgets.less, ее пытаются найти

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

• и т.д ..

  в Library/WebServer/Documents/qjt2015/trunk/styles/less/ (см сообщение об ошибке, размещенную), но я считаю, что это должно быть в Library/WebServer/Documents/qjt2015/trunk/styles/less/widgets/ (по отношению к файлу widgets.less)

Просто установите путь (ы) как так:

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')) 
    // ... 
}); 

`` `