Gulp.js
Your build process will thank you.
Devon Campbell
Presentation available online at bit.ly/knoxjsgulp
Gulp lets you establish a consistent build
process up-front and run it every time
you’re ready to deploy.
Example: CSS prefixing with
gulp-autoprefixer
!
var prefix = require('gulp-autoprefixer');
!
!
gulp.task('css', function() {
return gulp.src('style.css')
.pipe(prefix("last 2 versions", "> 5%"))
.pipe(gulp.dest('style.css'))
});
https://www.npmjs.org/package/gulp-autoprefixer
Now you know why you would use a task
runner, but why would you choose Gulp?
Advantages of Gulp over Grunt
• Asynchronous by default
• Uses streams to avoid intermediary files
How to get started
• Install node & npm (http://nodejs.org/)
• Install Gulp globally (npm install -g gulp)
• Set up a blank package.json in your project







• Install Gulp for the project (npm install --save-dev gulp)
• Add gulpfile.js in your project and start adding plugins
{
"devDependencies": {}
}
var gulp = require(‘gulp');
!
gulp.task('default', function(){
// Default task code
});
!
Resources
• Code Fellows- Quick intro to Gulp.js

http://www.codefellows.org/blogs/quick-intro-to-gulp-js
• The Front-end Tooling Book- Gulp chapter

http://tooling.github.io/book-of-modern-frontend-tooling/build-systems/
gulp/introduction.html
• Nodejitsu- 9 gulp.js plugins for a great build system

https://blog.nodejitsu.com/npmawesome-9-gulp-plugins/
• Gulp Plugins Directory

http://gulpjs.com/plugins/
Thank you!
Presentation available online at bit.ly/knoxjsgulp
Devon Campbell | devon@radworks.io
Check out RadWorks at radworks.io.

Gulp: Your Build Process Will Thank You

  • 1.
    Gulp.js Your build processwill thank you. Devon Campbell Presentation available online at bit.ly/knoxjsgulp
  • 2.
    Gulp lets youestablish a consistent build process up-front and run it every time you’re ready to deploy.
  • 5.
    Example: CSS prefixingwith gulp-autoprefixer ! var prefix = require('gulp-autoprefixer'); ! ! gulp.task('css', function() { return gulp.src('style.css') .pipe(prefix("last 2 versions", "> 5%")) .pipe(gulp.dest('style.css')) }); https://www.npmjs.org/package/gulp-autoprefixer
  • 6.
    Now you knowwhy you would use a task runner, but why would you choose Gulp?
  • 7.
    Advantages of Gulpover Grunt • Asynchronous by default • Uses streams to avoid intermediary files
  • 8.
    How to getstarted • Install node & npm (http://nodejs.org/) • Install Gulp globally (npm install -g gulp) • Set up a blank package.json in your project
 
 
 
 • Install Gulp for the project (npm install --save-dev gulp) • Add gulpfile.js in your project and start adding plugins { "devDependencies": {} } var gulp = require(‘gulp'); ! gulp.task('default', function(){ // Default task code }); !
  • 9.
    Resources • Code Fellows-Quick intro to Gulp.js
 http://www.codefellows.org/blogs/quick-intro-to-gulp-js • The Front-end Tooling Book- Gulp chapter
 http://tooling.github.io/book-of-modern-frontend-tooling/build-systems/ gulp/introduction.html • Nodejitsu- 9 gulp.js plugins for a great build system
 https://blog.nodejitsu.com/npmawesome-9-gulp-plugins/ • Gulp Plugins Directory
 http://gulpjs.com/plugins/
  • 10.
    Thank you! Presentation availableonline at bit.ly/knoxjsgulp Devon Campbell | devon@radworks.io Check out RadWorks at radworks.io.