Gulp is a tool for automating front-end development. It will help you automate routine tasks and speed up your work.
The main tasks that Gulp will help you to solve:
Useful links:
Gulp official site - gulpjs.com
Gulp at Github https://github.com/gulpjs/gulp
Gulp plugins catalog http://gulpjs.com/plugins/
Gulp documentation https://github.com/gulpjs/gulp/blob/master/docs/README.md#articles
So, we give you a brief instruction on how to get started with the templates assembler - GULP.
Step1. Node.js installation
In order to install Node, visit nodejs.org site, click the green "Install" button. When the download is complete, start the application and install Node.
Step 2. NPM installation
At the command line, please go to the main folder of your project: cd/WOOX
Note: the path to the project can be individual, as it depending on the location on the PC.
If you created the project from scratch, you would have to run the command: npm init
It creates a package.json file that contains information about the project (project description and dependencies). But, since WOOX already contains this file, this step should be skipped.
Step 3.Gulp.js installation
Installation of Gulp is done with the command: npm install -g gulp
Here are some details:
-npm- is the application by which we install the package (plugin).
-install- we «tell» the command line to install the package.
-g- is a kind of flag indicating that we want to install the package globally.
-gulp- is the name of the package we want to install.
After we installed Gulp.js, let's make sure that everything is correct and enter the old command by analogy with Node and npm: gulp -v
The next command is to install Gulp locally in the project folder: npm install --save-dev gulp
The only difference is that we specify in our "flag" that we record dependencies in our package.json.
Step 4.Gulp.js setup and launch
To make Gulp work, you need to explain to him what it should do. There are several methods: task, start, and path to files. All tasks, their settings and configurations are recorded in ../WOOX/gulpfile.js. file.
Let's analyze our file for more details.
var gulp = require('gulp'),
plumber = require('gulp-plumber'), // generates an error message
prefixer = require('gulp-autoprefixer'), // automatically prefixes to css properties
svgmin = require('gulp-svgmin'), // for minimizing svg-files
sass = require('gulp-sass'), // for compiling scss-files to css
browserSync = require('browser-sync'), // for online synchronization with the browser
imagemin = require('gulp-imagemin'), // for minimizing images-files
cache = require('gulp-cache'), // connecting the cache library
htmlhint = require("gulp-htmlhint"), // for HTML-validation
runSequence = require('run-sequence'); // for sequential execution of Gulp-tasks
With the help of these commands, we enable Gulp and plugins that perform our tasks.
It's important to note, that each plugin needs to be installed by analogy with Gulp installation before you can use it. Once they are installed, you can begin to set them up in the gulpfile.jsfile.
We won't review all the Gulp plugins and their possibilities since there are great many of them. But we will review the plugins used in WOOX in detail:
1) plumber = require('gulp-plumber'), // generates an error message
Installation: install--save-dev gulp-plumber
Description: This plugin makes development easier so, that when there occurs an error, it outputs information about it in the console and doesn't interrupt implementation of tasks flow.
Documentation:https://www.npmjs.com/package/gulp-plumber
2) prefixer = require('gulp-autoprefixer'), // automatically prefixes to css properties
Installation: npm install—save-dev gulp-autoprefixer
Description: The plugin automatically complements CSS styles with vendor prefixes (-webkit, -ms, -o, -moz etc). These prefixes ensure support of CSS3 properties by browsers.
This plugin is used in our 'sass' task:
/*=========== Compile SCSS ==============*/
gulp.task('sass', function() {
gulp.src('src/sass/*.scss')
.pipe(plumber())
.pipe(sass())
.pipe(prefixer())
.pipe(gulp.dest('./src/css'))
.pipe(gulp.dest('./src/css'))
.pipe(browserSync.reload({
stream: true
}))
});
Documentation - https://www.npmjs.com/package/gulp-autoprefixer
3) svgmin = require('gulp-svgmin'), // for minimizing svg-files
Installation: npm install --save-dev gulp-svgmin
Description: The plugin minimizes SVG files with help of Gulp. It is used in our 'svg-min' task:
gulp.task('svg-min', function () {
gulp.src('src/svg-icons/*.svg')
.pipe(svgmin({
plugins: [{
removeDoctype: true
}, {
removeComments: true
}, {
cleanupNumericValues: {
floatPrecision: 2
}
}, {
convertColors: {
names2hex: true,
rgb2hex: true
}
}]
}))
.pipe(gulp.dest('src/svg-icons'));
});
Documentation - https://www.npmjs.com/package/gulp-svgmin
4) sass=require('gulp-sass'), // for compiling scss-files to css
Installation: npm install --save-dev gulp-sass
Description: The plugin serves for compilation SCSS files into CSS. It is used in 'sass' task:
...
.pipe(sass())
…
The result is recorded in: .pipe(gulp.dest('./src/css'))
Documentation - https://www.npmjs.com/package/gulp-sass
5) browserSync = require('browser-sync'), // for online synchronization with the browser
Installation: npm install --save-dev browser-sync
Description: BrowserSync is one of the most useful plugins, that a developer would like to have. It actually gives you a possibility to start a server, where you can run your applications.
...
.pipe(browserSync.reload({
stream: true
}))
…
And now imagine for a second that you have Gulp running, which automatically compiles, for example, scss, and in the same task uses browserSync. That is, after compiling scss, the browser automatically reboots the page and pulls up all compiled changes to css accordingly. Convenient, isn't it?
Documentation: https://www.npmjs.com/package/browser-sync
6) imagemin = require('gulp-imagemin'), // for minimizing images-files
Installation: npm install --save-dev gulp-imagemin
Description: This plugin is intended for working with graphics, it optimizes images and records the result in the specified path. It is used in 'images' task:
/*=========== Minimization IMAGE ==============*/
gulp.task('images', function(){
gulp.src('src/img/*')
.pipe(cache(imagemin({
interlaced: true
})))
.pipe(gulp.dest('src/img'));
});
Documentation - https://www.npmjs.com/package/gulp-imagemin
7) cache = require('gulp-cache'), // connecting the cache library
Installation: npm install --save-dev gulp-cache
Description: The plugins using for data caching. In particular, it is used in the task 'images'.
A large number of pictures are processed much longer, so it would be quite good to add a cache in order to make images to cache much faster - this way we save our time.
Documentation - https://www.npmjs.com/package/gulp-cache
8) htmlhint = require("gulp-htmlhint"), // for HTML-validation
Installation: npm install --save-dev gulp-htmlhint
Description: This is a simple HTML validator that we used in the 'html-valid' task:
/*============= HTML-validator ==============*/
gulp.task('html-valid', function() {
gulp.src("app/*.html")
.pipe(htmlhint());
});
9) runSequence = require('run-sequence'); // for sequential execution of Gulp-tasks
Installation: npm install --save-dev run-sequence
Description: By default, when you run Gulp, the tasks in it are executed asynchronously, which can sometimes lead to very undesirable and not logical actions ... For example, starting a command to build a project "gulp build", Gulp may start to clear the folder app + to compile the same css, to concatenate js, etc., which will lead to unpredictable results. To avoid such situations we use the run-sequence plugin, which helps to establish dependencies on the tasks performance.
/*============= Join tasks ==============*/
gulp.task('default', function(callback) {
runSequence([ 'sass', 'browserSync', 'watch', 'images'],
callback
)
});
gulp.task('build', function(done) {
runSequence('sass', 'html-valid', 'svg-min', 'images', 'compress', done);
});
Documentation - https://www.npmjs.com/package/run-sequence
And now a few words about the launch of tasks and combining them. To run any task, you need to write on the command line:
gulp 'task name' and run it.
We also have 2 sets of join tasks:
/*============= Join tasks ==============*/
gulp.task('default', function(callback) {
runSequence([ 'sass', 'browserSync', 'watch', 'images'],
callback
)
});
gulp.task('build', function(done) {
runSequence('sass', 'html-valid', 'svg-min', 'images', 'compress', done);
});
'default' - is used in the main development including [ 'sass', 'browserSync', 'watch']
'build' - is a full assembly of the project, that includes tasks ('sass', 'html-valid', 'svg-min', 'compress', 'images')
Official Gulp documentation: