码迷,mamicode.com
首页 > Web开发 > 详细

关于用gulp合并压缩seaJs模块

时间:2016-02-26 14:02:44      阅读:1517      评论:0      收藏:0      [点我收藏+]

标签:

现在很多人都在用seaJs来开发项目,seaJs上手容易,操作简单。但在后期做合并压缩的时候却中了个巨大无比的坑,但坑也总得有人来填。于是花了将近一个星期的时间来填了这坑,现将填坑的一些心得与大家分享。在网上搜了下相关的资料,不得不说网上资料很多的坑(都是复制别人的。。。),说多都是泪。下面总结下已找到的seaJs合并压缩的几种办法,让中坑的人尽快脱坑。

第一种:

在seaJs的官网上有他自带的一个seajs-combo插件。看似不错,和minify差不多。这种方法比较简单粗暴:下载个JS文件引用到页面,就可以用了。

第二种:

用gulp合并压缩seaJs模块,这种逼格相对高一些(如不能装逼那和咸鱼有什么区别~)。

用gulp合并压缩seaJs,在网上也有很多相关的模块。试过很多模块,但真正适合用的却不多。我们先讲合并这块:gulp-seajs-combogulp-seajs-combine 这两个好用易学的模块。下面讲下这两个模块都适用于什么文件结构。

gulp-seajs-combo:

gulp应用——

技术分享

 文件结构——主件a.js,调用文件b.js\c.js\d.js(d.js是按需加载):

技术分享

如果在没有合并之前页面调用a.js是可以正常使用的。但是合并之后的dist/js下的a.js是否可以正常使用呢?我们来看下合并过后的a.js文件:

技术分享

很好,文件:a.js\b.js\c.js已经合并在同一个文件里,并自动给其按路径命名了id。但是页面在调用a.js文件的时候却不能正常使用。这是因为这些模块都在同一个文件内,seaJs不知道该运行哪一个模块了。如果我们在这个文件后面加上seajs.use("a"),这里就可以正常使用了。(这种办法是很挫,但不失为一个方法。)ok,这里应该有人会说,那我们在a.js文件加个seajs.use("a");这句不就行了嘛。这个主意不错,我们可以测试一下:

技术分享

在gulp jscombo时发现一个错误:错误内容为a.js文件不能找到,因为打包的本身是a.js文件,在a.js文件里在引用a.js文件当然是不能找到了。如图:

技术分享

那么运行的结果是什么呢?a.js文件被多复制一份出来,虽然页面上是有了seajs.use(‘a‘);但是b.js\c.js文件并没有合并进来,这时通常我们会说:然而这并没有什么卵用!

技术分享

那么正确的使用方法应该是怎么样的呢?这时需要一个入口文件,来告诉它文件第一个运行的是什么模块,但这个入口又不能写在自身模块当中。于是就有了main.js这个入口文件。
先修改下gulp配置,把打包合并的路径指向main.js
技术分享
main.js这么写
技术分享
运行下gulp jscombo看下结果
技术分享
完美!此时页面引用combo里的main.js能正常的使用。看到这里不知你是否学会了用 gulp-seajs-combo合并你的seaJs了呢?
gulp-seajs-combo 要求入口文件与主体文件分离,在一些已经成型的项目上已经有N多的JS文件,线上的打包与线下的开发版本路径要相对应该的匹配进去目录路径切换才好进行切换测试。例如一个站点:
技术分享
如果我们在添加一个root的入口文件并要改动原页面引用的js名,那不是大大的增加自己的劳动量吗?这个劳动并不光荣,而是在自残~(感情我这是在作死啊……)。那怎么办呢?
这时gulp-seajs-combine就闪亮的登场了。
gulp-seajs-combine
gulp应用——

 技术分享

 文件结构——主件a.js,调用文件b.js\c.js\d.js(d.js是按需加载):

技术分享

想必各位已经注意到了,没错。就是把入口写在自身文件中。那么我们来运行一下jscombine压缩出来的结果是怎么样的呢?我们来看下

技术分享

哈哈哈,颤抖吧。这时我们只需要把线下的路径设置为src文件夹,线上的路径为dist文件夹就可以达到线上与线下同步,只需要切换配置路径就可以回来测试了。

看到这里,大家应该知道如何把自己的seaJs项目进行合并了吧。

致于压缩这块呢,可以用gulp-uglify这个模块可以和(gulp-seajs-combogulp-seajs-combine)一起使用:

技术分享

技术分享

那么合并压缩后的最终结果是这样的:

技术分享

使用gulp-uglify要记得排除混淆关键字,不然会把seaJs的‘require‘, ‘exports‘, ‘module‘也给混淆了,这样会让文件报错运行不了的哦。

关于用gulp合并压缩seaJs模块

标签:

原文地址:http://www.cnblogs.com/gcjun/p/5220014.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!