如何使用 gulp-sass 插件提高 Gulp 任务性能？答案

【问题标题】：How to improve Gulp task performance with gulp-sass plugin?如何使用 gulp-sass 插件提高 Gulp 任务性能？
【发布时间】：2015-08-12 06:36:15
【问题描述】：

我有一个长循环的 sass 文件（生成大约 800 行 CSS），编译大约 25 秒。它太长了。

我怎样才能最小化编译时间？

谢谢！

【问题讨论】：

标签： javascript sass gulp gulp-sass

【解决方案1】：

这就是我使用gulp-sass 编译 Sass 的方式，它需要大约 800 毫秒或更短的时间。您确定您使用的是节点版本，而不是 Ruby gulp-ruby-sass？ Ruby 比 Node.js 慢得多。

循环可能是问题所在，请确保您使用的是 Each 或 For，而不是 While。但我也生成了包含更少 200 个选择器的大网格系统，而且速度也很快。在下面尝试我的任务配置：

var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var gulpif = require('gulp-if');
var minify = require('gulp-minify-css');
var argv = require('yargs').argv;
var cache = require('gulp-cached');

// Values from console flags.
var is = {
    dev: argv.develop,
    prod: argv.production
};

// Gulpfile config.
var config = {
    sass: {
        src: './src/**/*.scss',
        dest: 'src/',
        maps: '/'
    }
};


gulp.task('sass', function () {
    return gulp.src(config.sass.src)
        .pipe(cache('sass'))
        .pipe(gulpif(is.dev, sourcemaps.init()))
        .pipe(autoprefixer())
        .pipe(gulpif(is.prod, minify()))
        .pipe(gulpif(is.dev, sourcemaps.write(config.sass.maps)))
        .pipe(gulp.dest(config.sass.dest));
});

【讨论】：