如何将JavaScript文件连接成一个文件?
我想为我的网站创build一个编译的JavaScript文件。 对于开发,我宁愿将JavaScript保存在单独的文件中,只是将自动化脚本的一部分连接成一个文件并在其上运行压缩器。
我的问题是,如果我使用旧的DOS复制命令,它也会放入压缩机抱怨的EOF标记:
复制/ A * .js compiled.js / Y
其他人在做什么?
我推荐使用Apache Ant和YUI Compressor。
http://yui.github.com/yuicompressor/
把这样的东西放在Ant build xml中。 它将创build两个文件,application.js和application-min.js。
<target name="concatenate" description="Concatenate all js files"> <concat destfile="build/application.js"> <fileset dir="src/js" includes="*.js" /> </concat> </target> <target name="compress" depends="concatenate" description="Compress application.js to application-min.js"> <apply executable="java" parallel="false"> <filelist dir="build" files="application.js" /> <arg line="-jar" /> <arg path="path/to/yuicompressor-2.4.2.jar" /> <srcfile /> <arg line="-o" /> <mapper type="glob" from="*.js" to="build/*-min.js" /> <targetfile /> </apply> </target>
不使用EOF复制使用二进制模式:
copy /B *.js compiled.js /Y
如果生成的文件仍然具有EOF,这可能来自原始文件之一,则可以通过此变体修复该文件:
copy /A *.js compiled.js /B /Y
/ A从原始文件中删除结尾的EOF,如果有的话和/ B阻止将EOF附加到结果文件。 如果EOF不在最后,源文件将被截断。 开关顺序很重要。 如果你写
copy /A *.js /B compiled.js /Y
– 源文件中的EOF不会被删除,但仍然会导致EOF不会被追加。
试试吧,那是我得到它的地方。 DOS命令很奇怪。
在asp.net AJAX中,你可以使用'CompositeScript'标签。 这将把你所有的脚本整合到一个大的js文件中,通过减lesshttp 304s和http 401s的数量来节省带宽。
样品:
<asp:ScriptManager ID="ScriptManager1" runat="server"> <CompositeScript> <Scripts> <asp:ScriptReference Path="~/Scripts/Script1.js" /> <asp:ScriptReference Path="~/Scripts/Script2.js" /> <asp:ScriptReference Path="~/Scripts/Script3.js" /> </Scripts> </CompositeScript> </asp:ScriptManager>
有关更多信息,请参阅: http : //msdn.microsoft.com/en-us/library/cc488552.aspx
我们已经创build了一个由以下部分组成的机制:
- minfication(用于js和css)
- 聚合包
- caching(http状态304的东西)
- 以开发模式发送原始文件
你的需求可能太多了,但是为了回答你的问题,其他人做了什么,下面是它的工作原理:
- 请求来自/css.aspx?package=core
- 我们在xmlconfiguration文件(例如声明包“core”包含文件/js/mootools.js和/js/swfobject.js)中查找包名,
- 我们检查是否启用缩小。 例如,在开发环境中,我们不希望缩小的js内容被提供,而是写入原始文件。 对于JS来说,这是由document.writes脚本包含的,而对于css我们写入导入规则。
- 如果需要缩小(在生产环境中),我们检查来自请求的if-modified-since标头。 如果这个客户端已经有了缩小的内容,我们发送http头304.如果客户端确实需要内容,我们检查是否已经缩小了caching中的内容并提供服务。 否则,我们会缩小并发送结果。
所有这些都在单独的服务中被打破。 在jsminificationwriter服务中注入了一个caching服务。 这利用了原来的缩servlets,只是照顾缩小规则。
这种方法有什么好处是:
- 它迫使我们的开发团队在js / css“包”中进行思考,因此正确地分解了function并将其分发到需要它们的页面上。
- 在开发过程中,您完全可以进行debugging,获取正确的文件和行号。
- 你可以挂接任何其他缩servlets实现,如YUI等。 JsMin只是我们的第一个要求。
- 这是适用于不同内容types的一般方法。
希望这可以帮助。 如果你喜欢,我可以发布一些代码片段来说明。
在您的机器上安装压缩机uglifyjs:
sudo npm -g install uglify-js
那么下面的命令可以用来连接和压缩所有的js文件。
cat myAppDir/*.js | uglifyjs > build/application.js
这是一个非常古老的问题,但我想提一下,也有方法来使用JavaScript连接javascript! 与nodejs显然…例如,有像这样的 npm模块发布的工具,也有grunt和gulp插件。
我也想提一个非常非常有趣的技术,正在jQuery和Modernizr等大型项目中使用。 这两个项目都完全用requirejs模块开发,然后他们使用requirejs优化器作为一个非常聪明的连接器。 有趣的是,正如你所看到的,jQuery和Modernizr都不需要在requirejs上工作,而这种情况的发生是因为他们为了摆脱requirejs代码而抹去了requirejs合成器的仪式。 所以他们最终得到了一个由requirejs模块开发的独立库。 由于这个原因,他们可以执行其他库优点,而且还可以执行其库的构build。 这是一个博客文章,更详细地解释了这一切。
你也可以这样做:
type *.js > compiled.js
我会第二个yuicompressor,但我使用/打包机/
对我来说真是太棒了
你也可以尝试wro4j (java的web资源优化器),它可以用作构build工具(maven插件),运行时解决scheme(使用filter)或命令行工具。 它使您可以轻松地保持资源的组织,并为您使用十几种压缩机处理bottypes的资源:js和css。
定义要合并的资源很容易,如下所示:
<groups xmlns="http://www.isdc.ro/wro"> <group name="all"> <css>/asset/*.css</css> <js>/asset/*.js</js> </group> </groups>
免责声明:我是这个项目的提交者。