Post on 25-Jun-2015
description
BUILD SYSTEMS
Inputfile
Exec.task
Outputfile
“Grunt is a task-based command line build tool for JavaScript projects.”
Original purpose of Grunt - 2012
gruntfile.js
Plugins
grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch');
1. Compile LESS to CSS 2. Concatenate and minify JavaScript 3. Watch source files for changes
Simple Task
autoprefixer: { options: { browsers: ['last 2 version', 'ie 8', 'ie 9'] }, styles: { expand: true, flatten: true, src: '<%=src%>/assets/css/*.css', dest: '<%=src%>/assets/css/' }, },
Complex Task
assemble: { options: { flatten: true, data: ['<%=site.source%>/data/*.{json,yml}', 'package.json'], plugins: [ 'assemble-middleware-permalinks', 'assemble-middleware-anchors', 'assemble-middleware-wordcount' ], helpers: [ 'handlebars-helper-compose', 'handlebars-helper-moment', './src/js/helpers/*.js' // Custom helpers ], assets: '<%=site.development%>/assets', partials: [opt.tpl + '/partials/**/*.{hbs,md}', opt.tpl + '/snippets/**/*.{hbs,md}'], layoutdir: opt.tpl + '/layouts', layout: 'default.hbs', collections: [ { name: 'post', sortby: 'date', sortorder: 'descending', pages: [opt.posts] } ], marked: { highlight: function (code, lang) { if (lang === undefined) lang = 'bash'; if (lang === 'js') lang = 'javascript'; if (lang === 'less') lang = 'scss'; return hljs.highlight(lang, code).value; } }, sitemap: { homepage: '<%=site.url%>', changefreq: 'daily', priority: '0.8', robot: true }, permalinks: { structure: ':basename/index.html' }, compose: { cwd: opt.posts } }, pages: { files: [ { src: opt.pages + '/*.{hbs,md}', dest: opt.dev + '/' } ] }, posts: { options: { layout: 'layout-blog.hbs', permalinks: { structure: ':year/:basename/index.html' }, feed: { debug: true, prettify: true, dest: 'rss.xml' }, wordcount: { selector: '.article-content' } }, files: [ { src: opt.posts + '/**/*.{hbs,md}', dest: opt.dev + '/' }, { src: opt.pages + '/index.hbs', dest: opt.dev + '/index.html' } ] }, projects: { permalinks: { structure: ':year/:basename/index.html' }, files: [ { src: opt.projects + '/*.{hbs,md}', dest: opt.dev + '/' } ] },
“Gulp does nothing but provide some streams and a basic task system.”
- Eric Schoffstall
STREAMS
Why are steams so great?Imagine the I/O and tasks of a build system
Read file(s) Task 1 Task 2 Task 3
Writefile(s)
Filesystem
File system What you probably imaginedInput
Output
Read file(s) Task 1 Read
file(s) Task 2Writefile(s)
“temp”folder
File system
Hopefully not what you imagined
Input Output
Writefile(s)
FilesystemFinal Output
Plugins do more than one task
Plugins do tasks that shouldn’t be in a plugin, like tests
gruntfile.js is configuration, not code
Grunt
Build systems should empower, not impede
GulpWith Gulp your build file is code and not config
Plugins are simple and do one thing —most are a ~20 line function
Tasks are executed with maximum concurrency
I/O works the way you picture it
There are only five things you need to know to
understand gulp.
gulp.task(name,fn)Registers the function with a name that can be executed from the CLI
gulp.src(glob)Returns a readable stream
gulp.dest(glob)Returns a writable stream
.pipe()Node.js function that takes the readable source stream, gulp.src
and hooks the output to the destination writable stream, gulp.dest
github.com/substack/stream-handbook#pipe
.pipe(foo) returns foo, e.g.,
a.pipe(b).pipe(c).pipe(d)
is the same as
a.pipe(b); b.pipe(c); c.pipe(d);
.pipe() in gulp
var a = gulp.src(‘styles.less'); // input
a.pipe(less()) // => compiled css .pipe(auto()) // => prefixed css .pipe(gulp.dest(‘styles.css')); // => output
gulp.task('styles', function () { gulp.src('/less/styles.less')
});
.pipe(less()) .pipe(gulp.dest('/public/css'))
gulp.watch(glob,fn)Executes a function when a file that matches the glob changes
gulpfile.js vs gruntfile.js demo
gulp-less gulp-uglify
gulp-concat gulp-header
gulp-minify-css
gulp-help gulp-notify gulp-autoprefixer gulp-recess moment
npm install
One can use Node packages instead
of gulp plugins
npmjs.org/package/del = npmjs.org/package/gulp-clean
Gulp ain’t all awesome
Error management ≠ good
Use casesBecause build systems should
empower, not impede
Continue using Grunt on pre-existing projects Continue using Grunt with dev teams that are used to it
Start using Gulp for personal projects Start using Gulp for work projects whenever possible
questions
Patrick Burtchaell
@pburtchaell pburchaell.com
gibbon.co/pb/gulp