GULP !!!
Gulp is a Java Script based task runner build tool, which can automate the common task while building an application. There are many tools available in the market which do the same work such as Grunt, Broccoli etc. Gulp is preferred a bit because of its faster performance using the stream line.
Gulp is a Java Script based task runner build tool, which can automate the common task while building an application. There are many tools available in the market which do the same work such as Grunt, Broccoli etc. Gulp is preferred a bit because of its faster performance using the stream line.
In this article we will learn how to use gulp in your project. Gulp uses plugins to automate the task and these plugins can be installed and managed by using Node Package Manager (npm). We need to have npm installed before using gulp.
If you don’t have Node installed, then get it from here.
Once you have installed Node, to install gulp use the following command in your CLI.
> npm install gulp -g
The above command installs gulp in the machine and the flag -g in the command instructs the npm to install the gulp globally in the machine, so that we can use Gulp from anywhere in the system .
> npm install gulp --save-dev
Executing the above command creates the gulp folder in node_module folder of the project. Gulp is flexible enough to work with any folder structure. We can create a gulp task in a file called gulpfile.js, which stores all the gulp configuration.
First step of using gulp is to require it in our gulpfile.js
- var gulp = require('gulp');
Syntax for creating a task :
- gulp.task('task-name', function() {
- // your code here.
- });
Code :
- gulp.task('hello', function() {
- console.log('Welcome to Gulp');
- });
To run the above task use the following command .
> gulp hello
Gulp tasks can be complicated, it may contain two more additional methods with variety of plugins.
Sample code :
- gulp.task('task-name', function () {
- return gulp.src('source-files') // Get source files with gulp.src method
- .pipe(pluginMethod()) // Sends it through a gulp plugin
- .pipe(gulp.dest('destination')) // Outputs the file in the destination folder
- });
Let's start adding a plugin and see how to use that plugin in our project. Gulp has a big base for plugins which can be used to automate a whole lot. But in this article we will use three different plugins and achieve a common automation task. Following is an overview of our task.
-
Concatenate all the CSS files.
-
Minifying all the JS files.
-
3. Watches the specified files and update accordingly.
Generally, using a plugin makes development process easier. The above plugins are mostly used in every development process. In web application development, while delivering the application, it's not recommended to deliver all the css files . We can merge all the css files into a single file using concatenate plugin.
Usually, we use bundles of javascript files in project. Comment and indentation in code occupies more space which is not a part in the process of compilation and product delivery. So to remove indentation and comments minification is required.
Watch is the most useful package in gulp. In every web application development, the developers use gulp’s watch feature. Watch package watches specific file(s) and performs specific task(s), when the file is modified. We can add 'n' number of watchers in our gulpfile.js.
Concatenate:
In this task we will concatenate all the CSS files in the project. To begin with, we need to install gulp-concat package by using following command.
> npm install --save-dev gulp-concat
After installation use the following code snippet to concatenate the all the css present in the project.
Code:
- var gulp = require(“Gulp”);
- Var cssConcat = require(‘gulp-concat’);
- gulp.task('concat', function () {
- return gulp.src(‘public/**/*.css’)
- .pipe(cssConcat(‘public/css/out/main.min.css’))
- .pipe(gulp.dest(‘public/css/out/’));
- });
To run the above task use the following command.
> gulp concat
Note: if you want to run your task as default, then mention the task name as ‘default’.
Minify:
Most of our development projects require minifying the JavaScript files before deployment, so in this task let us automate the minifying process. Let’s install gulp-uglify package.
>npm install gulp-uglify --dev-save
In the gulpfile.js declare the task as the following .
- var gulp = require('gulp');
- var guglify = require('gulp-uglify');
- gulp.task('scripts',function(){
- gulp.src(‘public/js/lib/*.js’)
- .pipe(concat('main.min.js'))
- .pipe(guglify())
- .pipe(gulp.dest(‘public/js/min’))
- });
Execute the task using gulp command.
>gulp script
Watch:
We have already learned to concatenate the css files and minifying the js files, Let's watch our Java Script (.js) and CSS (.css) files using watch method.
- var gulp = require('gulp');
- //add your 'script' and 'concat' taks code here.
- gulp.task('watch', function(){
- gulp.watch(‘public/js/lib/*.js’, ['scripts']);
- gulp.watch(‘/public/**/*.css’,['concat']);
- });
Run the watch task using following command.
>gulp watch
Conclusion :
In this article we have learned how to install and use gulp. We have implemented 3 plugins in our project and learned the work flow of gulp. There are lot more gulp plugins available for different purposes. To know more about gulp use different plugins and implement the package in your project to automate your task.
- Summation IT
- Wednesday 24 January 2018 |
- Software Development |
Categories
Recent Posts
Common Vulnerabilities in Web Applications:
Security in a website is the most important factor needs to be taken care of if considered. Are your website and user data safe and secure?Android Marshmallow runtime permissions
Security in a website is the most important factor needs to be taken care of if considered. Are your website and user data safe and secure?SignalR – Why, What and How?
An increasing number of software out there namely websites and web applications today offer or need to offer real-time dataIndexing in SQL Server
An increasing number of software out there namely websites and web applications today offer or need to offer real-time data
