Gulp编译CSS多个src

Question

我正在使用Gulp将我的bootstrap.less文件编译为bootstrap.css文件。所有引导程序LESS文件都在"LESS"文件夹中，所有CSS文件都在CSS文件夹中。所有的bootstrap.less文件都被@import'd导入bootstrap.ess，然后该文件被编译到bootstrap.css。但是，我有一个custom.less文件在bootstrap.less文件夹中。我想编译成css文件夹中的custom.css文件。我不能让古尔普这么做。这是我的密码。

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

Answer 1

我通常所做的是将所有.less或.scss文件编译到css文件夹中。您最终会得到一些空文件(一个很好的例子是包含变量的.less文件)，但另一方面，您可以创建一个gullow任务来清除这些文件。我使用以下代码进行编译：

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

我也在这里生成源地图，但你可以删除它。如果你想在这里发现更多结账这篇文章

希望这能有所帮助；)