V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
hellogbk
V2EX  ›  程序员

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

  •  
  •   hellogbk · Jul 2, 2015 · 8446 views
    This topic created in 3953 days ago, the information mentioned may be changed or developed.
    关于我问的这个问题,我之前在网上搜索到了一些东西,好像都是跟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?

    有什么 自动化的东西来做这个吗?
    谢谢。。
    21 replies    2015-07-03 21:48:21 +08:00
    lincanbin
        1
    lincanbin  
       Jul 2, 2015 via Android
    这么简单的事自己写脚本都可以完成了吧。
    learnshare
        2
    learnshare  
       Jul 2, 2015
    Grunt/Gulp 中有许多选择
    yangmls
        3
    yangmls  
       Jul 2, 2015
    1. 前端方案 gulp.watch + gulp-concat

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

    3. 清楚缓存也可选用 ?$timestamp 的思路
    tinyhill
        4
    tinyhill  
       Jul 2, 2015
    tinyhill
        5
    tinyhill  
       Jul 2, 2015
    gilgamesh
        6
    gilgamesh  
       Jul 2, 2015 via Android
    gulp grunt
    browserify webpack requirejs...
    hellogbk
        7
    hellogbk  
    OP
       Jul 2, 2015
    @yangmls 貌似我找到的就是这个东西啊, 这是nodejs的啊。 我完全看不懂是怎么用的。 - -
    用它们合并了JS后我怎么改掉服务端页面里面引用的JS文件的名字? 难道是手动去改吗?

    抱歉我实在不太懂。。请再指点一下
    giuem
        8
    giuem  
       Jul 2, 2015 via Android
    struCoder
        9
    struCoder  
       Jul 2, 2015
    8楼正解,我记得淘宝一个团队做过这个模块。
    hellogbk
        10
    hellogbk  
    OP
       Jul 2, 2015
    @giuem 楼主用的是蛋疼的WINDOWS系统,我之前也查到过这个东西,不能用在WINDOWS的 NGINX上。。
    jugelizi
        11
    jugelizi  
       Jul 2, 2015
    minify 可以做到
    hellogbk
        12
    hellogbk  
    OP
       Jul 2, 2015
    @jugelizi 麻烦问一下全名叫什么啊?
    Vonex
        13
    Vonex  
       Jul 2, 2015
    php读取几个js文件,合并后输出来也ok啊
    robbielj
        14
    robbielj  
       Jul 3, 2015
    Jaylee
        15
    Jaylee  
       Jul 3, 2015   ❤️ 1
    前端工程构建,选择蛮多的,Yeoman也不错,还有百度的fis,你可以看看,都有成熟的解决方案。

    另推荐看看: http://www.zhihu.com/question/20790576 写不得错
    duteng612
        16
    duteng612  
       Jul 3, 2015 via iPhone   ❤️ 1
    楼主描述的就是一些自动化构建工具
    请自己google:gulp或webpack;

    推荐先去了解下gulp,好明白这一系列是怎么运作的
    icanfork
        17
    icanfork  
       Jul 3, 2015 via Android   ❤️ 1
    前端构建工具或者combo服务器
    xiaobc1234
        18
    xiaobc1234  
       Jul 3, 2015   ❤️ 1
    grunt 可以解决楼主问题!可以写脚本,打包自动执行grunt脚本。
    sliwey
        19
    sliwey  
       Jul 3, 2015   ❤️ 1
    指条明线:
    1.先看gulp,学会怎么用。
    2.在完成1的过程中,一般都会遇到gulp-concat这个插件,这就是用来合并文件的。
    3.在搜下gulp-rev和gulp-rev-collector这两个插件,一起使用就能帮你解决版本更新的问题。
    还有个大前提:先装个NodeJs吧:)
    magius
        20
    magius  
       Jul 3, 2015   ❤️ 1
    楼主不会node没关系,只需要了解node就行。
    然后看一下UglifyJS的文档就行了
    teriyaki
        21
    teriyaki  
       Jul 3, 2015
    直接copypaste啦
    哪有那么复杂
    大公司的人喜欢把简单的事情搞复杂
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   982 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 91ms · UTC 20:27 · PVG 04:27 · LAX 13:27 · JFK 16:27
    ♥ Do have faith in what you're doing.