Gulp is a front-end development tool. It is basically a streaming build system which provides a way of doing automatic tasks that you have to do yourself again and again. It's easy to use and very efficient. It all depends on plugins that are intended to only do one job each. View the deck to know more about Gulp.

1. Gulp- The Streaming Build System
Sunniya Maini

2. Gulp- The Streaming Build System
Sunniya Maini

3. www.tothenew.com
Build System
Input Executive Task Output
• Reforming and optimising the assets of a website is not a part of any design
process.
• This consists of repetitive tasks that can be automated with a build tool to
improve web efficiency. This whole process makes a build system.
Example of build tools: Gulp, Grunt, Broccoli and Brunch etc.

4. www.tothenew.com
Explore Gulp
What is Gulp?
• A front-end development tool
• A streaming build system, basically, it's a way of doing automatically the tasks that you would have
to do yourself again and again.
• Or It’s streaming nature is what allows it to pipe and pass around the data being manipulated or
used by it’s plugins. The plugins are intended to only do one job each, so it’s not uncommon to pass
a singular file through multiple plugins.
• A JavaScript task runner, designed to automate (run) common tasks

5. www.tothenew.com
What Gulp Does?
When it comes to web development, it perform several tasks:
• Unit testing
• JS Linting
• Concatenating/minifying
• Image optimization
• Replace scripts in HTML files
• SASS/LESS
• And more..

6. www.tothenew.com
Build System for GULP
Input Read Files Modify Files
Modify Files
Modify FilesWrite FilesOutput

7. www.tothenew.com
Why Gulp ?
Easy to use:
Gulp keeps things simple and helps easy management of complex tasks by preferring code
over configuration.
Efficient:
Gulp uses the power of Node streams to give fast builds that don't write intermediary files to
disk.
High Quality:
With strict guidelines enforced, it is ensured that plugins work simple as expected.
Easy to Learn:
Your build works exactly as you expect, as a minimal API surface is maintained and the best
practices of Node are followed.

8. www.tothenew.com
Getting Started

9. www.tothenew.com
Install Gulp on your workstation and learn CLI
Install node.js
https://nodejs.org/
Install Gulp
$ npm install gulp –g
Where,
• $ represent command prompt, not a part of code.
• npm install, command that uses node package manager to install Gulp in your machine.
• -g, intstruct npm to install Gulp globally, so that you can access Gulp from anywhere on your machine.

10. www.tothenew.com
Create a Gulp project
Run npm init: Creates a package.json file in project which stores information about the project, like
the dependencies used in the project
This command prompts like:

11. www.tothenew.com
Dev dependencies
Once package.json is created, we can install Gulp for project only.
$ npm install gulp --save-dev
“--save-dev” tells machine to add Gulp as a dev dependency in package.json
Gulp environment is setup.

12. www.tothenew.com
API: 4 level of functioning
Gulp is a streaming build system. It’s streaming nature is what allows it to pipe and pass around the
data being manipulated or used by it’s plugins. The plugins are intended to only do one job each, so
it’s not uncommon to pass a singular file through multiple plugins.
• task
• src
• pipe
• dest
• watch

13. www.tothenew.com
General directory structure for gulp project

14. www.tothenew.com
Install Plugins
 Go to cmd:
npm install <plugin-name> --save-dev
 Go to gulpfile.js:
require/add plugin in this file
 Again in gulpfile.js:
add task
 Go to cmd:
run task: $ gulp task-name

15. www.tothenew.com
Task: defining a task
In a gulp task, it read some files using gulp.src,
pass them through various transformations using the pipe function,
and finally write them back to disk by piping to gulp.dest
gulp.task('task-name', function() {
// Stuff here
});
task-name refers to name of task
Example:
gulp.task('hello', function() {
console.log('Hello World');
});
Run: $ gulp hello

16. www.tothenew.com
gulp-uglify: minify files
Install:
$ npm install gulp-uglify --save-dev
Usage:
Gulpfile.js:
var uglify = require(‘gulp-uglify’);
Task:
gulp.task(‘default’, function() {
gulp.src(‘src/js/*.js’)
.pipe(uglify())
.pipe(gulp.dest(‘dist’));
});
Run on command prompt:
$ gulp
If you want to specify a name to a task write:

17. www.tothenew.com
Continued
If you want to specify a name to a task write:
Task:
gulp.task(‘scripts’, function() {
gulp.src(‘src/js/*.js’)
.pipe(uglify())
.pipe(gulp.dest(‘dist’));
});
Run on command prompt:
$ gulp scripts
Concept of streams based on above example:
As we know, streams enable you to pass some data through a number of usually small functions, which will modify
the data and then pass the modified data to the next function.
In the example above, the gulp.src() function takes a string, which matches a file or number of files (known as a
“glob”), and creates a stream of objects representing those files. They are then passed (or piped) to
the uglify()function, which takes the file objects and returns new file objects along with a minified source. The
output is then piped to the gulp.dest() function, which saves the changed files.

18. www.tothenew.com
Resources
https://www.npmjs.com/package/gulp-uglify
https://www.youtube.com/watch?v=dwSLFai8ovQ
http://gulpjs.com/
http://www.slideshare.net/christopherabautista/taking-gulp/13

19. Client Location
Our Office
Contact us
We are keen to know
about your idea
info@tothenew.com
Email us at
Let’s stay connected