使用Gulp编译Sass并压缩供应商的CSS

Question

我正在学习使用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那样添加我的供应商文件，以便它们被包括在最小化和合并中呢？

希望您能给予建议！

- Lee

Answer 1

gulp-sass 可以满足您的需求，请允许我向您展示如何编译 Sass 文件并压缩（或压缩）已编译的 css 文件：

• 从这里安装 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');
});

作为提醒，自述文档

- aisin

Answer 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对于其他情况很有用。

- OverZealous

---

我认为很不可能供应商提供用于缩小文件的 OP 是 Sass 文件，否则他们可能已经按照您建议的方式包含了它。Sass 不能像处理 Sass 文件一样导入 CSS 文件（请参见：https://dev59.com/r2Qn5IYBdhLWcg3wTVh0）。 - cimmanon

谢谢OverZealous。使用@import只会在CSS文件中回显导入，所以这不好。我唯一不喜欢的是文件src的加载顺序。当然，我可以给它们加前缀，比如01_bootstrap.css。 - Lee

太糟糕了，Less有一个替代术语（include），可以包含任何文件。第二个解决方案仍然有帮助。您可以使用数组指定多个src文件（https://github.com/gulpjs/gulp/blob/master/docs/API.md#globs）来控制顺序。 - OverZealous

我无法让OverZealous工作。它只是在目标目录中创建单独的文件。连接没有起到任何作用：-( - Lee

Gulp总是将appFiles代码放在目标输出文件的vendorFiles代码之前（也许是因为它们的流运行得更快，在我的情况下？）。如何解决这个问题？我正在使用mainBowerFiles()和gulpFilter作为vendorFiles源。 - zok

Answer 3

我最近发现了gulp-cssjoin，它可以帮助你将CSS导入替换为内联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']
}))

- Tristan Smith

Answer 4

你可以通过一个简单的任务将scss文件转换为min.css

const { series, src, dest } = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const cleanCss = require("gulp-clean-css");
var rename = require("gulp-rename");

function minCss() {
  return src("scss/*.scss")
    .pipe(sass())
    .pipe(
      rename(function (file) {
        file.basename = file.basename + ".min";
      })
    )
    .pipe(cleanCss())
    .pipe(dest("css"));
}

exports.watch = series(minCss);

- Vu Anh