Gulp, like Grunt, is a build tool that automates common front-end tasks such as compiling Sass, Less, compressing JS and refreshing browsers to improve the way the front end works and increase productivity.

Use need

Gulp is built on Node.js, so before using Gulp, install Node.js(search for the Node.js installation yourself). Installing Node.js is very simple. Download the installation package, run it, and proceed to the next step. After the installation is complete, open the CMD console (Window) and enter node-v to check the version number.Copy the code

Initialize the project

After initialization, there will be a package.json file that describes the project, the name of the project, the author of the project, and some plug-ins that depend on the development. You can also use gulp without initialization. Package. json Description Name // Project name version // Project version number description // Project description homepolin-3 // Project official WEBSITE URL author // Authors // Other contributors to the project DevDependencies // repository of project code Git/SVN main // it is a module ID. It is a keyword that points to the main project of your programCopy the code

Install Gulp

Gulp -g is a global installation

npm install -g gulp

After a global installation, to be used in a project, you need to be in the project folder. Installing gulp –save-dev locally will record the plugin’s record in package.json.

NPM install gulp-save-dev // Used in the project folder

Using Gulp

Create a gulpfile.js file in the project folder,

Then start writing the gulp plug-in in gulpfile.js,

Gulp plugins – – – – v

Gulp-minify – CSS – CSS compression

Install gulp-minify-CSS after the above process is complete

npm install –save-dev gulp-minify-css

Then start writing the gulpfile.js file

var gulp = requrie('gulp'); Gulp var minify=require('gulp-minify-css'); // Create a compression task gulp.task('minifycss'.functionGulp.src (){// specify all files with a.css suffix under the current file.'*.css'Pipe (minify()) // Finally output the compressed file to the minicss file. Pipe (gulp.dest())'minicss'))})Copy the code

Gulp -uglify – js compression

The above is an example of installing compressed JS plug-ins

npm install –save-dev gulp-uglify

var gulp =require('gulp'); Gulp var uglify = require('gulp-uglify'); // Create a js compression task gulp.task('minifyjs'.function(){// Specify all JS files in the current folder gulp.src('*.js') // Rename can be set to names like (mini-min.js).pipe(rename({suffix:'.min'})) // compress. Pipe (uglify()) // Output compressed file to minijs folder. Pipe (gulp.dest())'minijs'))})Copy the code

Gulp-minify – HTML – HTML compression

The above is an example of the installation of compressed HTML plug-in

npm install –save-dev gulp-minify-html

var gulp =require('gulp'); Gulp var minhtml =require('gulp-minify-html'); // Create a task to compress HTML. Gulp.task ('minhtml'.functionGulp.src (){// Specify all HTML files in the current folder.'*.html'Pipe (minhtml()) // Output the compressed file to the miniHTML folder. Pipe (gulp.dest())'minihtml'))})Copy the code

Gulp-jshint — Check js

The above is an example of installing a plug-in that detects JS

npm install –save-dev jshint gulp-jshint

var gulp =require('gulp'); Gulp var concat = require('gulp-jshint'); // Create a task to check the js file gulp.task('concat'.functionGulp.src (){// specify the file to check.'*.js').pipe(jshint()) // Output check result.pipe (jshint.reporter()); })Copy the code

Gulp -concat — File merge

The above is an example of installing a plug-in that merges files

npm install –save-dev gulp-concat

var gulp =require('gulp'); Gulp var concat = require('gulp-concat'); // Create a merge task gulp.task('concat'.functionGulp.src (){// specify the file to merge.'*.js') // Merge the found js files and name them as'merge.js'
    .pipe(concat('merge.js'// Output the merged file to the concat folder. Pipe (gulp.dest('concat'));
})Copy the code

Gulp-less — Compiles less

The following uses the Less plug-in as an example

npm install –save-dev gulp-less

var gulp =require('gulp'); Var lecss = require('gulp-less'); // Create a compilation task gulp.task('compile-less'.functionGulp.src (){// specify the file to compile'*.less'Pipe (lecss()) // Output the compiled file to the CSS folder. Pipe (gulp.dest())'css'));
})Copy the code

Gulp-sass — Compiles sass

This is an example of how to install and compile Sass plug-ins

npm install –save-dev gulp-sass

var gulp =require('gulp'); Gulp var sacss = require('gulp-sass'); // Create a compilation task gulp.task('compile-sass'.functionGulp.src (){// specify the file to compile'*.sass'Pipe (sacss()) // Output the compiled file to the CSS folder. Pipe (gulp.dest())'css'));
})Copy the code

Gulp -imagemin – Compressed image

The above is an example of installing a compressed image plug-in

npm install –save-dev gulp-imagemin

var gulp =require('gulp'); Gulp imagemin = require('gulp-imagemin'); // Create a compressed task gulp.task('pngquant'.function(){
    gulp.src('src/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            progressive:true,//Boolean type default:falseLossless image optimizationLevel: 5, / / the default number type: 3 scope: 0-7 (optimization level) interlced:true,//Boolean type defaultfalseInterlaced scan GIF for rendering multipass:true//Boolean type defaultfalseOptimize SVG several times until it is fully optimized // Start compressing PNG images}).pipe(gulp.dest('img'))})Copy the code

Gulp -livereload — Automatically refreshes

The preceding example describes how to install the automatic refresh plug-in

npm install –save-dev gulp-livereload

This helps us automatically refresh the page when code changes.

Var gulp = require()'gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload');

gulp.task('less'.function() {
    gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('src/css'))
        .pipe(livereload());
});

gulp.task('watch'.function() { livereload.listen(); // Call the listen() method gulp.watch('less/*.less'['less']); // Listen for the files in the directory. If the files change, invoke the less task. });Copy the code

Chrome or Firefox requires the Livereload plugin