欢迎莅临
人的生命在于折腾,我喜欢折腾我自己~

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

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

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

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

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

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

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

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

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

进入CDM,创建一个NPM环境

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工具挺强大,但是很多功能我也暂时不需要~

赞(0) 打赏
未经允许不得转载:邓子乐的札记 » 使用Gulp 简单打包合并JS文件
0

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