GulpThe streaming build system

Gulp's use of streams and code over configurationmakes for a simpler and more intuitive build.

Gulp vs Grunt

Stream-based build system.

Code over configuration.

Small, idiomatic Node modules.

Designed for big projects.

Really simple and elegant API

File-based build system.

Configuration over code.

Designed for small projects.

Who uses Gulp ?

And others: https://github.com/gulpjs/gulp/issues/540

What people says ?

Just switched a project from #gruntjs to #gulpjs - simpler code, & build time on save during

watch from 3-5sec to 10-20ms. I kid you not.

@andrewtjoslin

Best part about @gulpjs is that people arewriting generic, streaming node modules

that have nothing to do with gulp except the module name :)

@maxogden

Getting Started

Install gulp globally$ npm install --global gulp

Install gulp in your project devDependencies$ npm install --save-dev gulp

Create a gulpfile.js at the root of your project

var gulp = require('gulp');

gulp.task('default', function() { // place code for your default task here});

Run gulp$ gulp

Streaming Builds

Simple and elegant

gulp.src('static/less/*.less') .pipe(less())

.pipe(autoprefixer()) .pipe(cssmin()) .pipe(gulp.dest('static/css'));

*.less styles.min.cssless autoprefixer cssmin

Read the Stream Handbook

Gulp API

gulp.task

gulp.task(name, function() {

// Do stuff

});

gulp.watch

gulp.watch('static/less/*.less', ['compile']);

gulp.srcReturns a readable stream

gulp.src('static/less/*.less')

gulp.destReturns a "through stream"

gulp.src('static/less/*.less') .pipe(less()) .pipe(autoprefixer()) .pipe(cssmin()) .pipe(gulp.dest('static/css'));

Gulp Generator

Yeoman generator that scaffolds out a front-end web app using gulp for the build process.

https://github.com/yeoman/generator-gulp-webapp

The streaming scaffolding system.Gulp as a replacement for Yeoman

http://slushjs.github.io/

http://developers.google.com/web/starter-kit

http://hmphry.com/gulp/

GulpThe streaming build system

Sergey Romanenko

@AwilumIT