构建工具 | Gulp压缩css、html、image文件

1. 相关插件
   Plugins | gulp.js
   GitHub - nfroidure/gulp-minify-css: A Gulp plugin that minifies css with clean-css:
   gulp-htmlmin - npm
   gulp-imagemin - npm
2. Gulp 插件实质上是 Node 转换流（Transform Streams），它封装了通过管道（pipeline）转换文件的常见功能，通常是使用 .pipe() 方法并放在 src() 和 dest() 之间。他们可以更改经过流（stream）的每个文件的文件名、元数据或文件内容。
3. 安装

   # 压缩CSS文件
   npm install --save-dev gulp-minify-css
   
   # 压缩HTML文件
   npm install --save-dev gulp-htmlmin
   
   #图片压缩
   npm install --save-dev gulp-imagemin

4. 创建压缩Css文件目录dist/css，编写关于压缩css文件的gulpfile.js文件内容

   var cssUglify = require("gulp-minify-css");
   
   // 压缩CSS任务
   gulp.task("cssuglify",function(cb){
       gulp.src("src/css/init.css")
           .pipe(cssUglify())
           .pipe(gulp.dest("dist/css"))
       cb()
   })

5. 编写关于压缩html文件的gulpfile.js文件内容

   var htmlUglify = require("gulp-htmlmin")
   
   // 压缩HTML任务
   gulp.task("htmlUglify",function(cb){
       gulp.src("src/index.html")
           .pipe(htmlUglify({ collapseWhitespace: true }))
           .pipe(gulp.dest("dist"))
       cb()
   })

6. 创建压缩images文件目录dist/images，编写关于压缩css文件的gulpfile.js文件内容

   const imageUglify = import('gulp-imagemin');
   const imageminOptipng = require( 'imagemin-optipng');
   const imageminSvgo = import( 'imagemin-svgo');
   const imageminMozjpeg = import( 'imagemin-mozjpeg');
   
   // 压缩image任务
   gulp.task("imageUglify",function(cb){
       gulp.src("src/images/!*")
           .pipe(imageUglify([
               imageminOptipng({ optimizationLevel: 5 }),
               imageminSvgo({
                   plugins: [
                           { removeViewBox: true },
                           { cleanupIDs: false }
                           ]
               }),
               imageminMozjpeg({ quality: 75, progressive: false })
           ]))
           .pipe(gulp.dest("dist/images"))
           cb()
   });

7. 执行gulp任务jsuglify，后台生成压缩文件，ending