Yes. Gulp is based on node.js.
Though gulp is not much old but it is becoming very popular. It’s faster than grunt and efficient as well. It prefers code over configuration approach, and uses power of node streams to gives you fast build. Many tech giants are already favoring Gulp like microsoft. Though they do support Grunt, but Gulp is their first choice.
Gulp and gulp plugins are installed and managed via npm, the Node.js package manager. To install gulp, first ensure the npm is installed properly. And then run following command to install gulp globally on your system.
1 npm install --global gulp ?
And also install gulp in your project devDependencies:
1 npm install --save-dev gulp ?
--save-dev option writes devDependencies to “package.json”. Please make sure when you run this command, your package.json is created. If not create, then use npm init command to create this file.
Once installed, you need to add 2 files to setup gulp.
1. package.json: This file is used by npm to store metadata for projects published as npm modules. So basically, there will be list of all gulp plugins, along with gulp which your project is using.
2. Gulpfile.js: This is where magic happens. This is the place where we define what automation needs to be done and when you want that to happen.
A plugin is nothing but a reusable piece of code. Somebody has already made it and distributed to the world to use it, so that you don’t have to code again. It saves your time. Gulp plugins are distributed through Node’s NPM directory. Normally, they are prefixed with gulp- Example: gulp-jshint. You can get list of all gulp plugins here.
To install gulp plugin, run following command.
1 npm install --save-dev gulp-jshint ?
You can also install multiple plugins together.
1 npm install --save-dev gulp-jshint gulp-concat gulp-uglify ?
By default, it always installs the latest version available. But if you wish to install specific version then same you can include in the command.
1 npm install <module>@version --save-dev ?
Run following command to uninstall gulp globally.
1 npm uninstall -g gulp ?
And if you wish to remove from your project,
1 npm uninstall --save-dev gulp ?
Here, we are configuring the grunt plugins via JSON. You can see the complete sample file here.
And below is a sample gulp file,
As you can see, there is all code no configuration. The file looks much clean and manageable. This is an advantage of gulp over grunt.
Stream is an object that allows you to read the data from source and then send (pipe) it to destination. The power is stream is that everything is done in memory.
As mentioned earlier, that Gulp is a streaming build system, uses node’s streams. So it reads the files and keeps them in memory, perform all the operation in memory, and finally write the file to disk. Here take a look at sample gulp file.
Here a single task named “script” does magic for 3 gulp plugins jshint, uglify and concat. It first reads all the js files and pipe it to jshint (which checks for errors) and which passes it on to uglify and uglify will do the its job and pass the updated source to contact which contacts the files in “app.js” file and finally writes to the disk.
So here are advantages of using streams in gulp,
There are less number of file I/O operations, in fact only 2. Just think how grunt will do the same job. Grunt will take the file -> runs the task -> write the file. And repeat the same process for the task. So there are more file I/O operations. Though this feature will be coming soon in grunt as well. But for now, gulp is the winner.
It makes gulp faster, since grunt doesn’t use streams.
In gulp, you can chain multiple tasks but that’s not possible with grunt.
There are 4 functions which completes a gulpfile.
gulp.task registers the function with a name.In other words, it defines your tasks. Its arguments are name, deps and fn.
name: is of string type and it is name of the task. Tasks that you want to run from the command line should not have spaces in them.,
deps: An array of tasks to be executed and completed before your task will run. This is optional.
fn: is the function that performs the task’s main operations. This is also optional.
As mentioned, both deps and fn are optional but you must supply either deps or fn with the name argument. So, it has 3 forms.
1 gulp.task('mytask', ['array', 'of', 'task', 'names']); ?
The tasks will run in parallel (all at once), so don’t assume that the tasks will start/finish in order.
An array of tasks to be executed and completed before your task will run.
As the name suggest src, points to your source files (files you wish to use). It returns a readable stream and then piped to other streams using .pipe
1 gulp.src(globs[, options]) ?
It takes glob as parameter along with an optional [option] parameter.
It points to the folder where file needs to written. This returns a writable stream and file objects piped to this are saved to the file system. Folders that don’t exist will be created.
1 gulp.dest(path[, options]) ?
It has 2 arguments path and an optional Option.The path (output folder) to write files to. Or a function that returns it.
In short src and dest is like copy and paste function.
As we write code and modify your files, the gulp.watch() method will watch for changes and automatically run our tasks again so we don’t have to run the gulp command each time.
1 gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb]) ?
Here we have defined a task named “watch”, in which we are watching for js files changes and css files changes using gulp.watch. And whenever, there is any change in .js file, then run [scripts] task (which should be already defined in your gulpfile.js) and in case of .scss file changes, run [sass] task.
Default task is nothing but a way to execute all defined task together. Basically it’s a wrapper to other tasks.
1 gulp.task('default', ['lint', 'sass', 'scripts', 'watch']); ?
When default task gets executed, it executes all the 4 tasks.
While running gulp task from command line, you don’t have write task name if you wish to execute default task.
You can execute the gulp task from command line. To execute jshint task
1 gulp jshint ?
And to execute default task,
require() is used to load core gulp and gulp plugins. You need to load all the gulp plugins in your gulpfile.js using require(), if you wish to use them.
Yes, there is. Rather than specifying require for each plugin, gulp-load-plugins will search your packages.json file and automatically include them as plugins.pluginName().
Though there are many plugins which you can use, but below are the most used.
Now, where they differ:
That’s all folk. If you have something to add in this list, please mention in comments section. Meanwhile, share this in your network and spread this to help others.
Below is a sample gulpfile.js for your reference.
Gulp Related Tutorials
|Shell Scripting Tutorial||CSS3 Tutorial|
|HTML 5 Tutorial||Node.js Tutorial|
|CSS Tutorial||CSS Advanced Tutorial|
|Grunt Tutorial||Batch Script Tutorial|
Gulp Related Interview Questions
|Shell Scripting Interview Questions||CSS3 Interview Questions|
|HTML 5 Interview Questions||HTML DOM Interview Questions|
|Node.js Interview Questions||CSS Interview Questions|
|CSS Advanced Interview Questions||SASS (Syntactically Awesome Style sheets) Interview Questions|
|Spring Batch Interview Questions||Bootstrap3 Interview Questions|
All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.