How can I improve the performance of a Gulp task using the gulp-sass plugin?

I have a sass file with a long loop (generate about 800 lines of CSS) which is about 25 seconds long. This is too long.

How can I minimize compilation time?

Thank!

+3


source to share


1 answer


This is how I will compile Sass using gulp-sass and it takes about 800ms or less. Are you sure you are using the node version and not Ruby gulp-ruby-sass ? Ruby is much slower than Node.js.

There may be a loop problem, make sure you are using Every or For, never While. But I also created a large grid with over 200 selectors and it was fast too. Try my task config below:



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

      

+2


source







All Articles