Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
PatternLab setup with Scss support
/** ****************************************************
* 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))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.