使用 Gulp 编译 Sass 并缩小供应商 css答案

【问题标题】：Using Gulp to Compile Sass and minify vendor css使用 Gulp 编译 Sass 并缩小供应商 css
【发布时间】：2014-03-30 22:35:34
【问题描述】：

掌握 Gulp 并提出问题。

所以我有一个类似下面的 gulp CSS 任务，它工作得很好：

var sassDir = 'app/scss';
var targetCssDir = 'public/assets';

gulp.task('css', function(){
    return gulp.src(sassDir + '/main.scss')
        .pipe(sass({ style: 'compressed' }).on('error', gutil.log))
        .pipe(autoprefix('last 10 version'))
        .pipe(gulp.dest(targetCssDir));;
});

但是有没有办法像 Bootstrap 这样添加我的供应商文件，以便将其包含在内以进行缩小和连接。

希望你能给点建议！

【问题讨论】：

标签： css sass gulp

【解决方案1】：

gulp-sass 将满足您的要求。请让我向您展示如何编译 Sass 文件并缩小（或压缩）已编译的 css 文件：

从here 安装 gulp-sass
在您项目的 gulpfile.js 中，添加以下代码：

注意：gulp-sass 中的outputStyle 有四个选项：nested、expanded、compact、compressed

它确实有效，我在我的项目中使用过它。希望对您有所帮助。

var gulp = require('gulp');
var sass = require('gulp-sass');

//sass
gulp.task('sass', function () {
    gulp.src(['yourCSSFolder/*.scss', 'yourCSSFolder/**/*.scss'])
        .pipe(sass({outputStyle: 'compressed'}))
        .pipe(gulp.dest('yourCSSFolder/'));
});

// Default task
gulp.task('default', function () {
    gulp.start('sass');
});

提醒readme

【讨论】：

【解决方案2】：

我可以想到两种解决方案。 ~~我觉得最好的选择是在你的 Sass 文件中使用 @import 语句来包含供应商文件。使用它们所在位置的相对路径，然后你可以按照你想要的顺序包含它们。~~显然这在使用 SASS 时不起作用，除非你使用 SASS 导入。

或者，您可以使用event-stream 和gulp-concat 连接文件流。在这种情况下，您应该不使用gulp-sass 来压缩文件，而应该使用gulp-csso 之类的东西来处理压缩。

var es = require('event-stream'),
    concat = require('gulp-concat');

gulp.task('css', function(){
    var vendorFiles = gulp.src('/glob/for/vendor/files');
    var appFiles = gulp.src(sassDir + '/main.scss')
        .pipe(sass({ style: 'compressed' }).on('error', gutil.log));

    return es.concat(vendorFiles, appFiles)
        .pipe(concat('output-file-name.css'))
        .pipe(autoprefix('last 10 version'))
        .pipe(gulp.dest(targetCssDir));
});

同样，如果可以，您应该使用第一种方法，但es.concat 对于其他情况很有用。

【讨论】：

我发现 OP 为了缩小目的而包含的供应商文件不太可能是 Sass 文件，否则他们可能会按照您的建议包含它。 Sass 无法像处理 Sass 文件那样导入 CSS 文件（参见：stackoverflow.com/questions/16947337/…）。
感谢 OverZealous。使用 @import 只是在 css 文件中回显输出导入，这样就不好了。我唯一不喜欢 src 的文件是它们加载的顺序。当然我可以给它们加前缀，即 01_bootstrap.css。
太糟糕了，Less 有一个替代术语 (include)，它可以包含任何文件。第二种解决方案仍然可以提供帮助。您可以指定multiple src files using an array来控制订单。
我不能让它工作过度热心。它只是在目标目录中创建单独的文件。 concat 什么也没做：-(
Gulp 总是将 appFiles 代码放在目标输出文件中的 vendorFiles 代码之前（在我的情况下，可能是因为它们的流运行得更快？）。如何解决？我使用 mainBowerFiles() 和 gulpFilter 作为 vendorFiles 源。

【解决方案3】：

我最近发现了这个gulp-cssjoin 这允许您用内联 css 替换导入

scss

@import '../../bower_components/angular/angular-csp.css';

gulp 任务

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    sass = require('gulp-ruby-sass'),
    cssjoin = require('gulp-cssjoin'),
    csscomb = require('gulp-csscomb');

gulp.task('sass',['images'], function() {
  return gulp.src('src/sass/*.{sass,scss}')
    .pipe(sass({
      compass: true,
      bundleExec: true,
      sourcemap: true,
      sourcemapPath: '../src/sass'
    }))
    .on('error',gutil.log.bind(gutil, 'Sass Error'))
    .pipe(cssjoin({
      paths: ['./src/sass']
    }))
    .pipe(csscomb())
    .pipe(gulp.dest('build'));
});

重要的部分是路径的传入

.pipe(cssjoin({
  paths: ['./src/sass']
}))

【讨论】：