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 }) ] })) }