使用Gulp 简单打包合并JS文件

发布 2020-06-09
更新 2024-01-20
阅读

本文最后更新于$day天前，文中所描述的信息可能已发生改变。

不是每个人都是需要做持续化集成，也不是每一个人需要做运维自动化，今天我只需要一个小小的需求，就是把多一个JS文件合并并压缩。

于是我在网站找了几个方案，一个是Webpack，一个是Gulp。

Webpack要依赖入口文件，我们有一些古老脚本使用了全局变量，Webpack直接给我忽略了，虽然命令简单，直接安装好Webpack Cli后，使用命令行，可以达到快速合并，具体命令如下

1	webpack-cli 要压缩的文件名1 要压缩的文件名1 -o 压缩后文件名.js

还有一个方案，是使用在线压缩，他虽然使用 gulp ，但是他不支持es5以上语法，

https://filesmerge.com/zh/merge-javascript-files

最后，我们还是尝试快速了解Gulp，来打包自己的JS文件

首先，我们建一个临时目录

进入CDM，创建一个NPM环境

1	npm init -y

然后我们安装所需要的包及依赖。

npm i -g gulp-cli
npm i -D gulp
npm i -D gulp-uglify //压缩
npm i -D gulp-concat //合并
npm i -D gulp-babel //转换新版本js
npm i -D babel-core //babel 核心
npm i -D babel-preset-es2015 //bebel插件

安装好后，我们新建一个gulpfile.js文件，这个文件是用来编写压缩规则的。我先把一个最简单的压缩规则写出来，如果只是压缩多个js文件，也不需要更改什么了。

const { src, dest } = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var babel = require('gulp-babel');
exports.default = function() {
  return src('js/*.js') //输入js文件
.pipe(babel({
                presets: ['es2015'] // es5检查机制
            }))
.pipe(concat('all.js')) //合并在一起
    .pipe(uglify())  //压缩
    .pipe(dest('output/')); //输出目录
}

我们新建一个js目录把需要压缩的文件放进去，然后在命令行执行 gulp

等待几秒后，就可以在output目录找到all.js，我们就可以愉快玩耍了~

压缩前后大小对比，因为本次压缩包含了全国省份和地区列表，所以大小没小太多，但是如果一个普通js文件压缩比也是不错的。

我看看我也做一个在线工具，方便一些只想压缩js的人，Gulp工具挺强大，但是很多功能我也暂时不需要~