多个 JS 文件合并成一个后的一些问题

2015-07-02 19:26:49 +08:00
 hellogbk
关于我问的这个问题,我之前在网上搜索到了一些东西,好像都是跟nodejs有关的,楼主不会nodejs所以完全看不懂。。。

网站用到的JS文件很多,导致打开网页会有很多的请求,所以想把所有的JS都合并成一个。
有个问题想请大家指点一下。

假如说把 1.js 2.js 3.js 合并成一个all.js
在合并完成后,万一1.js 2.js 3.js中的任何一个发生了变化,就要重新进行合并。
请问这个过程是要自己手动来做的吗?还是说有什么现成的东西?

还有,为了保证让客户端请求到最新的合并后的文件,往往会将all.js的名字改成all_xxxx.js这样的,比如说all_1020.js
每次因为js发生变化而进行了重新合并后,应该得到一个新的all_xxxx.js这样的文件。
但是是不是每次重新合并完后,都要去手动更新所有的代码来引用最新生成的all_xxxx.js?

有什么 自动化的东西来做这个吗?
谢谢。。
7396 次点击
所在节点    程序员
21 条回复
lincanbin
2015-07-02 19:41:07 +08:00
这么简单的事自己写脚本都可以完成了吧。
learnshare
2015-07-02 19:48:43 +08:00
Grunt/Gulp 中有许多选择
yangmls
2015-07-02 19:57:13 +08:00
1. 前端方案 gulp.watch + gulp-concat

2. 后端各个语言的 asset 组件,例如 PHP 可用 https://github.com/kriswallsmith/assetic

3. 清楚缓存也可选用 ?$timestamp 的思路
tinyhill
2015-07-02 20:03:18 +08:00
tinyhill
2015-07-02 20:03:36 +08:00
gilgamesh
2015-07-02 20:05:46 +08:00
gulp grunt
browserify webpack requirejs...
hellogbk
2015-07-02 20:55:43 +08:00
@yangmls 貌似我找到的就是这个东西啊, 这是nodejs的啊。 我完全看不懂是怎么用的。 - -
用它们合并了JS后我怎么改掉服务端页面里面引用的JS文件的名字? 难道是手动去改吗?

抱歉我实在不太懂。。请再指点一下
giuem
2015-07-02 21:06:40 +08:00
struCoder
2015-07-02 21:37:41 +08:00
8楼正解,我记得淘宝一个团队做过这个模块。
hellogbk
2015-07-02 21:43:20 +08:00
@giuem 楼主用的是蛋疼的WINDOWS系统,我之前也查到过这个东西,不能用在WINDOWS的 NGINX上。。
jugelizi
2015-07-02 22:04:46 +08:00
minify 可以做到
hellogbk
2015-07-02 22:10:18 +08:00
@jugelizi 麻烦问一下全名叫什么啊?
Vonex
2015-07-02 22:17:28 +08:00
php读取几个js文件,合并后输出来也ok啊
robbielj
2015-07-03 00:46:32 +08:00
Jaylee
2015-07-03 01:01:35 +08:00
前端工程构建,选择蛮多的,Yeoman也不错,还有百度的fis,你可以看看,都有成熟的解决方案。

另推荐看看: http://www.zhihu.com/question/20790576 写不得错
duteng612
2015-07-03 01:12:16 +08:00
楼主描述的就是一些自动化构建工具
请自己google:gulp或webpack;

推荐先去了解下gulp,好明白这一系列是怎么运作的
belin520
2015-07-03 08:57:20 +08:00
前端构建工具或者combo服务器
xiaobc1234
2015-07-03 10:15:47 +08:00
grunt 可以解决楼主问题!可以写脚本,打包自动执行grunt脚本。
sliwey
2015-07-03 10:54:19 +08:00
指条明线:
1.先看gulp,学会怎么用。
2.在完成1的过程中,一般都会遇到gulp-concat这个插件,这就是用来合并文件的。
3.在搜下gulp-rev和gulp-rev-collector这两个插件,一起使用就能帮你解决版本更新的问题。
还有个大前提:先装个NodeJs吧:)
magius
2015-07-03 15:16:17 +08:00
楼主不会node没关系,只需要了解node就行。
然后看一下UglifyJS的文档就行了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/202873

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX