使用gulp来构建项目

我就是我 2023-01-19 07:06 26阅读 0赞

gulp是一个前端构建的工具，用来快速进行一些操作。比如开发一个项目的时候，设计师给你的照片一般都是一个高清的图，但是这些资源往往是很大的。那你要压缩图片的话是不是要找一个网站去将图片一个一个的进行压缩呢。显然，这样的操作是很麻烦的。那么我们就可以利用gulp来进行这一项的操作。此外，还可以利用一些gulp的插件来进行别的操作，比如压缩js、css 、html代码等，还可以用来混淆js代码，合并js代码等。还可以自动加载、把目录下的所有文件进行重命名等等的操作。下面我们来进入gulp的学习

学习gulp，主要学怎么样使用4个api就好了，分别是创建任务， **gulp.src()、gulp.dest()、gulp.watch()**

1、 gulp.src()

在gulp中，使用的是Nodejs中的stream(流)，首先获取到需要的stream，然后可以通过stream的pipe()方法把流导入到你想要的地方，比如gulp的插件中，经过插件处理后的流又可以继续导入到其他插件中，当然也可以把流写入到文件中。所以gulp是以stream为媒介的，它不需要频繁的生成临时文件，这也是Gulp的速度比Grunt快的一个原因。gulp.src()方法正是用来获取流的， **但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息。**

gulp.src('./src/*.css')//读入文件，将文件读成流

2、gulp.dest()

gulp.dest是用来将流写到文件里面去的，从src中将文件读成流，然后通过pipe方法，将这个流经过插件去处理，处理完后再通过pipe传入到dest中。 **dest的参数是一个路径参数，只能用来指定要生产的文件的目录，不能指定生成文件的文件名，文件名是src读入的时候获取到的文件本身的名字。不能修改。如果想要修改文件名需要使用gulp-rename这个插件。**

gulp.dest('dist')

3、gulp.watch()

gulp.watch()用来监测文件的变化，

const { watch } = require('gulp');
    watch('./src/App.vue', function(cb) {
      // body omitted
      console.log('watch callback')
    
    
      cb();
    });

![20210508112859976.png][]

4、常用插件使用（创建任务）

（1）压缩css

首先安装一个插件 **gulp-clean-css**

**然后再gulpfile.js中如下配置:**

var gulp = require('gulp');
     var cleanCSS = require('gulp-clean-css');
    function compressCss(cb){
      gulp.src('./src/*.css')//css所在位置，获取文件流
            .pipe(cleanCSS({compatibility: 'ie8'}))  //兼容IE8，将文件流输入到cleanCSS插件中
            .pipe(gulp.dest('dist'));//文件处理完了以后，把流输入文件，这里填的是输出目录
      cb()
    }
    exports.compressCss = compressCss;

![20210508112859922.png][]

（2）压缩图片

压缩图片有三个插件，优劣势如下

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      组件名称 
    </div> </td> 
   <td> 
    <div>
      组件功能 
    </div> </td> 
   <td> 
    <div>
      图片压缩比例 
    </div> </td> 
   <td> 
    <div>
      优势 
    </div> </td> 
   <td> 
    <div>
      劣势 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      gulp-imagemin&nbsp; 
    </div> </td> 
   <td> 
    <div>
      &nbsp;压缩png、jpg、gif和svg 
    </div> </td> 
   <td> 
    <div>
      各种格式压缩比例大概在10%-20%,有些小图有时不能压缩 
    </div> </td> 
   <td> 
    <div>
      可以压缩的常用格式多，结合imagemin-pngquant 可以提升总体压缩比&nbsp;&nbsp; 
    </div> </td> 
   <td> 
    <div>
      总体压缩比例适中，压缩速度快 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      gulp-smushit 
    </div> </td> 
   <td> 
    <div>
      压缩png，jpg 
    </div> </td> 
   <td> 
    <div>
      jpg压缩比在10%-20%， png50%以上但不稳定 
    </div> </td> 
   <td> 
    <div>
      png压缩比例高 
    </div> </td> 
   <td> 
    <div>
      不能压缩gif,且压缩速度慢 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      gulp-tinypng-nokey 
    </div> </td> 
   <td> 
    <div>
      压缩png，jpg 
    </div> </td> 
   <td> 
    <div>
      jpg压缩比在10%-20%， png50%以上 
    </div> </td> 
   <td> 
    <div>
      png压缩比例高，并且没有限制张数 
    </div> </td> 
   <td> 
    <div>
      &nbsp; 
    </div> 
    <div>
      不能压缩gif，压缩过程整体速度取决于网速，慢 
    </div> 
    <div>
      &nbsp; 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

下面我们以gulp-tinypng-nokey为例看一下，首先需要安装这个插件到本地，然后写入如下代码

