如何将JavaScript文件连接成一个文件?

我想为我的网站创build一个编译的JavaScript文件。 对于开发,我宁愿将JavaScript保存在单独的文件中,只是将自动化脚本的一部分连接成一个文件并在其上运行压缩器。

我的问题是,如果我使用旧的DOS复制命令,它也会放入压缩机抱怨的EOF标记:

复制/ A * .js compiled.js / Y

其他人在做什么?

我推荐使用Apache Ant和YUI Compressor。

http://ant.apache.org/

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的东西)
  • 以开发模式发送原始文件

你的需求可能太多了,但是为了回答你的问题,其他人做了什么,下面是它的工作原理:

  1. 请求来自/css.aspx?package=core
  2. 我们在xmlconfiguration文件(例如声明包“core”包含文件/js/mootools.js和/js/swfobject.js)中查找包名,
  3. 我们检查是否启用缩小。 例如,在开发环境中,我们不希望缩小的js内容被提供,而是写入原始文件。 对于JS来说,这是由document.writes脚本包含的,而对于css我们写入导入规则。
  4. 如果需要缩小(在生产环境中),我们检查来自请求的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,但我使用/打包机/

http://johannburkard.de/blog/programming/javascript/automate-javascript-compression-with-yui-compressor-and-packer.html

对我来说真是太棒了

你也可以尝试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> 

免责声明:我是这个项目的提交者。