打包工具之 gulp 使用

一、什么是 gulp

Gulp是一个基于流（stream）的自动化构建工具，用于简化开发过程中的任务管理和前端工作流程。它可以帮助开发人员自动化和优化常见的开发任务，如压缩、合并和转换文件，以及自动刷新浏览器和部署项目等。

二、安装

1、安装node，gulp基于node开发
2、在项目中安装Gulp，可以在项目中使用以下命今安装Gulp;

`npm install gup --save-dev` 

这将在项目中安装Gup并将其添加到项目的开发依赖中。
3.创建一个Gulpfle: 在项目根目录中创建一个名为 “gulpfle.js”的文件，这是Gulp的配置文件，定义了Gulp任务和流程。

const gulp = require('gulp');

4.创建Gulp任务: 在Gulpfile中定义Gulp任务，例如压缩和合并JavaScrip和CSS等。

三、创建gulp任务

1、js 文件打包
安装：

npm install gulp-uglify --save-dev

代码：

const uglify = require('gulp-uglify');

gulp.task('relyon-js', function() {
  return gulp.src('js/relyon/*.js') // 指明源文件路径、并进行文件匹配
  .pipe(uglify({
    mangle: true, // 混淆变量名
    compress: true, // 压缩代码
    // mangleProperties: true, //该选项可以设置为一个布尔值或一个对象。如果设置为 `true`，则会对对象的属性名进行混淆；
    output: {
      comments: false, // 删除所有注释
      // beautify: true //删除空格
    }
  }))
    .pipe(gulp.dest('dist/js/relyon'));
});

2、html 文件打包

这里配置需要注意的是，如果代码使用es6语法， 使用gulp-htmlmin，将不会对script中的内容压缩，得使用gulp-html-minifier-terser。

含ES6代码， 安装命令：

npm install gulp-html-minifier-terser --save-dev

全ES5代码，安装命令：

npm install gulp-htmlmin --save-dev

代码：

 es6:
 const htmlmin = require('gulp-html-minifier-terser');
 es5:
 // const htmlmin = require('gulp-htmlmin');

  gulp.task('minify-html', function() {
    return gulp.src('./*.html') // 指明源文件路径、并进行文件匹配
      .pipe(htmlmin({ 
        collapseWhitespace: true,//去空格
        removeComments: true, //去注释
        minifyJS: true,	//压缩页面中的JS
    	minifyCSS: true	//压缩页面中的CSS
    }))
      .pipe(gulp.dest('dist'));
  });

重要配置项：

	minifyJS: true,	//压缩页面中的JS
	minifyCSS: true	//压缩页面中的CSS

3、图片打包压缩
安装：

npm install gulp-imagemin --save-dev

代码：

const imagemin = require('gulp-imagemin');

gulp.task('images', function(){
    return gulp.src('src/images/**/*.{png,jpg,gif,svg}') // 指明源文件路径、并进行文件匹配
      .pipe(imagemin({
        progressive: true, // 无损压缩JPG图片
        svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox属性
        use: [pngquant()] // 使用pngquant插件进行深度压缩
      }))
      .pipe(gulp.dest('dist/src/images')); // 输出路径
  });

四、打包命令

配置：

gulp.task('default', gulp.parallel('relyon-js', 'minify-html', 'images'));
//  gulp.task('images', function(){  将第一个参数名，添加到gulp.parallel 配置中

终端打包：

gulp