使用 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，以便将其包含在缩小和串联中。

希望你能提供建议。！

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');
});

提醒自述文件

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对于其他方案很有用。

Answer 3

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

南海

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

咕噜咕噜的任务

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']
}))

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);