sassgulpbundlersusy

Dealing with Gulp, Bundler, Ruby and Susy


According to this it's possible to compile susy install from Ruby with Gulp. But is it possible to use gulp-sass instead of gulp-compass or gulp-ruby-sass because of performance and deprecation ? Actually I use this in my gulpfile.js:

gulpfile

var gulp = require('gulp');

// Include plugins
var plugins = require('gulp-load-plugins')();

// Variables de chemins
var source = './sass/**/*.scss'; // dossier de travail
var destination = './css/'; // dossier à livrer   

gulp.task('sasscompil', function () {
  return gulp.src(source)
  .pipe(plugins.sass({
      outputStyle: 'compressed',
      includePaths: ['/home/webmaster/vendor/bundle/gems/susy-2.2.2/sass']
  }).on('error', sasscompil.logError))
  .pipe(plugins.csscomb())
  .pipe(plugins.cssbeautify({indent: '  '}))
  .pipe(plugins.autoprefixer())
  .pipe(gulp.dest(destination + ''));
});

But the error log doesn't work because sasscompil isn't define. Then I need to give the path for all ex-compass includes like susy, sassy-button,etc.. is it possible to give a global path for gems ? other thing, do I install gulp plugins despite of using gulp-load-plugins ? because gulp doesn't find plugins if I don't do that.

Thanks


Solution

  • You need to change sasscompil.logError to plugins.sass.logError

    such that

    gulpfile.js

    gulp.task('sasscompil', function () {
      return gulp.src(source)
      .pipe(plugins.sass({
          outputStyle: 'compressed',
          includePaths: ['/home/webmaster/vendor/bundle/gems/susy-2.2.2/sass']
      }).on('error', plugins.sass.logError))
    ...
    });
    

    gulp-sass doc:

    Pass in options just like you would for node-sass; they will be passed along just as if you were using node-sass. Except for the data option which is used by gulp-sass internally. Using the file option is also unsupported and results in undefined behaviour that may change without notice.

    example

    gulp.task('sass', function () {
     return gulp.src('./sass/**/*.scss')
       .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
       .pipe(gulp.dest('./css'));
    });