Compiling with gulp/node/libsass is taking 30+ seconds

1.3k views Asked by At

I'm using Gulp with node-sass to compile my sass. I am also using node-neat and node-bourbon. However, when I compile, it takes 30-50 seconds! What am I doing wrong? I'm not really sure how libsass plays into gulp-sass and node-sass, or what the difference between gulp-sass and node-sass is. In my gulpfile.js, I've tried both sass = require('gulp-sass'), and sass = require('node-sass'), but they give me the same results. also, I'm using plumber and if I have an error it stops watching. Here is my gulpfile.js:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    bourbon = require('node-bourbon').includePaths;
    neat = require('node-neat').includePaths;
    cache = require('gulp-cache'),
    plumber = require('gulp-plumber'),
    notify = require("gulp-notify"),
    sourcemaps = require('gulp-sourcemaps');

gulp.task('styles', function() {
  return gulp.src('sass/cleverDesign.scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass({
      style: 'expanded',
      includePaths: require('node-bourbon').includePaths,
      includePaths: require('node-neat').includePaths}))
    .pipe(gulp.dest('sass/'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('sass/' ));
});

// Watch
gulp.task('watch', function() {
  // Watch .scss files
  gulp.watch('sass/**/*.scss', ['styles']);
});

gulp.task('default', ['styles', 'watch']);
1

There are 1 answers

2
jacrook On BEST ANSWER

libSass base > NodeSass (main node wrapper) > Gulp-Sass (gulp friendly version)

As for the slow compile time I would double check your version of node, and ensure your node modules for gulp-sass are the newest version. Some critical bugs have been fixed.

For the plumber issue this can be resolved by adding a few more lines to your gulp-sass config. errLogToConsole: true, and .pipe(plumber.stop())

 var gulp = require('gulp'),
    sass = require('gulp-sass'),
    bourbon = require('node-bourbon').includePaths;
    neat = require('node-neat').includePaths;
    cache = require('gulp-cache'),
    plumber = require('gulp-plumber'),
    sourcemaps = require('gulp-sourcemaps');


gulp.task('styles', function() {
  return gulp.src('sass/mainScss.scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass({
      style: 'expanded',
      errLogToConsole: true,
      includePaths: require('node-bourbon').includePaths,
      includePaths: require('node-neat').includePaths}))
    .pipe(gulp.dest('sass/'))
    .pipe(sourcemaps.write())
    .pipe(plumber.stop())
    .pipe(gulp.dest('sass/' ))
});

// Default task
gulp.task('default', function() {
    gulp.start('styles');
});

// Watch
gulp.task('watch', function() {
  gulp.watch('sass/**/*.scss', ['styles']);
});