Có cách nào để biên dịch ít tệp hơn với @imports và nối chúng với Gulp, tất cả trong cùng một luồng không?

Question

I`m triyng này trong gulpfile.js tôi:

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

Nhưng tôi luôn có được một thông điệp như:

$ 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 sử dụng @imports trong tất cả các file dưới của tôi, và các tài liệu tham khảo là những thông tin xuất hiện không được tìm thấy trong thư. Ví dụ: tệp widgets.less của tôi như sau:

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

Tôi có thiếu gì đó không? Trước, cảm ơn sự giúp đỡ!

Answer 1

Bạn chỉ cần chỉ định tùy chọn paths cho gulp-less để cho biết nơi bắt đầu tìm kiếm tệp được chỉ định với chỉ thị @import.

Đối với ví dụ, trong widgets.less, cố gắng của nó để tìm

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

• vv ..

  trong Library/WebServer/Documents/qjt2015/trunk/styles/less/ (xem thông báo lỗi mà bạn được đăng) nhưng tôi tin rằng nó phải ở trong Library/WebServer/Documents/qjt2015/trunk/styles/less/widgets/ (tương ứng với tập tin widgets.less của bạn)

Đơn giản chỉ cần thiết lập các đường dẫn (s) như sau:

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

`` `