1. Introduction

Gulp.js is an automated build tool that developers can use to automate common tasks during project development. Gulp is built on top of Node.js. With the power of Node.js streams, you can quickly build projects and reduce frequent I/O operations. The gulp.js source file and the Gulp file you use to define the task are both implemented using JavaScript source code.

Gulp focuses on managing the entire process of front-end development (such as pipeline). We can configure Gulp with different tasks (via the gulp.task() method in Gulp). Such as starting server, sass/less precompilation, file merging and compression, etc.) to enable gulp to implement different functions to build the entire front-end development process.

2. The introduction of

First, gulp is dependent on the Node environment. The environmental installation of Node will not be covered here.

2.1 Global Installation

Install gulp globally:

npm install -g gulp
Copy the code

2.2 Installation as a project development dependency

First, initialize package.json

npm init -y
Copy the code

Install GULp in your project

NPM I --save-dev gulp // --save-dev or -d are meant to be installed as a development dependencyCopy the code

** Note: ** The global installation of gulp only adds a command called gulp to your system (computer). This command calls the gulpfile.js file in the current directory and performs tasks based on the contents of the file, while the local installation of gulp provides the API functionality.

3. Install the plug-in

Most of the tasks that Gulp handles are in the form of plugins, so we need to install some of the plugins we need into the project before using them

Here are some common plugins:

  • Gulp-rename: renames a file
  • Gulp-concat: merges files
  • Gulp-filter: indicates file filtering
  • Gulp-uglify: compresses Js
  • Gulp-csso: compresses and optimizes the CSS
  • Gulp-html-minify: compresses HTML
  • Gulp-imagemin: indicates the compressed image
  • Gulp-zip: indicates a zip file
  • Gulp-autoprefixer: automatically adds a browser prefix to the CSS
  • Gulp-sass: compiles sASS
  • Gulp-babel: compiles ES6 code to ES5

Here are the plugins used in this article:

cnpm i gulp gulp-less gulp-sass gulp-imagemin gulp-concat gulp-connect gulp-content-includer gulp-jslint gulp-minify-css  gulp-uglify gulp-watch gulp-rename gulp-autoprefixer gulp-run-sequence -S-devCopy the code

You can see that package.json already has dependencies

