javascript - gulp-sass プラグインを使用して Gulp タスクのパフォーマンスを向上させる方法は?

Question

約 25 秒でコンパイルされる長いループ (約 800 行の CSS を生成) を持つ sass ファイルがあります。長過ぎます。

コンパイル時間を最小限に抑えるにはどうすればよいですか?

ありがとう！

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