Bishwanath JhaToday i came across with some amazing and powerful features of Gulp.js(Open source). Its a task runner and a powerful feature of nodejs. Gulp uses node.js streams. Its easy to use and have some useful api.
What is Gulp?
Its is a fast and intuitive streaming build tool built on Node.js. Gulp is a Task / Build runner. It uses node.js streams. Its easy to use and have some useful api, and is efficient. Gulp.js makes use of pipes for streaming data that needs to be processed.
How is it useful
Automating common/tedious task while building product(specially fronted) so that you can focus on more important task. There are loads of plugins available here which does various task and help us achieve almost everything. Few common task that i preferably use:
- Compiling preprocessed like Scss or Sass files @ gulp-sass
- Minifying JavaScript @ gulp-minify
- Minifying CSS @ gulp-minify-css
- Compiling Coffescript @ gulp-coffee
- File watcher for immediate change reflection @ gulp-watch
- Concatenating files @ gulp-concat
- Delete files/folders using globs @ del
- Prefix CSS @ gulp-autoprefixer
and many more…
Lets go to playground to have some fun.
Prerequisites:
Since it part of node module so we need to install nodejs first. I run on Ubuntu 14.04 OS.
Open the terminal and first install the node.
sudo apt-get update sudo apt-get install nodejs
Now you need to install the npm which is Node.js package manager, from which one can install modules and packages to use with Node.js.
sudo apt-get install npm
So node is installed by now, you can check it by issuing nodejs -v and npm -v
Installing Gulp:
sudo npm install -g gulp
Then go to your project directory or create a new one, For me my project root directory is `/home/bishwanath/sites/gulp-demo` and run the following command, which will install it locally to the project also make sure you have already created a package.json files at root level. so that all downloaded plugins will be automatically added underย devDependencies because we use --save-dev flag
npm install --save-dev gulp
Start playing with gulp:
Lets create a file gulpfile.js in your project root directory. where we will create tasks and will run then usingย gulp command
Here is my initial gulpfile.js look like, just for testing purpose, added a default task which log to console ๐
var gulp = require('gulp');
gulp.task('default', function() {
ย ย console.log("I have configured a gulpfile"); // This will print on console as output
});
Now run this file using below command, make sure you are into your project dir.
# Lets go to the project directory bishwanath@bishwanath-jha:~$ cd /home/bishwanath/sites/gulp-demo/ # Files in my project root bishwanath@bishwanath-jha:~/sites/gulp-demo$ ls -all total 32 drwxrwxr-x 3 bishwanath bishwanathย 4096 Feb 19 01:24 . drwxrwxrwx 9 bishwanath bishwanathย 4096 Feb 18 23:44 .. -rw-rw-r-- 1 bishwanath bishwanathย ย 126 Feb 18 23:48 gulpfile.js drwxrwxr-x 4 bishwanath bishwanathย 4096 Feb 19 01:17 node_modules -rw-rw-r-- 1 bishwanath bishwanathย ย 131 Feb 19 01:17 package.json # Lets execute/run gulpfile bishwanath@bishwanath-jha:~/sites/gulp-demo$ gulp # Here is the output [01:31:23] Using gulpfile ~/sites/gulp-demo/gulpfile.js [01:31:23] Starting 'default'... I have configured a gulpfile [01:31:23] Finished 'default' after 90 ฮผs
In case you get below error, please run the fix as i got this on Ubuntu 14.04 and found the fix here
$ gulp /usr/bin/env: node: No such file or directory // Fix:run below command ln -s /usr/bin/nodejs /usr/bin/node
How Gulp Works:
Gulp allows you to input your source file(s), pipe them through a bunch of plugins and get an output at the end, Letโs take a look at an example of what a basic JSย uglifying and concating all js files into single js file called app.js with the help of gulp task.
Lets first install gulp plugin called gulp-uglify and gulp-concat
sudo npm install --save-dev gulp-uglify sudo npm install --save-dev gulp-concat
Then modify the gulpfile as look like as below now
// Load gulp
var gulp = require('gulp');
// Load gulp plugins
var uglifyย = require('gulp-uglify');
var concatย = require('gulp-concat');
// Defining a task as JS uglify
gulp.task('uglification', function() {
return gulp.src('./src/js/*.js') // It loads all .js files under /src/js
.pipe(concat('app.js')) // it further concat all files(currently we have three files check git repo below) contents into app.js
.pipe(uglify()) // it further Minify my JavaScript files/removing-spaces or compressing
.pipe(gulp.dest('./build')) // finally place that app.js file into /build directory
});
// Setting default task to run
gulp.task('default', ['uglification']);
Code Description:
The src() method let’s me specify where to find the JavaScript files.
The pipe() method takes the source stream derived from the src() method and passes it to the specific plugin concat(), so concat would receive the source stream and append all files into app.js
The pipe() method takes the source stream derived from the concat() method and passes it to the specific plugin uglify(), so it would receive the file app.js as stream and minify/compress app.js code.
Finally, using Gulp’s dest() method, all.js is written/created to my target folder. The process if very clear and very readable.
Output:
Now run gulpfile again, it will result into a single app.js(combining all js file mentioned in path into one) file under ./build directory. which will contain concatenated and compressed file of all js files under /src/js/.
bishwanath@bishwanath-jha:~/sites/gulp-demo$ gulp [02:08:01] Using gulpfile ~/sites/gulp-demo/gulpfile.js [02:08:01] Starting 'uglification'... [02:08:01] Finished 'uglification' after 92 ms [02:08:01] Starting 'default'... [02:08:01] Finished 'default' after 7.48 ฮผs
This is just one use case, we have may other examples use case. will be covering them into other posts, git repository.
Find the source code here on github : https://github.com/bishwanathjha/gulp-demo
