Question

我正在使用Gulp将我的bootstrap.less文件编译成bootstrap.css文件。所有的bootstrap LESS文件都在＆＃34; less＆＃34;文件夹和所有CSS文件都在CSS文件夹中。所有较少的bootstrap文件都是@ import并进入bootstrap.less，然后将该文件编译为bootstrap.css。但是我有一个在bootstrap LESS文件夹中的custom.less文件。我想编译成CSS文件夹中的custom.css文件。我不能让Gulp这样做。这是我的代码。

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文件），但另一方面，您可以创建一个gulp任务来清除这些文件。我使用以下代码进行编译：

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

希望这会有所帮助;）

Gulp编译CSS多个src

1 个答案: