24 Oct Introduction to Gulp Js
Nowadays there are many ways to reduce page weight (Page weight is a measurement of the file size of a Web page that includes the combined size of all the elements of the page.) that improves page speed significantly. In this article, we will discuss about gulp tools. Gulp is a task/build runner for development tools that uses Node.js as a platform. It allows you to do a lot of stuff within your development workflow and helps you out with several tasks such as :-
- Minification of files to reduce size. (For example: CSS, JS and Images).
- Concatenation of files into one.
- Compresses files into GZIP files.
- Validate CSS and JS files.
- SASS/LESS pre-processor to CSS.
Let’s now review Gulp installation and Implementation.
Step 1: Install Node.js
Gulp is a task runner that uses Node.js as a platform. At first we need to install node.js into our system. Install node js from https://nodejs.org/en/download/ .
Once Node.js is installed, open command prompt and check whether node js is installed
|
1 2 |
node -v npm -v |
Step 2: Gulp Installation
Gulp should be installed using npm packages in command prompt. We will add –g flag to install gulp globally.
For Windows
|
1 |
npm install gulp -g |
For Mac or Linux
|
1 |
sudo npm install gulp -g |
Step 3: Setting up project (Use sudo for Mac/Linux commands).
Initialize npm into your project directory.
|
1 |
npm init |
Install gulp in your project devDependencies
|
1 |
npm install --save-dev gulp |
Create gulpfile.js in your project directory
|
1 2 3 4 5 6 7 |
var gulp = require('gulp'); gulp.task('default', function() { // place code for your default task here }); |
Run gulp
|
1 |
gulp |
The default task will run automatically. If we want to custom task or run individual task then
|
1 |
gulp <othertask> |
Step 4: Gulp plugins Installation
Gulp uses plugins to perform various tasks. Each gulp plugin is designed to perform particular task. Find more about gulp on http://gulpjs.com/plugins/. At first we will create sample task to check quality of javascript code using jslint.
Install jslint gulp plugin in your project directory command prompt
|
1 |
npm install gulp-jshint --save-dev |
Open gulpfile.js and create task to validate javascript file using gulp (https://www.npmjs.com/package/gulp-jslint/).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var gulp = require('gulp'); var jslint = require('gulp-jslint'); gulp.task(‘jslint’, function () { return gulp.src(['source.js']) .pipe(jslint({ /* this object represents the JSLint directives being passed down */ })) .pipe(jslint.reporter( 'my-reporter' )); }); |
To run jslint gulp task in command prompt
|
1 |
Gulp jslint |
Step 5: Install multiple plugins to create one task
We will do create one operation with combine and minify CSS files into one single file using gulp. Install all gulp plugins metioned below:
|
1 |
npm install --save-dev gulp-autoprefixer gulp-concat gulp-uglifycss |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var gulp = require('gulp'); var concat = require('gulp-concat'); var uglifycss = require('gulp-uglifycss'); var autoprefixer = require('gulp-autoprefixer'); gulp.task('css-ops', function() { return gulp.src('src/**/*.css') .pipe(autoprefixer()) .pipe(concat({ path: 'image-prop-css.css', stat: { mode: 0666 }})) .pipe(uglifycss({ "uglyComments": true})) .pipe(gulp.dest('build/css/')) }); |
Step 6: Combining Multiple Tasks
Let’s assume that there are few gulp tasks such as:
- cssTask – Combine and Minify CSS.
- jsTask – Combine and Minify JS Files.
- imgMinify – Minify all images.
- jsLint – Validate all js code.
In gulp, we can combine all individual tasks into single task.
|
1 2 3 4 5 |
gulp.task('default', [cssTask, jsTask,imgMinify, jsLint], function() { //Place Javascript Code }); |
By above process, we can create gulp tasks to reduce frontend load and increase page speed significantly.
Ending Notes
Gulp is a task runner that uses Node.js as a platform. It purely uses the JavaScript code and helps to run front-end tasks and large-scale web applications. Gulp builds system automated tasks like CSS and HTML minification, concatenating library files, and compiling the SASS files. These tasks can be run using Shell or Bash scripts on the command line.
No Comments