CODEWITHSUNDEEP
cachingsassgulpgulp-watch
zok
zok

Reputation: 7892

gulp-ruby-sass plugin not caching Sass files

How to cache Sass files with gulp-ruby-sass? It seems that it should be a default option, but that’s not happening. I must be missing something.

While the watch task runs, for every time I change something in app/styles/main.scss, gulp-ruby-sass will compile Bootstrap's Sass again unnecessarily, taking up around 4-5 extra seconds.

My app/styles/main.scss file looks like this:

// MY PROJECT DEFAULTS
@import “my_project/variables";

// bower:scss
@import "../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap.scss";
// endbower

// ...

The gulpfile.js was generated on 2014-11-25 using generator-gulp-webapp 0.1.0, linked to the master branch from the git repo.

See the gulpfile.js here

Styles function:

gulp.task('styles', function () {
  return gulp.src('app/styles/main.scss')
    .pipe($.plumber())
    .pipe($.rubySass({
      style: 'expanded',
      precision: 10
    }))
    .pipe($.autoprefixer({browsers: ['last 1 version']}))
    .pipe(gulp.dest('.tmp/styles'));
});

.sass-cache folder is being created, and its folders includes main.scssc as well as Bootstrap's partials.

UPDATE

So far I've found two solutions (not for caching though, but for faster compile time):

1) gulp-ruby-sass version 1.0 (alpha), which is faster and works with source-maps. It seems that will soon be released. Check this

2) gulp-sass which uses C/C++ and it's very fast, but doesn't have some features.

Upvotes: 2

Views: 649

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

I expect that you issue is related to https://github.com/sindresorhus/gulp-ruby-sass/issues/111. Although this issue is open still, i can't not confirm your issue when using generator-gulp-webapp 0.3.0 (and gulp-ruby-sass 1.0.1 with Sass 3.4.13 (Selective Steve))

generator-gulp-webapp 0.3.0 ships with gulp-sass by default. After installing a gulp-webapp with Sass and Bootstrap i replace the styles task as follows:

gulp.task('styles', function () {
    return $.rubySass('app/styles/main.scss') 
    .on('error', function (err) {
      console.error('Error!', err.message);
   })
    .pipe(gulp.dest('.tmp/styles'))
    .pipe(reload({stream: true}));
});

After changing main.scss the watch task runs and outputs:

[BS] 1 file changed (main.css) 
[15:53:17] Finished 'styles' after 20 s

Now the content of .sass-cache folder look like that shown beneath:

/.sass-cache$ ls -la
total 24
drwxrwxr-x 6 bass bass 4096 Apr 13 15:40 .
drwxrwxr-x 9 bass bass 4096 Apr 13 15:48 ..
drwxrwxr-x 2 bass bass 4096 Apr 13 15:40 721aed65acc825809156d020625072c6ea20be50
drwxrwxr-x 2 bass bass 4096 Apr 13 15:40 b311c6377fb599f57cc8c0d0c360c9b83a27e34b
drwxrwxr-x 2 bass bass 4096 Apr 13 15:40 d1eb2de86ef2be3a4571ad5415b5156c01618faf
drwxrwxr-x 2 bass bass 4096 Apr 13 15:53 e2b546d387a82bc59b03d84e84d775c05a23ac82

As far as a do understand only e2b546d387a82bc59b03d84e84d775c05a23ac82 has been changed, which contains only a cached version of main.scss.

Upvotes: 0

Related Questions