What Is Gulpjs?
You define a “task” in a file called “gulpfile.js” and task can be anything which you need to do repetitive.
Gulpjs
is an open-source, build JavaScript task runner and very popularity toolkit for
Automate and enhance complex tasks like magnification, checking js errors, unit
testing, compile SASS, optimize images, bundling of various js and css files.
Gulpjs
is very simple, automation, platform-agnostic, and strong ecosystem.
It’s used to solve the problems of code
repetitions. It is easy to use, has a simple API, and is efficient.
There are only 4 APIs in gulp!
1. The
gulp.task() - it used to define a
task
2. The
gulp.src() - it used to read files
in
3. The
gulp.dest ()- it used to write files
out
4. The
gulp.watch() - it used to watch
files for changes
You define a “task” in a file called “gulpfile.js” and task can be anything which you need to do repetitive.
The sample code for task, Gulpfile and Gruntfile –
The task
looks like -
gulp.task('yourTask', function() {
//do stuff
});
And gulpfile.js
–
var
gulp = require('gulp');
var
gutil = require('gulp-util');
gulp.task('default',
function(){
// Default task code
});
And Gruntfile.js
looks like –
module.exports
= function(grunt)
{
//load all grunt tasks
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.initConfig({
uglify: {
dist: {
src:
['assets/js/vendor/jquery.js',
'assets/js/vendor/**/*.js'],
dest:
"assets/js/vendor.min.js"
}
},
sass: {
options: {
style:
"expanded",
lineNumbers:
true
},
dist: {
files:
{ 'assets/styles/application.css':
'assets/styles/application.scss'
}
}
},
watch: {
scripts: {
files:
['assets/js/**/*.js',
'!assets/js/vendor.min.js'],
tasks:
['uglify'],
options:
{
spawn:
false,
},
},
css: {
files:
['assets/styles/**/*.scss'],
tasks:
['sass'],
options:
{
spawn:
false,
}
}
}
});
grunt.registerTask('default',
['uglify', 'sass']);
};
Gulpjs is a JavaScript task runner that lets you
automate tasks such as -
1. Bundling
and minifying libraries and style sheets
2. Refreshing
your browser when you save a file
3. Quickly
running unit tests
4. Running
code analysis
5. Less/Sass
to CSS compilation
6. Copying
modified files to an output directory
Is Gulpjs based on Node.js?
Yes!, Gulp is based on Node.js.
Why to use gulp?
1. Gulp
is open-source
2. It
is very faster
3. Gulp
plugins were designed to do a single job.
4. GULP
minify CSS, JS
5. Compressing
new and modified images
6. Fast
build
7. Gulp
used JavaScript configuration code that was less verbose, easier to read,
simpler to modify, and provided better flexibility.
How do you install gulp?
Install gulp globally -
npm install --global gulp-cli
Install gulp in your project devDependencies -
npm install --save-dev gulp
Create a gulpfile.js at the root of your project
- It looks like
gulp.task('default', function() {
// place code for your default task
here
});
Run gulp -
Gulp
How
do you uninstall gulp?
Run following command to uninstall gulp globally
-
npm uninstall -g gulp
Run following command to remove from your project
-
npm uninstall --save-dev gulp
Which are different functions of a gulpfile?
The list gulpfile functions -
1. Gulp.task
2. Gulp.watch
3. Gulp.src
4. Gulp.dest
What is gulp.task function and how to use it?
The gulp.task is a function and used to define
your tasks.
Example -
gulp.task('yourTask', function() {
//do stuff
});
What is gulp.src function and how to use it?
The gulp.src
is a function and used to points to your source files.
Example -
gulp.src(globs[, options])
What is gulp.dest function and how to use it?
The gulp.dest
is a function and used to takes glob as parameter along with an optional
[option] parameter.
Example -
gulp.dest(path[, options])
What is gulp.watch function and how to use it?
The gulp.dest is a function and used to watch
changes automatically when you write code or modify your files.
Example -
gulp.task('watch', function () {
// Watch .js files
gulp.watch('src/js/*.js', ['scripts']);
// Watch .scss files
gulp.watch('src/scss/*.scss', ['sass']);
});