Use Gulp for code compression steps and configuration, and gulp code compression steps

Use Gulp for code compression steps and configuration, and gulp code compression steps

1. Installation Steps

1. first determine whether node. js is installed. If node. js is not installed, install it first;

2. Check whether the package management tool npm is installed. If not, install npm-g;

3. install gulp: npm install gulp -- save-dev)

4. Install common extensions for html, css, and js Code compression: gulp-htmlmin, gulp-cssnano, and gulp-uglify;

Npm install -- save-dev gulp-htmlmin;

Npm install -- save-dev gulp-cssnano;

Npm install -- save-dev gulp-uglify;

5. Create a new file gulpfile. js in the root directory. This file is a configuration file compressed by gulp. The configuration is as follows;

1 'use strict '; 2 3 var gulp = require ('gulp'); 4 5 // compression html 6 var htmlmin = require ('Gulp-htmlmin'); 7 gulp. task ('html ', function () {8 gulp. src (['. /src/app /*. html ']) 9. pipe (htmlmin ({10 collapseWhitespace: true, // compress HTML11 removeComments: true, // clear HTML comment 12 removeScriptTypeAttributes: true, // Delete <script> type = "text/javascript" 13 removeStyleLinkTypeAttributes: true, // Delete <link> type = "text/css" 14 minifyJS: true, // compress the JS15 minifyCSS: true // compress the page CSS16}) 17. pipe (gulp. dest ('dist/src/app'); 18}); 19 20 // compression css21 var cssnano = require ('Gulp-cssnan'); 22 gulp. task ('style', function () {23 gulp. src (['. /css /*. css ']) 24. pipe (cssnano () 25. pipe (gulp. dest ('dist/css '); 26}); 27 28 // compression js29 var uglify = require ('Gulp-uglify'); 30 gulp. task ('script', function () {31 gulp. src (['. /src/static /*. js']) 32. pipe (uglify ({33 mangle: false // skip the function name so that it is not compressed, and the function name can also be compressed to true34}) 35. pipe (gulp. dest ('dist/src/static '); 36}); 37 38 // Synchronous Code Change 39 gulp. task ('dist', function () {40 gulp. watch (['. /src/app /*. html '], ['html']); 41 gulp. watch (['. /css /*. css '], ['style']); 42 gulp. watch (['. /src/static /*. js'], ['script']); 43}); 44 45 gulp. task ("default", ["html", "style", "script", "dist"]);

6. initialize the package. json file: npm init; (simply press Enter)

7. Make sure everything is ready. Execute gulp on the command line and wait until it is finished.

Note: (1 ). the configuration here is abbreviated as appropriate. If the project is not newly created, but the page is added based on the original project, in order to improve compression efficiency, it does not match all html, css, and js files, configure only the new file, as shown in the following example:

1 // compress html 2 var htmlmin = require ('Gulp-htmlmin'); 3 gulp. task ('html ', function () {4 gulp. src (['. /src/app/level2HK.html ','. /src/app/index.html ']) 5. pipe (htmlmin ({6 collapseWhitespace: true, // compress HTML 7 removeComments: true, // clear HTML comment 8 removeScriptTypeAttributes: true, // Delete <script> type = "text/javascript" 9 removeStyleLinkTypeAttributes: true, // Delete <link> type = "text/css" 10 minifyJS: true, // compress the JS11 minifyCSS: true // compress the page CSS12}) 13. pipe (gulp. dest ('dist/src/app'); 14 });

Gulp. src (['path A', 'path B ']) supports input parameters in the array form. Of course, you can also directly input the string parameter gulp. src ('path ')

(2) This section only lists the initial compression modules of the Code. It is suitable for beginners who are new to gulp. In fact, gulp has many other excellent plug-ins, such as code merging and obfuscation, you can install and configure your project based on your actual needs;
For example, the Code merging plug-in gulp-concat;
File Name modification plug-in gulp-rename;
Image compression plug-in gulp-imagemin;
Sass file compilation plug-in gulp-sass;
Check the change status gulp-changed;
Follow these steps to compress, merge, and modify js names:
　　

1 gulp. task ('scripts', function () {2 return gulp. src ('. /src/static /*. js') 3. pipe (concat ('main. js ') // merge all js files to main. js4. pipe (gulp. dest ('. /src/static ') // output main. js to folder
5. pipe (rename ({suffix: '. min'}) // rename compressed file name
6. pipe (uglify () // Compression
7. pipe (gulp. dest ('./src/static'); // output
8 });

Image compression Configuration:

1 // compress Image 2 gulp. task ('images', function () {3 gulp. src ('. /src/images /*. * ') 4. pipe (changed ('dist/images', {hasChanged: changed. compareSha1Digest}) 5. pipe (imageMin ({6 progressive: true, // lossless compression jpg image 7 svgoPlugins: [{removeViewBox: false}] // do not remove svg viewbox attribute 8}) 9. pipe (gulp. dest ('dist/images') 10. pipe (browserSync. reload ({stream: true}); 11 });