Gulp is a streaming build system that uses streams and code over configuration for simpler builds compared to Grunt. It is designed for big projects with a small, idiomatic Node module API and really simple streaming builds. Popular companies and developers use Gulp for tasks like compiling Less to CSS in under 20ms, and writing generic streaming Node modules unrelated to Gulp. The document provides an overview of getting started with Gulp including installing, creating a Gulpfile, running tasks, and the streaming API.

1. Gulp
The streaming build system

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

3. 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.

4. Who uses Gulp ?

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

6. What people says ?

7. 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

8. Best part about @gulpjs is that people are
writing generic, streaming node modules
that have nothing to do with gulp
except the module name :)
@maxogden

9. Getting Started

10. Install gulp globally
$ npm install --global gulp

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

12. 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
});

13. Run gulp
$ gulp

14. Streaming Builds

15. Simple and elegant
gulp.src('static/less/*.less')
.pipe(less())
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(gulp.dest('static/css'));
*.less less autoprefixer cssmin styles.min.css

16. Read the Stream Handbook

17. Gulp API

18. gulp.task
gulp.task(name, function() {
// Do stuff
});

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

20. gulp.src
Returns a readable stream
gulp.src('static/less/*.less')

21. gulp.dest
Returns a "through stream"
gulp.src('static/less/*.less')
.pipe(less())
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(gulp.dest('static/css'));

22. Gulp Generator

23. Yeoman generator that scaffolds out a front-end
web app using gulp for the build process.
https://github.com/yeoman/generator-gulp-webapp

24. The streaming scaffolding system.
Gulp as a replacement for Yeoman
http://slushjs.github.io/

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

26. http://hmphry.com/gulp/

27. Gulp
The streaming build system
Sergey Romanenko
@AwilumIT