PatternLab setup with Scss support

gulpfile.js

/** ****************************************************
 * PATTERN LAB NODE
 * EDITION-NODE-GULP
 * The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.
 ***************************************************** */
let gulp = require('gulp'),
    path = require('path'),
    browserSync = require('browser-sync').create(),
    sass = require('gulp-sass'),
    argv = require('minimist')(process.argv.slice(2)),
    concat = require('gulp-concat'),
    sourcemaps = require('gulp-sourcemaps'),
    autoprefixer = require('gulp-autoprefixer'),
    babel = require('gulp-babel'),
    postcss = require('gulp-postcss')

function resolvePath(pathInput) {
    return path.resolve(pathInput).replace(/\\/g, '/')
}

/** ****************************************************
 * COPY TASKS - stream assets from source to destination
 ***************************************************** */
// JS copy
gulp.task('pl-copy:js', () =>
    gulp
        .src('**/*.js', { cwd: resolvePath(paths().source.js) })
        .pipe(gulp.dest(resolvePath(paths().public.js)))
)

// Images copy
gulp.task('pl-copy:img', () =>
    gulp
        .src('**/*.*', { cwd: resolvePath(paths().source.images) })
        .pipe(gulp.dest(resolvePath(paths().public.images)))
)

// Favicon copy
gulp.task('pl-copy:favicon', () =>
    gulp
        .src('favicon.ico', { cwd: resolvePath(paths().source.root) })
        .pipe(gulp.dest(resolvePath(paths().public.root)))
)

// Fonts copy
gulp.task('pl-copy:font', () =>
    gulp
        .src('*', { cwd: resolvePath(paths().source.fonts) })
        .pipe(gulp.dest(resolvePath(paths().public.fonts)))
)

// CSS Copy
gulp.task('pl-copy:css', () =>
    gulp
        .src([
            `${resolvePath(paths().source.css)}/style.css`,
            `${resolvePath(paths().source.css)}/foundation.min.css`,
            `${resolvePath(paths().source.css)}/pattern-scaffolding.css`,
            `${resolvePath(paths().source.css)}/ie9-grid.css`
        ])
        .pipe(gulp.dest(resolvePath(paths().public.css)))
        .pipe(browserSync.stream())
)

/* gulp.task('pl-copy:foundation', function(){
  return gulp.src(resolvePath(paths().source.css) + '/foundation.min.css')
    .pipe(gulp.dest(resolvePath(paths().public.css)))
    .pipe(browserSync.stream());
}); */

// CSS Map copy
gulp.task('pl-copy:cssmap', () =>
    gulp
        .src(`${resolvePath(paths().source.css)}/style.css.map`)
        .pipe(gulp.dest(resolvePath(paths().public.css)))
)

// Styleguide Copy everything but css
gulp.task('pl-copy:styleguide', () =>
    gulp
        .src(`${resolvePath(paths().source.styleguide)}/**/!(*.css)`)
        .pipe(gulp.dest(resolvePath(paths().public.root)))
        .pipe(browserSync.stream())
)

// Styleguide Copy and flatten css
gulp.task('pl-copy:styleguide-css', () =>
    gulp
        .src(`${resolvePath(paths().source.styleguide)}/**/*.css`)
        .pipe(
            gulp.dest(file => {
                // flatten anything inside the styleguide into a single output dir per http://stackoverflow.com/a/34317320/1790362
                file.path = path.join(file.base, path.basename(file.path))
                return resolvePath(path.join(paths().public.styleguide, '/css'))
            })
        )
        .pipe(browserSync.stream())
)

/** ****************************************************
 * PATTERN LAB CONFIGURATION - API with core library
 ***************************************************** */
// read all paths from our namespaced config file
let config = require('./patternlab-config.json'),
    patternlab = require('patternlab-node')(config)

function paths() {
    return config.paths
}

function getConfiguredCleanOption() {
    return config.cleanPublic
}

function build(done) {
    patternlab.build(done, getConfiguredCleanOption())
}

gulp.task('pl-sass', () =>
    gulp
        .src(path.resolve(paths().source.css, '**/*.scss'))
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(path.resolve(paths().source.css)))
)

const jspaths = [
    // path.resolve(paths().source.js, 'path/to/js/module'),
]

gulp.task('pl-concatjs', () =>
    gulp
        .src(jspaths)
        .pipe(concat('all.js'))
        .pipe(gulp.dest(path.resolve(paths().source.js)))
)

gulp.task('pl-babel', () =>
    gulp
        .src(path.resolve(paths().source.js, 'all.js'))
        .pipe(
            babel({
                presets: [['es2015', { modules: false }]]
            })
        )
        .pipe(gulp.dest(path.resolve(paths().source.js, 'dist')))
)

