Gulp compresses html, css, js file processes, listens to tasks, creates servers with gulp, runs multiple tasks at the same time, and reverses agents

1, Initialization

First, do a project initialization to record the tools used in your project

Open a console under your project file, and enter the command yarn init -y to initialize

 

Enter the command yarn add gulp-g --- global installation of gulp. Here I will not show it if I have already installed it in advance. Then enter the command yarn add gulp-s for local installation. After the installation is completed, enter the command gulp-v. if there are two version numbers, the installation is successful

 

Then create a new file named gulpFile.js JS file. Its name must be this. It is official. It is used to write the gulp command

 

OK, you can start to install the compression tool for compression

 

 

II. html compression

 

Install html compression tool, enter command

yarn add gulp-htmlmin -D

Install the tool to compress html, install it to the development environment, and the production environment cannot use it

Open files generated during initialization after installation package.json , does the development environment have the gulp htmlmin you just installed

 

 

 

 

 

 

Open start gulpFile.js File, start writing command

const gulp = require('gulp') //introduce gulp
const htmlmin = require('gulp-htmlmin') //introduce html Compression module
const path = { //Easy to manage path
    html: {
        src: 'src/**/*.html',
        dest: 'dist'
    }
}
gulp.task('html', () => { //Create a task and name it
    /*One * for all files and two * for all directories*/
    return gulp.src(path.html.src) //Open read file
        .pipe(htmlmin({
            removeComments: true, //eliminate HTML notes
            collapseWhitespace: true, //compress HTML
            collapseBooleanAttributes: true, //Omit value of Boolean property <input checked="true"/> ==> <input checked />
            removeEmptyAttributes: true, //Remove all spaces as property values <input id="" /> ==> <input />
            removeScriptTypeAttributes: false, //delete<script>Of type="text/javascript"
            removeStyleLinkTypeAttributes: true, //delete<style>and<link>Of type="text/css"
            minifyJS: true, //Compress page JS
            minifyCSS: true //Compress page CSS
        })) //Pipeline flow operation, compressing files
        .pipe(gulp.dest(path.html.dest)) //Specifies the directory where the compressed file is placed
})

Then enter the command

gulp html

Perform compression

 

 

It's compressed like this

The above is gulp3 and gulp4:

const gulp = require('gulp') //introduce gulp
const htmlmin = require('gulp-htmlmin') //introduce html Compression module
const path = { //Easy to manage path
    html: {
        src: 'src/**/*.html',
        dest: 'dist'
    }
}
const html = () => { //Create a task and name it
    /*One * for all files and two * for all directories*/
    return gulp.src(path.html.src) //Open read file
        .pipe(htmlmin({
            removeComments: true, //eliminate HTML notes
            collapseWhitespace: true, //compress HTML
            collapseBooleanAttributes: true, //Omit value of Boolean property <input checked="true"/> ==> <input checked />
            removeEmptyAttributes: true, //Remove all spaces as property values <input id="" /> ==> <input />
            removeScriptTypeAttributes: false, //delete<script>Of type="text/javascript"
            removeStyleLinkTypeAttributes: true, //delete<style>and<link>Of type="text/css"
            minifyJS: true, //Compress page JS
            minifyCSS: true //Compress page CSS
        })) //Pipeline flow operation, compressing files
        .pipe(gulp.dest(path.html.dest)) //Specifies the directory where the compressed file is placed
}

module.exports = { //Be sure to export as an object
    html
}

3, css compression

Install the css compression module, input the command

yarn add gulp-clean-css -D

 

 

And then there gulpFile.js Write the command to compress css in the file

const gulp = require('gulp') //introduce gulp
const htmlmin = require('gulp-htmlmin') //introduce html Compression module
const cleanCss = require('gulp-clean-css') //introduce css Compression module
const path = { //Easy to manage path
    /*One * for all files, two * for all directories*/
    html: {
        src: 'src/**/*.html',
        dest: 'dist'
    },
    css: {
        src: 'src/**/*.css',
        dest: 'dist'
    }
}

gulp.task('css', () => {
    return gulp.src(path.css.src)
        .pipe(cleanCss())
        .pipe(gulp.dest(path.css.dest))
})

Input command gulp css command execution

 

 

In addition, css has a very useful module. It can automatically prefix the css attributes that need to be compatible, and input the command to install it

yarn add gulp-autoprefixer -D

After installation, introduce the module and call

4, js compression

Install js es6 syntax to es5 syntax module, compress js module, input command

yarn add -D gulp-babel @babel/core @babel/preset-env //es6 syntax to es5
yarn add -D gulp-uglify //Compress js

 

 

Same opening gulpFile.js File write compression JS command

const gulp = require('gulp') //introduce gulp
const htmlmin = require('gulp-htmlmin') //introduce html Compression module
const cleanCss = require('gulp-clean-css') //introduce css Compression module
const autoprefixer = require('gulp-autoprefixer') //Introduction of prefixed module
const babel = require('gulp-babel'), //introduce es6 turn es5 modular
    uglify = require('gulp-uglify') //introduce js Compression module
