gulpfile.js

var del = require('del');
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

// =====================================================================================================================
// *.scss compilation
// =====================================================================================================================
var foundationPaths = [
  'node_modules/foundation-sites/scss',
  'node_modules/motion-ui/src'
];
var materialPaths = [
  'node_modules/@angular/material'
];

gulp.task('sass.foundation', function(){
  return gulp.src('styles/foundation/foundation_core.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
      includePaths: foundationPaths,
      outputStyle: 'compressed'
    }).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('styles/foundation'));
});

gulp.task('sass.material', function(){
  return gulp.src('styles/components/material.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
      includePaths: materialPaths.concat(foundationPaths),
      outputStyle: 'compressed'
    }).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('styles/components'));
});

gulp.task('sass.app', function(){
  return gulp.src('styles/app.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
      includePaths: foundationPaths,
      outputStyle: 'compressed'
    }).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('styles'));
});

gulp.task('sass.components', function(){
  return gulp.src('app/**/*.scss')
    .pipe(sass({
      includePaths: foundationPaths
    }).on('error', sass.logError))
    .pipe(gulp.dest('app'));  // compile in-place
});

gulp.task('sass', ['sass.foundation', 'sass.material', 'sass.app', 'sass.components']);


// =====================================================================================================================
// Cleaner
// =====================================================================================================================
gulp.task('clean.css', function() {
  return del([
    'styles/app.css',                       // generated by sass.app
    'app/**/*.component.css',               // generated by sass.components
    'styles/components/material.css',       // generated by sass.material
    'styles/foundation/foundation_code.css' // generated by sass.foundation
  ])
});

gulp.task('clean.js', function() {
  return del([
    'app/**/*.map',
    'app/**/*.js'
  ])
});

gulp.task('clean', ['clean.css', 'clean.js']);

// =====================================================================================================================
// Gulp watcher
// =====================================================================================================================
gulp.task('watch', function(){
  gulp.watch('styles/foundation/*.scss', ['sass.foundation']);
  gulp.watch('styles/components/*.scss', ['sass.material']);
  gulp.watch('styles/*.scss', ['sass.app']);
  gulp.watch('app/**/*.scss', ['sass.components']);
});