javascript - 有没有办法在 Gulp 中合并 .less 和 .css？

Question

到目前为止我还没有找到解决办法。这是我现在想到的:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uncss = require('gulp-uncss');
var minifyCSS = require('gulp-minify-css'); 
var concatCss = require('gulp-concat-css');
var less = require('gulp-less');
var stripCssComments = require('gulp-strip-css-comments');

gulp.task('css', function() {
    return gulp.src('css/*.css')
      .pipe(stripCssComments({all:true}))
      .pipe(concat('plugins.css'))
      .pipe(uncss({html: ['index.html']}))
      .pipe(minifyCSS())
      .pipe(gulp.dest('build/css'));
});
gulp.task('less', function() {
    return gulp.src('css/*.less')
      .pipe(less())
      .pipe(stripCssComments({all:true}))
      .pipe(concat('styles.css'))
      .pipe(uncss({html: ['index.html']}))
      .pipe(minifyCSS())
      .pipe(gulp.dest('build/css'));
});

基本上，我正在尝试将 .less 与 .css 合并，我只希望构建一个 .css。我尝试了不同的语法来实现这种效果但无济于事，gulp 总是向我发送错误消息。有人有想法吗？

Answer 1

如果 .css 文件在 css/ 中，正如您的 css 任务所说，为什么不将它们重命名为 .less?

如果您不想这样做，less offers the ability (与 Sass 不同)导入原始 CSS 文件。

@import (css) "file1.css";
@import (css) "files2.css";
...

从您的任务中，我不明白为什么您不能将这两个任务合并为一个 'less' 任务，并将您的主 .less 文件更新为预先导入所有 .css 文件。