Created
August 19, 2016 06:12
-
-
Save bmuenzenmeyer/7a6ec54dc1ea720a61497a75ea88e3b4 to your computer and use it in GitHub Desktop.
Edition Node Gulp - Gulpfile with node-sass support - http://www.brianmuenzenmeyer.com/adding-common-gulp-tasks-to-pattern-lab-node
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/****************************************************** | |
* 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. | |
******************************************************/ | |
var gulp = require('gulp'), | |
path = require('path'), | |
browserSync = require('browser-sync').create(), | |
sass = require('gulp-sass'), | |
argv = require('minimist')(process.argv.slice(2)); | |
/****************************************************** | |
* COPY TASKS - stream assets from source to destination | |
******************************************************/ | |
// JS copy | |
gulp.task('pl-copy:js', function(){ | |
return gulp.src('**/*.js', {cwd: path.resolve(paths().source.js)} ) | |
.pipe(gulp.dest(path.resolve(paths().public.js))); | |
}); | |
// Images copy | |
gulp.task('pl-copy:img', function(){ | |
return gulp.src('**/*.*',{cwd: path.resolve(paths().source.images)} ) | |
.pipe(gulp.dest(path.resolve(paths().public.images))); | |
}); | |
// Favicon copy | |
gulp.task('pl-copy:favicon', function(){ | |
return gulp.src('favicon.ico', {cwd: path.resolve(paths().source.root)} ) | |
.pipe(gulp.dest(path.resolve(paths().public.root))); | |
}); | |
// Fonts copy | |
gulp.task('pl-copy:font', function(){ | |
return gulp.src('*', {cwd: path.resolve(paths().source.fonts)}) | |
.pipe(gulp.dest(path.resolve(paths().public.fonts))); | |
}); | |
// SASS Compilation | |
gulp.task('pl-sass', function(){ | |
return gulp.src(path.resolve(paths().source.css, '**/*.scss')) | |
.pipe(sass().on('error', sass.logError)) | |
.pipe(gulp.dest(path.resolve(paths().source.css))); | |
}); | |
// CSS Copy | |
gulp.task('pl-copy:css', function(){ | |
return gulp.src(path.resolve(paths().source.css, '*.css')) | |
.pipe(gulp.dest(path.resolve(paths().public.css))) | |
.pipe(browserSync.stream()); | |
}); | |
// Styleguide Copy everything but css | |
gulp.task('pl-copy:styleguide', function(){ | |
return gulp.src(path.resolve(paths().source.styleguide, '**/!(*.css)')) | |
.pipe(gulp.dest(path.resolve(paths().public.root))) | |
.pipe(browserSync.stream()); | |
}); | |
// Styleguide Copy and flatten css | |
gulp.task('pl-copy:styleguide-css', function(){ | |
return gulp.src(path.resolve(paths().source.styleguide, '**/*.css')) | |
.pipe(gulp.dest(function(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 path.resolve(path.join(paths().public.styleguide, 'css')); | |
})) | |
.pipe(browserSync.stream()); | |
}); | |
/****************************************************** | |
* PATTERN LAB CONFIGURATION - API with core library | |
******************************************************/ | |
//read all paths from our namespaced config file | |
var 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-assets', gulp.series( | |
gulp.parallel( | |
'pl-copy:js', | |
'pl-copy:img', | |
'pl-copy:favicon', | |
'pl-copy:font', | |
gulp.series('pl-sass', 'pl-copy:css', function(done){done();}), | |
'pl-copy:styleguide', | |
'pl-copy:styleguide-css' | |
), | |
function(done){ | |
done(); | |
}) | |
); | |
gulp.task('patternlab:version', function (done) { | |
patternlab.version(); | |
done(); | |
}); | |
gulp.task('patternlab:help', function (done) { | |
patternlab.help(); | |
done(); | |
}); | |
gulp.task('patternlab:patternsonly', function (done) { | |
patternlab.patternsonly(done, getConfiguredCleanOption()); | |
}); | |
gulp.task('patternlab:liststarterkits', function (done) { | |
patternlab.liststarterkits(); | |
done(); | |
}); | |
gulp.task('patternlab:loadstarterkit', function (done) { | |
patternlab.loadstarterkit(argv.kit, argv.clean); | |
done(); | |
}); | |
gulp.task('patternlab:build', gulp.series('pl-assets', build, function(done){ | |
done(); | |
})); | |
/****************************************************** | |
* SERVER AND WATCH TASKS | |
******************************************************/ | |
// watch task utility functions | |
function getSupportedTemplateExtensions() { | |
var engines = require('./node_modules/patternlab-node/core/lib/pattern_engines'); | |
return engines.getSupportedFileExtensions(); | |
} | |
function getTemplateWatches() { | |
return getSupportedTemplateExtensions().map(function (dotExtension) { | |
return path.resolve(paths().source.patterns, '**/*' + dotExtension); | |
}); | |
} | |
function reload() { | |
browserSync.reload(); | |
} | |
function watch() { | |
gulp.watch(path.resolve(paths().source.css, '**/*.scss')).on('change', gulp.series('pl-sass')); | |
gulp.watch(path.resolve(paths().source.css, '**/*.css')).on('change', gulp.series('pl-copy:css', reload)); | |
gulp.watch(path.resolve(paths().source.styleguide, '**/*.*')).on('change', gulp.series('pl-copy:styleguide', 'pl-copy:styleguide-css', reload)); | |
var patternWatches = [ | |
path.resolve(paths().source.patterns, '**/*.json'), | |
path.resolve(paths().source.patterns, '**/*.md'), | |
path.resolve(paths().source.data, '*.json'), | |
path.resolve(paths().source.fonts + '/*'), | |
path.resolve(paths().source.images + '/*'), | |
path.resolve(paths().source.meta, '*'), | |
path.resolve(paths().source.annotations + '/*') | |
].concat(getTemplateWatches()); | |
gulp.watch(patternWatches).on('change', gulp.series(build, reload)); | |
} | |
gulp.task('patternlab:connect', gulp.series(function(done) { | |
browserSync.init({ | |
server: { | |
baseDir: path.resolve(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' | |
] | |
} | |
}, function(){ | |
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
Would you be able to provide an updated version for the new gulpfile syntax? https://github.com/pattern-lab/edition-node-gulp/blob/master/gulpfile.js