Gulp file used for compiling SCSS into css. scss/dm2modules folder will compile to a single CSS file (/css/dm2modules/). Other folders will compile to a css/main.css. Gulp copies the current CSS file you are saving into your clipboard so you can paste your item into your live file without needing to open file and copy!

gulpfile.js

/*
install instructions:

npm init -y
npm install gulp gulp-sass gulp-rename gulp-plumber gulp-notify gulp-postcss autoprefixer fs copy-paste gulp-cached

folder setup:
html/               // i like working on my code in my editor so I have this
scripts/            // i like working on my code in my editor so I have this
gulpfile.js         // this file
node_modules/
css/                // auto generates
scss/
    main.scss       // imports variables, globals/*,  pages  [NOT dm2modules]
    _variables.scss // will need to import this into all of your dm2modules
        globals/    // user created folder. This is where your global stuff goes
            _type.scss
            _layout.scss
            _helpers.scss
    _pages.scss     // this imports all stuff form pages folder
        pages/
            _home.scss
            _about.scss
    dm2modules/     // user created folder. These are where your single files go
        hero.scss   // remove _ (underscore) from beginning so gulp complies it separately

	
	Protip: If your modules use variables, make sure to include the variables file at the top of your module files.

*/

/* Gulp Variables */

const local = __dirname;
const directories = local.split('/');
const repo = directories[directories.length - 1];
// will need to edit this below with your folders
const scssIncludePaths = ['scss', 'scss/pages', 'scss/modules', 'scss/bootstrap', 'scss/globals', 'scss/mixins', 'scss/classes'];
// if you change your dm2modules you will need to adjust this, can also be array of multiple locations
const specialModules = local + '/scss/dm2modules/*.css';

/* Node Dependencies */
const gulp = require('gulp');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const fs = require('fs');
const ncp = require('copy-paste');
const cache = require('gulp-cached');

const sourceGlobals = [
    'scss/**/*.scss',
    '!scss/dm2modules/**/*.scss'
];
const sourceModules = [
    'scss/dm2modules/**/*.scss'
];

const destinationGlobals = local + '/css/';
const destinationModules = local + '/css/dm2modules/';

const cssWatchFolders = [
    'css/dm2modules/*.css',
    'css/*.css'
];

gulp.task('default', ['watch']);

gulp.task('build-modules', () => {
    var onError = (err) => {
        notify.onError({
            title: "Gulp",
            subtitle: "Error: ",
            message: "<%= error.message %>",
            sound: "Pop"
        })(err);
        this.emit('end');
    }
    // using gulp-cached -- this will only continue forward with files if they
    // are different than previous version. On First save it will touch all files
    // from the next save it will only save what you are working in.
    return gulp.src(sourceModules)
        .pipe(cache('cash'))
        .pipe(plumber({errorHandler: onError}))
        .pipe(sass({
            includePaths: scssIncludePaths
        }))
        .pipe(postcss([ autoprefixer() ]))
        .pipe(gulp.dest(destinationModules));
});

gulp.task('build-globals', () => {
    var onError = (err) => {
        notify.onError({
            title: "Gulp",
            subtitle: "Error: ",
            message: "<%= error.message %>",
            sound: "Pop"
        })(err);
        this.emit('end');
    }
    // using gulp-cached -- this will only continue forward with files if they
    // are different than previous version. On First save it will touch all files
    // from the next save it will only save what you are working in.
    return gulp.src(sourceGlobals)
        .pipe(plumber({errorHandler: onError}))
        .pipe(sass({
            includePaths: scssIncludePaths
        }))
        .pipe(postcss([ autoprefixer() ]))
        .pipe(gulp.dest(destinationGlobals));
});

gulp.task('copy-css-file', () => {
    // in case you want to run anything additional after saving the css file
    console.log('stay wavy');
    return true;
});


gulp.task('watch', function() {
    let globalWatcher = gulp.watch(sourceGlobals, ['build-globals']);
    globalWatcher.on('change', (file) => {
        console.log('Building Global file ' + file.path + ' was changed...');
    });

    let moduleWatcher = gulp.watch(sourceModules, ['build-modules']);
    globalWatcher.on('change', (file) => {
        console.log('Building Module file ' + file.path + ' was changed...');
    });
    // Let's monitor the css folder for updates. Because of the caching we will
    // be updated for only 1 file save if we are working on a dm2module sass file
    // then we read that file and put it into your clipboard so you can paste
    // directly into the design manager css section.
    let cssWatcher = gulp.watch(cssWatchFolders, ['copy-css-file']);
    cssWatcher.on('change', (file) => {
        console.log('csswatcher changed')
        try {
            let cssFile = fs.readFileSync(file.path, 'utf8');
            ncp.copy(cssFile, () => {
                console.log('copied ' + file.path + ' to your clipboard!');
            })
        } catch(e) {
            console.log('Error:', e.stack);
        }
    })
});