gulp.task(
    'pl-assets',
    gulp.series(
        gulp.parallel(
            gulp.series('pl-concatjs', 'pl-babel', 'pl-copy:js', done => {
                done()
            }),
            'pl-copy:img',
            'pl-copy:favicon',
            'pl-copy:font',
            gulp.series('pl-sass', 'pl-copy:css', 'pl-copy:cssmap', done => {
                done()
            }),
            'pl-copy:styleguide',
            'pl-copy:styleguide-css'
        ),
        done => {
            done()
        }
    )
)

gulp.task('patternlab:version', done => {
    patternlab.version()
    done()
})

gulp.task('patternlab:help', done => {
    patternlab.help()
    done()
})

gulp.task('patternlab:patternsonly', done => {
    patternlab.patternsonly(done, getConfiguredCleanOption())
})

gulp.task('patternlab:liststarterkits', done => {
    patternlab.liststarterkits()
    done()
})

gulp.task('patternlab:loadstarterkit', done => {
    patternlab.loadstarterkit(argv.kit, argv.clean)
    done()
})

gulp.task(
    'patternlab:build',
    gulp.series('pl-assets', build, done => {
        done()
    })
)

gulp.task('patternlab:installplugin', done => {
    patternlab.installplugin(argv.plugin)
    done()
})

/** ****************************************************
 * SERVER AND WATCH TASKS
 ***************************************************** */
// watch task utility functions
function getSupportedTemplateExtensions() {
    const engines = require('./node_modules/patternlab-node/core/lib/pattern_engines')
    return engines.getSupportedFileExtensions()
}

function getTemplateWatches() {
    return getSupportedTemplateExtensions().map(
        dotExtension => `${resolvePath(paths().source.patterns)}/**/*${dotExtension}`
    )
}

function reload() {
    browserSync.reload()
}

function reloadCSS() {
    browserSync.reload('*.css')
}

function reloadJS() {
    browserSync.reload('*.js')
}

function watch() {
    gulp.watch(path.resolve(paths().source.css, '**/*.scss')).on('change', gulp.series('pl-sass'))
    gulp
        .watch(`${resolvePath(paths().source.css)}/style.css`, { awaitWriteFinish: true })
        .on('change', gulp.series('pl-copy:css', reloadCSS))
    gulp
        .watch(`${resolvePath(paths().source.css)}/style.css.map`, { awaitWriteFinish: true })
        .on('change', gulp.series('pl-copy:cssmap'))

    gulp.watch(jspaths).on('change', gulp.series('pl-concatjs'))
    gulp.watch(jspaths, { awaitWriteFinish: true }).on('change', gulp.series('pl-babel'))
    gulp
        .watch(jspaths, { awaitWriteFinish: true })
        .on('change', gulp.series('pl-copy:js', reloadJS))

    gulp
        .watch(`${resolvePath(paths().source.styleguide)}/**/*.*`, { awaitWriteFinish: true })
        .on('change', gulp.series('pl-copy:styleguide', 'pl-copy:styleguide-css', reloadCSS))

    const patternWatches = [
        `${resolvePath(paths().source.patterns)}/**/*.json`,
        `${resolvePath(paths().source.patterns)}/**/*.md`,
        `${resolvePath(paths().source.data)}/*.json`,
        `${resolvePath(paths().source.fonts)}/*`,
        `${resolvePath(paths().source.images)}/*`,
        `${resolvePath(paths().source.meta)}/*`,
        `${resolvePath(paths().source.annotations)}/*`
    ].concat(getTemplateWatches())

    console.log(patternWatches)

    gulp.watch(patternWatches, { awaitWriteFinish: true }).on('change', gulp.series(build, reload))
}

gulp.task(
    'patternlab:connect',
    gulp.series(done => {
        browserSync.init(
            {
                server: {
                    baseDir: resolvePath(paths().public.root)
                },
                snippetOptions: {
                    // Ignore all HTML files within the templates folder
                    blacklist: ['/index.html', '/', '/?*']
                },
                notify: {
                    styles: [
                        'display: none',
                        'padding: 15px',
                        'font-family: sans-serif',
                        'position: fixed',
                        'font-size: 1em',
                        'z-index: 9999',
                        'bottom: 0px',
                        'right: 0px',
                        'border-top-left-radius: 5px',
                        'background-color: #1B2032',
                        'opacity: 0.4',
                        'margin: 0',
                        'color: white',
                        'text-align: center'
                    ]
                }
            },
            () => {
                console.log('PATTERN LAB NODE WATCHING FOR CHANGES')
                done()
            }
        )
    })
)

/** ****************************************************
 * COMPOUND TASKS
 ***************************************************** */
gulp.task('default', gulp.series('patternlab:build'))
gulp.task('patternlab:watch', gulp.series('patternlab:build', watch))
gulp.task('patternlab:serve', gulp.series('patternlab:build', 'patternlab:connect', watch))