Gulp編譯CSS多個src

我正在使用Gulp將我的bootstrap.less文件編譯到bootstrap.css文件中。所有引導LESS文件都位於「less」文件夾中，所有CSS文件都位於CSS文件夾中。所有bootstrap less文件都被@ import'startstrap.less，然後該文件被編譯爲bootstrap.css。但是，我有一個custom.less文件在引導LESS文件夾中。我想編譯成CSS文件夾中的custom.css文件。我無法讓Gulp這樣做。這是我的代碼。Gulp編譯CSS多個src

var gulp  = require('gulp'); 
var less  = require('gulp-less'); 
var browserSync = require('browser-sync').create(); 

gulp.task('less', function() { 
return gulp.src(['./less/bootstrap.less', './less/custom.less']) 
    .pipe(less()) 
    .pipe(gulp.dest("./css")) 
    .pipe(browserSync.reload({stream: true})); 
}); 

gulp.task('serve', function(){ 

     browserSync.init({ 
      server: { 
       baseDir: './' 
      } 
     }); 

gulp.watch('./less/*.less', ['less']); 
gulp.watch(['./**/*.html', './js/custom.js']).on('change', 
browserSync.reload); 

}); 

gulp.task('default', ['less', 'serve']);

來源

2017-01-07 mriccelli75

如果你這樣做：gulp.task（ '少'，函數（）{ 回報gulp.src（[」 ./ （（）） .pipe（less（）） .pipe（gulp.dest（「./ css/custom.css」）） .pipe（browserSync.reload（{stream：true}））; }）; –

難道那不會把我所有少的文件都放到custom.css中嗎？我期待將所有boostrap.less文件編譯到bootstrap.css中，並將custom.less編譯到custom.css中。 – mriccelli75

我通常所做的就是將所有.less或.scss文件編譯到css文件夾中。你最終會得到一些空文件（一個很好的例子就是包含變量的無文件文件），但另一方面，你可以創建一個大文件任務來清除這些文件。我使用下面的代碼來編譯：

return gulp.src("Styles/scss/*.scss") 
    .pipe(sourcemaps.init()) 
    .pipe(sass()) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest("Styles/css")) 
    .pipe(reload({stream: true}));

我也在這裏生成源代碼，但你可以刪除它。如果你想發現更多的結賬this post here

希望這有助於;）

來源

2017-01-14 14:39:01

Gulp編譯CSS多個src

回答

相關問題