PANIOV: 11/24/15

Tuesday, November 24, 2015

GULP - how to configure Gulp to use Sass instead of Less

In order to use Sass instead of Less with Gulp follow this instruction:
https://www.npmjs.com/package/gulp-ruby-sass

and here:
https://github.com/sindresorhus/gulp-ruby-sass

Here is the gulp task for Sass (instead of Less) in HotTowel generator for Angular project:

var sass = require('gulp-ruby-sass');

/** * Compile less to css * @return {Stream} */gulp.task('styles', ['clean-styles'], function() {
    /*log('Compiling Less --> CSS');
    return gulp        .src(config.less)        .pipe($.plumber()) // exit gracefully if something fails after this        .pipe($.less())//        .on('error', errorLogger) // more verbose and dupe output. requires emit.        .pipe($.autoprefixer({browsers: ['last 2 version', '> 5%']}))        .pipe(gulp.dest(config.temp));*/
    log('Compiling Sass --> CSS');
    return sass(config.sass)
        .pipe($.autoprefixer({browsers: ['last 2 version', '> 5%']}))
        .pipe(gulp.dest(config.temp));
});
gulp.task('sass:watch', function () {
    gulp.watch(config.sass, ['sass']);