有没有办法将 .less 与 Gulp 中的 .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";
...

从你的任务来看，我不明白你为什么不能将 2 合并为一个 'less' 任务，并更新你的主 .less 文件以导入所有 .css文件放在前面。

Answer 2

我一直在努力解决这个问题，相信我有一个使用多个 gulp 插件的干净解决方案。

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 流与以类似方式运行的 less 流合并。我想以相同的方式添加 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": {
  }
}

有没有办法将 .less 与 Gulp 中的 .css 合并？

Is there a way to merge .less with .css in Gulp?

html

javascript

css

node.js

gulp