Gibt es eine Möglichkeit, weniger Dateien mit @imports zu kompilieren und sie mit Gulp zu verketten, alle im selben Stream?

Question

I`m triyng dies in meinem 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')); 
}); 

Aber ich bekomme immer eine Meldung wie:

$ 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 mit @imports in allen meinen weniger Dateien und den Referenzen sind solche, die in der Nachricht nicht vorkommen. Zum Beispiel ist meine widgets.less-Datei wie folgt:

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

Fehle ich etwas? Im voraus, danke für die Hilfe!

Answer 1

Sie müssen nur die Option paths für schlucklose angeben, um es zu sagen, wo es anfangen sollte, nach Dateien zu suchen, die mit @ import-Direktiven angegeben sind.

Für zB in widgets.less, versucht, seine

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

• etc ..

  in Library/WebServer/Documents/qjt2015/trunk/styles/less/ (siehe die Fehlermeldung, die Sie auf dem Laufenden zu finden) aber ich glaube es sollte insein(in Bezug auf Ihre widgets.less Datei)

einfach den Pfad festgelegt (n) wie folgt:

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

`` `