Gulpfile that copies complied Sass (CSS) file into your clipboard so you can paste it easily. Good setup for using global styles and modular elements like in the HubSpot Design Manager 2

gulpfile.js

/*
install instructions:

npm init -y
npm install username gulp gulp-sass gulp-rename gulp-sourcemaps sass-include-paths 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
gulpfile.js
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
    
*/


/* Gulp Variables */

// Some of this is in here for me to create stuff based upon username (using my personal laptop vs my work laptop I can have gulp save stuff different places)

const username = require('username');
const local = __dirname;
const directories = local.split('/');
const repo = directories[directories.length - 1];
const user = username.sync();
// will need to edit this below with your folders
const scssIncludePaths = ['pages', 'modules', 'bootstrap', 'globals'];
// 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 sourcemaps = require('gulp-sourcemaps');
const sassIncl = require('sass-include-paths');
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 source = [
    'scss/**/*.scss',
    '!node_modules/**/*.scss'
];
const destination = local + '/css/';

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

gulp.task('build-production', () => {
    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(source)
        .pipe(cache('cash'))
        .pipe(plumber({errorHandler: onError}))
        .pipe(sass({
            includePaths: scssIncludePaths
        }))
        .pipe(postcss([ autoprefixer() ]))
        .pipe(gulp.dest(destination));
});

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 watcher = gulp.watch('**/**/*.scss', ['build-production']);
    watcher.on('change', (file) => {
        console.log('Building after 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('css/dm2modules/*.css', ['copy-css-file']);
    cssWatcher.on('change', (file) => {
        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);
        }
    })
});