有办法将.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？

如果不想这样做，较少提供能力 (不像Sass)会导入原始的CSS文件。

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

从您的任务中，我不明白为什么不能将2合并到一个'less'任务中，并更新您的主.less文件，以便提前导入所有.css文件。

Answer 2

我一直致力于此，并相信我有一个干净的解决方案使用几个吞咽插件。

gulp.task('css', function() {
  var cssFiles = [src + 'styles/*.css', 'bower_components/jquery.onoff/dist/jquery.onoff.css'];
  var cssStream = gulp.src(plugins.mainBowerFiles().concat(cssFiles))
        .pipe(plugins.filter('*.css'))
        .pipe(order([
      "app/styles/site.css",
      "*"
    ]));

  var lessStream =  gulp.src(plugins.mainBowerFiles())
        .pipe(plugins.filter('*.less'))
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }));

  return merge(cssStream, lessStream)
        .pipe(plugins.concat('main.css'))
        .pipe(minifyCSS({keepBreaks:true}))
        .pipe(gulp.dest(dest + 'css'));
});

我的例子是显示如何正确设置bower文件，并将它们添加到cssFiles变量中，如果它们不是。此css流与以类似方式运行的较少流合并。我可以想象，以同样的方式添加SASS文件是很简单的。我的package.json包含的比这个实现所必需的更多，但如下所示。

{
  "name": "MHD_Site_v3",
  "version": "0.0.1",
  "description": "",
  "dependencies": {
    "bower": "~0.8.0",
    "gulp-less": "^3.0.3",
    "gulp-logger": "0.0.2"
    "gulp": "^3.8.11",
    "gulp-cache": "^0.2.4",
    "gulp-concat": "^2.4.3",
    "gulp-debug": "^2.0.0",
    "gulp-filter": "^2.0.0",
    "gulp-imagemin": "^2.1.0",
    "gulp-jade": "^0.11.0",
    "gulp-less": "^2.0.1",
    "gulp-load-plugins": "^0.8.0",
    "gulp-minify-css": "^0.4.0",
    "gulp-minify-html": "^0.1.8",
    "gulp-order": "^1.1.1",
    "gulp-rename": "^1.2.0",
    "gulp-sourcemaps": "^1.3.0",
    "gulp-uglify": "^1.1.0",
    "less-plugin-clean-css": "^1.4.0",
    "main-bower-files": "^2.5.0",
    "merge-stream": "^0.1.7",
    "gulp-util": "^3.0.5",
    "path": "^0.11.14"
  },
  "devDependencies": {
  }
}