Javascript 有没有一种方法可以将.less与Gulp中的.css合并？

到目前为止，我还没有找到解决办法。以下是我目前的想法：

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总是给我发送错误消息。有人有主意吗？

如果

.css

文件在

css/

中，正如

css

任务所说，为什么不直接重命名它们

.less

如果您不想这样做，（与Sass不同）可以导入原始CSS文件

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

---

从您的任务中，我不明白为什么您不能将这两个文件合并到一个

'less'

任务中，并更新您的主

.less

文件以预先导入所有

.css

文件。

如果

.css

文件如

css

任务所述，那么为什么不将它们重命名为

.less

如果您不想这样做，（与Sass不同）可以导入原始CSS文件

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

---

从您的任务中，我不明白为什么您不能将2合并到单个

'less'

任务中，并更新您的主

.less

文件以预先导入所有

.css

文件。

我一直在研究这个问题，并且相信我有一个使用多个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流与以类似方式运行的较少的流合并。我可以想象，以同样的方式添加SASS文件会很简单。My 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": {
  }
}

---

我一直在做这个，相信我有一个干净的解决方案，使用几个大口插件

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文件会很简单。My 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": {
  }
}

---

嗯，是的，这是一种看待我没有想到的问题的方式。。我基本上把我所有的引导、jquery ui东西重命名为.less，然后就可以了。感谢两年后的大部分时间，我可以确认这仍然是事实-尽管如果你试图用gulp sourcemaps来源地图，你可能会遇到问题。事实证明，问题不在于sourcemaps，而是同时使用gulp sourcemaps和gulp clean css，这会导致问题，因为看起来clean css试图清理地图文件。嗯，是的这是一种看待我没有想到的问题的方式。。我基本上把我所有的引导、jquery ui东西重命名为.less，然后就可以了。感谢两年后的大部分时间，我可以确认这仍然是事实——尽管如果你试图用gulp sourcemaps来源地图，你可能会遇到问题。事实证明，问题不在于sourcemaps，而是同时使用gulp sourcemaps和gulp clean css，这会导致问题，因为看起来clean css试图清理地图文件。