如何使用gulp-sass插件改善Gulp任务性能?

时间:2015-05-29 11:47:28

标签: javascript sass gulp gulp-sass

我有一个带有长循环的sass文件(生成大约800行CSS),编译大约25秒。太长了。

如何最小化编译时间?

谢谢!

1 个答案:

答案 0 :(得分:2)

这是我使用gulp-sass编译Sass的方法,大约需要800毫秒。您确定使用的是节点版本,而不是Ruby gulp-ruby-sass吗? Ruby比Node.js慢得多。

循环可能是问题,请确保您使用的是Every或For,从不使用。但我也生成了大型网格系统,其中选择器数量更少,而且速度也更快。尝试下面的任务配置:

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