var gulp = require('gulp');
    var tinypng_nokey = require('gulp-tinypng-nokey');
    function tinypng(cb) {
        // place code for your default task here
        gulp.src('./src/assets/*.png')
        .pipe(tinypng_nokey())
        .pipe(gulp.dest('dist/image'))
        cb();
      }
      exports.tinypng = tinypng;

这个时候 在命令行中输入 gulp tinypng

可以看到下面的输出

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 1][]

可以看到因为太多图片了最后面几张图片没有压缩到，可能是因为网络原因造成的。

（3）压缩js，

安装插件gulp-uglify-es

npm install gulp-uglify-es --save-dev

然后再gulpfile.js中输入如下代码

function compressJs(cb){
      src('dist/js/*.js')
      .pipe(uglify())
      .pipe(dest('./dist/newJs'));
      cb()
    }

![20210508112859976.png][]

（4）压缩HTML

安装插件

npm install gulp-htmlclean --save-dev
    npm install gulp-htmlmin --save-dev

var htmlmin = require('gulp-htmlmin');
    var htmlclean = require('gulp-htmlclean');
    function compressHtml(cb){
        src('./public/*.html')
        .pipe(htmlclean())//内容进行整理和标签自动匹配
        .pipe(htmlmin({
            removeComments: true,//清除HTML注释
            collapseWhitespace: true,//压缩 HTML
            collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input /
            removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: true,//删除 <script> 的 type="text/javascript"
            removeStyleLinkTypeAttributes: true,//删除 <style> 和 <link> 的 type="text/css"
            minifyJS: true,//压缩页面 JS
            minifyCSS: true,//压缩页面 CSS
            minifyURLs: true
        }))
        .pipe(dest('./dist/html/'))
      cb()
    }

![20210508112859977.png][]

（5）合并JS文件

npm install gulp-concat --save-dev

var concat = require('gulp-concat');
    function concatJs(cb){
      src(['./a.js',
      './b.js'])   //数组里存放需要合并的多个js文件,支持通配符
      .pipe(concat('concat.js'))  //生成合并文件
      .pipe(uglify())  //压缩目标文件
      .pipe(dest('./public/'))
      cb()
    }

![20210508112859978.png][]

我们看一下合并后的js，可以看到此时合并后的js内容就是两个文件内容拼接起来的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 2][]

（6）混淆JS代码

npm install gulp-javascript-obfuscator --save-dev

需要注意的是，这个插件对es6没有自动转义，所以我们需要配置babel。

npm install --save-dev babel-cli babel-core @babel/preset-env gulp-babel

var javascriptObfuscator = require("gulp-javascript-obfuscator");
    var babel = require("gulp-babel");
    function mixJs(cb){
      src('./index.js')  //准备混淆的JS文件
      .pipe(babel({
        presets: ['@babel/preset-env']
      }))
      .pipe(javascriptObfuscator({
          compact: true,
          mangle: true,
          rotateStringArray: true,
          selfDefending: true,
          stringArray: true,
          target: "browser"
      }))
      .pipe(dest('./public/'))  //存放混淆之后的JS路径
      console.log('mixjs')
      cb()
    }

![20210508112859921.png][]

（7）提供一些别的插件

clean = require("gulp-clean"),//清理之前文件和文件夹
    jshint = require('gulp-jshint'),//js检测
    rename = require("gulp-rename"),//重命名
    uglify = require("gulp-uglify"),//压缩js
    stripDebug = require("gulp-strip-debug"),//移除console语句
    notify = require('gulp-notify');//提示信息

5、series（）

series是将操作按输入的顺序依次执行。

const { series } = require('gulp'); 
    function javascript(cb) { // body omitted cb(); } 
    function css(cb) { // body omitted cb(); }
     exports.build = series(javascript, css);

6、parallel()

parallel是将操作同时执行

const { parallel } = require('gulp');
     function javascript(cb) { // body omitted cb(); } 
    function css(cb) { // body omitted cb(); } 
    exports.build = parallel(javascript, css);

7、其他的参考官网文档 [https://www.gulpjs.com.cn/][https_www.gulpjs.com.cn]

[20210508112859976.png]: /images/20221021/4159dd7403624c77866e38a84292217e.png
[20210508112859922.png]: /images/20221021/5a2446f4ffc1421ab2f5da593be28c2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70]: /images/20221021/6ec5850019084b86aa8a54efafa81d2b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 1]: /images/20221021/f64a3786b8684b1abd66de1e51b5be03.png
[20210508112859977.png]: /images/20221021/da393b14f56e4b95963ea8cb8d55e362.png
[20210508112859978.png]: /images/20221021/f86f39016d8a4872a6d6c96b3363c013.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 2]: /images/20221021/3af2d8c3c45746c784e8aa2e41f88754.png
[20210508112859921.png]: /images/20221021/b5f1af0548e947dfa877d77523c3fcf0.png
[https_www.gulpjs.com.cn]: https://www.gulpjs.com.cn/