"dependencies": {
    "gulp": "^ 4.0.2." "."gulp-autoprefixer": "^" 7.0.1."gulp-concat": "^ 2.6.1." "."gulp-connect": "^ 5.7.0"."gulp-content-includer": "^ 0.0.7"."gulp-imagemin": "^ 7.1.0"."gulp-jslint": "^ 1.0.10"."gulp-less": "^ 4.0.1." "."gulp-minify-css": "^ 1"."gulp-rename": "^ 2.0.0." "."gulp-run-sequence": "^" 0.3.2."gulp-sass": "^ 4.1.0." "."gulp-uglify": "^ 3.0.2." "."gulp-watch": "^ 5.0.1." "}}Copy the code

3.1 Creating the gulpfile.js file

This file needs to be configured in the root directory of the project to configure Gulp. The file name must be gulpfile.js; otherwise, the file cannot be executed.

Next, we can learn a few of the GULp apis that will help us in the following steps:

// Define a task and declare its name, task dependencies, and task contents.
gulp.task(name[, deps], fn)

// Read the file. The parameter is a file path string or array. Wildcard characters are supported.
gulp.src(globs[, options])

// Write to the file as a flow of pipe. The folder is automatically created if it does not exist.
gulp.dest(path[, options])

// Monitor the file and perform the task.
gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
Copy the code

Create a simple instance:

var gulp = require('gulp');
gulp.task('default'.function() {
 // Put your default task code here
});
Copy the code

To execute this command, simply enter gulp default/gulp on the terminal (the name can be omitted if the name is default).

Now that we’re done, let’s get down to configuring some complicated tasks.

3.2 Importing plug-ins

const GulpClient = require("gulp");
const autoPrefixer = require("gulp-autoprefixer");
const less = require("gulp-less");
const minifyCSS = require("gulp-minify-css");
const rename = require("gulp-rename");
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const GulpUglify = require("gulp-uglify");
const imagemin = require("gulp-imagemin");
const runsequence = require('gulp-run-sequence');
const connect = require('gulp-connect');
Copy the code

3.3 Compiling the LESS file

Plugins needed:

// Compile the less file
GulpClient.task('less'.() = > {
    return GulpClient.src('./css/**/*.less')
    .pipe(less())/ / compile less
    .pipe(minifyCSS())/ / to simplify the CSS
    .pipe(autoPrefixer({
        overrideBrowserslist: ['last 2 version'].// Compatible with the latest two versions
        cascade: false
    }))
    .pipe(rename({
        suffix: '.min' // Add.min to the compressed CSS file name
    }))
    .pipe(GulpClient.dest('dist/css'))})Copy the code

3.4 Compiling sass files

GulpClient.task('sass'.() = > {
    return GulpClient.src('./css/**/*.{sass,scss}')
    .pipe(sass())
    .pipe(minifyCSS())
    .pipe(rename({
        suffix:'.min'
    }))
    .pipe(GulpClient.dest('dist/css'))})Copy the code

3.5 Compression of CSS Code

GulpClient.task('css'.() = > {
    return GulpClient.src('./css**/*.css')
    .pipe(minifyCSS())
    .pipe(rename({
        suffix:'.min'
    }))
    .pipe(GulpClient.dest('dist/css'))})Copy the code

3.6 Compressed JS code

GulpClient.task('js'.() = > {
    return GulpClient.src('./js/**/*.js')
    .pipe(concat('vender.js'))/ / merge
    .pipe(GulpUglify())/ / uglification
    .pipe(GulpClient.dest('./dist/js'))// Object file
})
Copy the code

3.7 Image Compression

GulpClient.task('images'.() = > {
    return GulpClient.src('./img/**/*.{jpg,png,gif}')
    .pipe(imagemin())// Compress the image
    .pipe(GulpClient.dest('./dist/img'))})Copy the code

3.8 Output data (JSON/XML, etc.)

GulpClient.task('data'.() = > {
    return GulpClient.src('./data/**/*.{json,xml}')
    .pipe(GulpClient.dest('./dist/data'))})Copy the code

3.9 Copy the index. HTML file to the product directory dist

GulpClient.task('copy-index'.() = > {
    return GulpClient.src('index.html')
    .pipe(GulpClient.dest('./dist/'))})Copy the code

4. Compile all files (perform all tasks)

Run gulp build on the terminal

GulpClient.task('build',GulpClient.series(['less'.'sass'.'css'.'js'.'images'.'data'.'copy-index'.'html']),() = > {
    runsequence('concat');
    console.log('Compile successful');
})
Copy the code

4.1 Automatic Monitoring

GulpClient.task('watch'.async () => {
    GulpClient.watch('./css/**/*.less',GulpClient.series(['less']))
    GulpClient.watch('./css/**/*.{sass,scss}',GulpClient.series(['sass']))
    GulpClient.watch('./css**/*.css',GulpClient.series(['css']))
    GulpClient.watch('./js/**/*.js',GulpClient.series(['js']))
    GulpClient.watch('./img/**/*.{jpg,png,gif}',GulpClient.series(['images']))
    GulpClient.watch('./data/**/*.{json,xml}',GulpClient.series(['data']))
    GulpClient.watch('index.html',GulpClient.series(['copy-index']))
    GulpClient.watch('./html/**/*.html',GulpClient.series(['html'))})Copy the code

4.2 Starting on the Server

GulpClient.task('server'.async () => {
    connect.server({
        root:'dist'.livereload:'true'/ / thermal load})})Copy the code

4.3 Setting Automation

GulpClient.task('default',GulpClient.series('build'.'server'))
Copy the code