Gulp的压缩处理

大家好，我又回来了！！！！！！断更了一年多，今日起，我将继续发布新的博客，后续的文章会开辟新的技术领域以及新的实际开发工具，希望大家继续关注，有不足之处，还请多多指教与交流。

今天，我将以一个实际开发工具 —— gulp的压缩打包，开启2021新年的大门，大家拭目以待吧。

好了，言归正传，在实际开发中，我们经常会碰到JS和CSS文件混合压缩的情况，有很多人都会直接使用网上的压缩工具直接压缩，下面我给大家带来一种便捷的压缩方法：Gulp。

1.打包前准备

• 需要安装 node 和 npm。

• 全局安装 gulp: npm install gulp -g

• 在项目内需要安装如下几个插件：

  gulp，npm install gulp --save

  gulp-uglify，npm install gulp-uglify --save

  gulp-cssmin，npm install gulp-cssmin --save

  gulp-concat，npm install gulp-concat --save

2.打包压缩

进入仓库中的目标文件夹，以网页版文件夹为例，进入data/web ，引入gulpfile.js文件，执行命令 gulp compress 会调用当前目录的 config.json 配置文件打包、压缩静态资源，在当前目录的output文件夹生成压缩后的资源文件。

gulpfile.js文件内主要是配置文件压缩命令，只需要在目标文件夹内执行gulp compress指令，即可同时打包压缩你需要压缩的css和js文件。

3.config.json文件配置说明

以网页版配置文件的一个配置项说明：

{
  "web_1.0": {
    "css": [
      "/web/css/main.css",
      "/web/css/vertical.css"
    ]
  }
}

• web_1.0： 配置项名，如果css和js数组存在，则会在output文件夹生成web_1.0.min.js和web_1.0.min.css资源文件，

• css数组： 指明data/web文件内要打包的css资源。

• js数组： 指明data/web文件内要打包的js资源。

• 最后把打包好的资源文件引入到页面中即可。

4.注意项

1. 在不同的目录下，要更改输出文件的路径，如：

   gulp.dest(rootPath + "/web/output"), //根据自己实际需要修改gulp.dest的输出目录

    

2. 需要在index.html中引入相对应压缩后的css和js文件，目前css和js文件均为多合一压缩模式，只输出一个。

 

附件内容（源码如下所示）：

config.json文件内容如下：

{
  "web_1.0": {
    "css": [
      "/web/css/main.css",
      "/web/css/vertical.css"
    ]
  }
}

gulpfile.js文件内容如下（根据自己实际文件结构进行更改）：

let gulp = require('gulp');
let uglify = require('gulp-uglify');
let concat = require('gulp-concat');
let cssmin = require("gulp-cssmin");
let fs = require('fs');
let path = require('path');
let config = [];
let dealConfig = [];
let allFilePath = [];
let rootPath = path.resolve('../../');

// 获取打包配置信息
config = JSON.parse(fs.readFileSync("./config.json", "utf-8"));
// 把相对路径转为绝对路径
for (let name in config) {
    dealConfig[name] = {};
    for (let item in config[name]) {
        dealConfig[name][item] = [];
        if (typeof config[name][item] != "undefined")
        for (let i = 0; i < config[name][item].length; i++) {
            dealConfig[name][item][i] = rootPath + config[name][item][i];
            allFilePath.push(dealConfig[name][item][i]);
        }
    }
}

gulp.task("compress", function (done) {
    for (let name in dealConfig) {
        for (let item in dealConfig[name]) {
        if (typeof dealConfig[name][item] != "undefined") {
            gulp.src(dealConfig[name][item], {
                allowEmpty: true
            }) // 需要操作的文件
            .pipe(concat(name + ".min." + item)) // 合并
            .pipe(item == "js" ? uglify() : cssmin()) // 压缩
            .pipe(gulp.dest(rootPath + "/web/output")); // 输出
            console.log("生成资源文件: " + name + ".min." + item);
            done(); // 需要执行回调
        }
        }
    }
});