Gulp - The Streaming Build System
19
Gulp- The Streaming Build System Sunniya Maini
-
Upload
to-the-new-technology -
Category
Technology
-
view
242 -
download
1
Transcript of Gulp - The Streaming Build System
Gulp- The Streaming Build System
Sunniya Maini
Gulp- The Streaming Build System
Sunniya Maini
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.
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
Aditya Kohli
Sticky Note
http://www.tothenew.com/front-end-development
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..
www.tothenew.com
Build System for GULP
Input Read Files Modify Files
Modify Files
Modify FilesWrite FilesOutput
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.
www.tothenew.com
Getting Started
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.
Aditya Kohli
Sticky Note
http://www.tothenew.com/mean-node-js-development-consulting
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:
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.
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
www.tothenew.com
General directory structure for gulp project
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
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
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:
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.
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
Client Location
Our Office
Contact us
We are keen to know
about your idea
Email us at
Let’s stay connected
