Getting started with gulpjs

Getting started with GULP
Unmesh Dusane
Front End Geek

What is GULP ?
1. In simple word it is “task runner” that automate your daily repetitive task such as
SCSS/SASS compilation , minimizing js/css files ,code analysis, automatically refresh
browser when you changed file etc.
2. It is command line task runner utilizing node.js platform. It runs custom defined
repetition task and manage process automation.

Why ?
- It uses node stream, piping out from one task to as an input to other task, process it
through multiple task and then write the output file. The result it faster build because
there is no need to create and read intermediary files on hard drive.
- used to do repetitive and time consuming task e.g you want minify you project file that
has few css, html, and js . before pointing these into production you may need to minify
css and js file for optimization.so every time you make a change to css and js you again
have to minify them . this is where gulp comes you define all regular task in gulpfile.js
and just run it. gulp minify css, js, and keeps ready for production environment project

Step to install gulp
1. Install node (https://nodejs.org/en/download/) . after installation check node is installed
or not.
2. Go to project directory > create package.json file or just type npm init
3. Installing gulp (npm - it is package manager for Node that enable you to install
additional module for use in your projects from the command line)
npm install -g gulp (here npm in the application we are using to install our package ,
-g is optional flag used to signify that we want to install this package globally so an
project can use it gulp is name of package)
4. Install gulp locally using npm install --save-dev gulp . It is used to instruct npm to add
dependency to our devDependecies list in our package.json file.Dependencies help us
to organize which package are needed in our development and production environment

Step to install gulp(continue)
5. Setting up gulpfile and running gulp - once gulp in installed we have to give it
instruction so it know what task for perform for us
6. Install required plugins - npm install gulp-sass gulp-concat gulp-ugilfy gulp-rename
--save-dev
7. Create our gulpfile.js - now all plugins are available for us to use, we can start writing
out gulpfile and instructing gulp to perform tasks

Gulp task
1. Basically gulp has only 5 method task, watch, run, src and dest
2. All gulp configuration goes in gulpfile.js file in root folder of your project
3. A pattern of writing gulp task is to load plugin you are about to use and then define the
task which is based on that plugin.
4. First we load gulp plugin using Node.js and its require function
e.g var gulp = require('gulp');
5. Now, we can create our first task. A basic form of a task look like
gulp.task('name',function(){ // implementation of the task
});
Here we call gulp object and call its task method, It takes two argument name and
function literal or array of the other task.

Gulp task (continue)
e.g suppose we want to create task that compile sass file to css .
install gulp-sass plugin from root project folder using command
“npm install gulp-sass --save-dev” . then in gulpfile.js include this plugin as
var sass = require('gulp-sass');
gulp.task('sass',function(){
gulp.src('style/scss/main.scss')
.pipe(sass())
.pipe(gulp.dest('style/css'));
});
Here we created sass task which piped main.scss file to sass object and as an argument we
passed an object with potion we want it use
- Most imp method of gulp are src ,dest and pipe . src is used to put name of file we want to work
and use as an input . pipe will take output of the prev command as pipe it as an input to the next.
dest write the output of prev command to the folder we specify

How to run gulp task
- To run any task use following command from root folder
gulp taskname
- To run previous sass task that we created run “gulp sass” command.
- Finally, we have our default task which is used as a grouped reference to our other
tasks. This will be the task that is ran upon entering gulp into the command line without
any additional parameters.
gulp.task('default', ['sass','scripts']);
Here sass , script are task name that we want to run default
- gulp - this will call gulp and run everything we have defined in default ,so it is same as
gulp default

Task (minify and concat)
- Suppose we want to create task that will compile our assets e.g minimizing and
concatenating script together so that the server loads the page faster.
install gulp-uglify,gulp-concat plugin
Gulpfile.js
var uglify = require('gulp-uglify');
concat = require('gulp-concat');
gulp.task('js',function(){
gulp.src('scripts/*.js');
.pipe(uglify())
.pipe(concat('script.js'))
.pipe(gulp.desc('assets'))
});

Task : watching for file change
- Suppose we want to create task that will watch if any change happen on file and do
respected task . We do this using watch method of gulp object.
so ,
gulp.task('dowatch',function(){
gulp.watch('styles/main.scss',['sass']);
});
this task watch styles/main.scss file, if user change the file content then sass task will
get run which will compile scss to css

Getting started with gulpjs

Recommended

More Related Content

What's hot (20)

Similar to Getting started with gulpjs (20)

Recently uploaded (20)

Getting started with gulpjs