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文件以导入所有{{1}预先存档。

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

有没有办法在Gulp中与.css合并。

2 个答案: