Gulp Tutorial - Part 13 SASS

http://robertdunaway.github.io

http://mashupjs.github.io

The Mashup is a learning tool that serves as a seed project for line-of-business applications. It’s goal is a shortened learning curve for building modern business applications and the reduction of technical debt.

This tutorial and more can be found in

Gulp - Quick guide to getting up and running today

Gulp Tutorial - Part 13

SASS

For your SASS implementation, we will use the Gulp-SASS plugin.

From the command-line install

npm install gulp-sass --save-dev

Add the module to the Gulp file

, sass = require('gulp-sass')

Add the task to the Gulp file

gulp.task('sass', function () {
    gulp.src('./dist/**/*.scss', { base: 'dist/./' })
      .pipe(plumber({
          errorHandler: onError
      }))
        .pipe(sass())
        .pipe(gulp.dest('dist/./'));
});

Add the new task to the default task

gulp.task('default', function () {
    runSequence('annotate', 'clean-dist', 'copy',
                ['coreservices', 'routeconfig', 'libs', 'minifyhtml', 'minifyimage'
                    , 'grunt-merge-json:menu', 'jshint', 'tscompile', 'tslint', 'sass'],
                ['uglifyalljs', 'minifycss']);
});

Run the default task

gulp

Learn more about SASS here

http://sass-lang.com/

Source code for this tutorial

Start the tutorial using this code base:

https://github.com/MashupJS/gulp-tutorial

A completed tutorial can be found here:

https://github.com/MashupJS/gulp-tutorial-end-result

This tutorial and more can be found in

Gulp - Quick guide to getting up and running today