const path = { //Easy to manage path
    /*One * for all files and two * for all directories*/
    html: {
        src: 'src/**/*.html',
        dest: 'dist'
    },
    css: {
        src: 'src/**/*.css',
        dest: 'dist'
    },
    js: {
        src: 'src/**/*.js',
        dest: 'dist'
    }
}
gulp.task('js', () => {
    gulp.src(path.js.src)
        .pipe(babel({
            presets: ['@babel/env'] //es6 turn es5
        }))
        .pipe(uglify()) //Perform compression
        .pipe(gulp.dest(path.js.dest))
})

Enter the command gulp js to run

5, Monitor task

The writing method of gulp4 is needed for listening task

const gulp = require('gulp') //introduce gulp
const htmlmin = require('gulp-htmlmin') //introduce html Compression module
const cleanCss = require('gulp-clean-css') //introduce css Compression module
const autoprefixer = require('gulp-autoprefixer') //Introduction of prefixed module
const babel = require('gulp-babel'), //introduce es6 turn es5 modular
    uglify = require('gulp-uglify') //introduce js Compression module
const path = { //Easy to manage path
    /*One * for all files and two * for all directories*/
    html: {
        src: 'src/**/*.html',
        dest: 'dist'
    },
    css: {
        src: 'src/**/*.css',
        dest: 'dist'
    },
    js: {
        src: 'src/**/*.js',
        dest: 'dist'
    }
}



const css = () => {
    return gulp.src(path.css.src)
        .pipe(autoprefixer())
        .pipe(cleanCss())
        .pipe(gulp.dest(path.css.dest))
}
const js = () => {
    return gulp.src(path.js.src)
        .pipe(babel({
            presets: ['@babel/env'] //es6 turn es5
        }))
        .pipe(uglify()) //Perform compression
        .pipe(gulp.dest(path.js.dest))
}

const html = () => { //Create a task and name it
    return gulp.src(path.html.src) //Open read file
        .pipe(htmlmin({
            removeComments: true, //eliminate HTML notes
            collapseWhitespace: true, //compress HTML
            collapseBooleanAttributes: true, //Omit value of Boolean property <input checked="true"/> ==> <input checked />
            removeEmptyAttributes: true, //Remove all spaces as property values <input id="" /> ==> <input />
            removeScriptTypeAttributes: false, //delete<script>Of type="text/javascript"
            removeStyleLinkTypeAttributes: true, //delete<style>and<link>Of type="text/css"
            minifyJS: true, //Compress page JS
            minifyCSS: true //Compress page CSS
        })) //Pipeline flow operation, compressing files
        .pipe(gulp.dest(path.html.dest)) //Specifies the directory where the compressed file is placed
}
const watch = () => { //Listen to files, change files and perform corresponding tasks
    gulp.watch(path.html.src, html)
    gulp.watch(path.css.src, css)
    gulp.watch(path.js.src, js)
}

module.exports = {
    html,
    js,
    css,
    watch
}

Monitor by inputting the command gulp watch

6, gulp create server

Enter command

yarn add gulp-connect -D

Lead in module

const connect = require('gulp-connect')

Create server

const server = () => {
    connect.server({ //Create server
        root: 'dist',//root directory
        port: '2000',//Port number
        livereload:true//Server hot update
    })
}

Export module

module.exports = {
    html,
    js,
    css,
    watch,
    server
}

Enter the command gulp server to run

If you want to open the homepage directly, you can enter the command to install the open module

yarn add open -S

Then write the web address you want to open anywhere

open('http://127.0.0.1:2000')

Another module can also create servers

Input command installation

yarn add gulp-webServer -D

 

Lead in module

const    webserver = require('gulp-webserver')

Create server

const createServer = () => {
    return gulp.src('./dist')
        .pipe(webserver({ //Create server
            port:'3000', //Port number
            open:'/html', //Default open path
            livereload:true //Thermal renewal
        }))
}

7, Running multiple tasks at the same time

// Default task: default We can put all the tasks in default
// series Synchronize, delete first dist Tasks, then other tasks
// parallel Asynchronous execution (parallel), tasks that do not affect each other can be parallel
module.exports.default = gulp.series(gulp.parallel(html,js,css,watch,server))

Just write the gulp command to run

If you want to update the page in real time, then add

.pipe(connect.reload())

Then restart the server

8, Reverse proxy

Enter command

yarn add http-proxy-middleware -D

 

Lead in module

const proxy = require('http-proxy-middleware')

Create reverse proxy

The server created by connect uses the function to create a proxy

const server = () => {
    connect.server({ //Create server
        root: 'dist', //root directory
        port: '2000', //Port number
        livereload: true, //Server hot update
        middleware: () => {
            return [
                proxy.createProxyMiddleware('/api', { //Create reverse proxy, request already /api Use at the beginning target Server for
                    target: 'http://localhost',//Servers requiring proxies
                    changeOrigin: true
                })
            ]
        }

    })
}

The server created by webserver uses array to create agent

const createServer = () => {
    return gulp.src('./dist')
        .pipe(webserver({ //Create server
            port: '3000', //Port number
            open: '/html', //Default open path
            livereload: true, //Thermal renewal
            middleware: [
                proxy.createProxyMiddleware('/api', { //Create reverse proxy, request already /api Use at the beginning target Server for
                    target: 'http://localhost',
                    changeOrigin: true
                })
            ]
        }))
}

Tags: Javascript hot update JSON

Posted on Tue, 16 Jun 2020 22:14:55 -0400 by Anarchatos