37

我想为我的网站创建一个编译好的 JavaScript 文件。对于开发，我更愿意将 JavaScript 保存在单独的文件中，并且作为我的自动化脚本的一部分，将文件连接成一个文件并在其上运行压缩器。

我的问题是，如果我使用旧的 DOS 复制命令，它还会放入压缩器抱怨的 EOF 标记：

复制 /A *.js 编译的.js /Y

其他人在做什么？

4

10 回答 10

35

我推荐使用 Apache Ant 和 YUI Compressor。

http://ant.apache.org/

http://yui.github.com/yuicompressor/

在 Ant 构建 xml 中放置类似的内容。它将创建两个文件，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>
于 2008-11-19T12:44:45.503 回答
11

要不使用 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命令很奇怪。

于 2008-11-19T10:32:34.723 回答
6

在 asp.net AJAX 中，您可以使用“CompositeScript”标签。这会将您的所有脚本合并为 1 个大 js 文件，通过减少 http 304 和可能的 http 401 的数量来节省带宽。

样本：

 <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

于 2009-07-10T19:42:57.913 回答
6

这是一个非常古老的问题，但我想提一下，还有一些方法可以使用 javascript 连接 javascript！显然使用 nodejs ......例如，有一些工具发布为像 这样的 npm 模块，也有grunt和gulp插件。

我还想提一个非常非常有趣的技术，它被用于像 jQuery 和 Modernizr 这样的大型项目中。这两个项目都是完全使用 requirejs 模块开发的，然后他们使用requirejs 优化器作为一个非常智能的连接器。有趣的是，正如您所见，jQuery 和 Modernizr 都不需要 requirejs 才能工作，这是因为它们删除了 requirejs 语法仪式，以便在代码中摆脱 requirejs。所以他们最终得到了一个使用 requirejs 模块开发的独立库！多亏了这一点，他们能够执行库的 cutsom 构建，以及其他优势。这是一篇博客文章，更详细地解释了所有这些。

于 2014-11-27T01:42:28.053 回答
5

在你的机器上安装压缩器 uglifyjs：

sudo npm -g install uglify-js

那么下面的命令就可以用来拼接和压缩所有的js文件了。

cat myAppDir/*.js | uglifyjs > build/application.js
于 2014-07-14T05:11:33.143 回答
4

我们创建了一个由以下部分组成的机制：

  • minfication（用于 js 和 css）
  • 包中的聚合
  • 缓存（http 状态 304 的东西）
  • 在开发模式下发送原始文件

它可能对您的需求来说太多了，但至于回答您的问题，其他人会做什么，这是它的工作原理：

  1. 例如，/css.aspx?package=core 处有一个请求
  2. 我们在 xml 配置文件中查找包名（例如声明包“核心”包含文件 /js/mootools.js 和 /js/swfobject.js）
  3. 我们检查是否启用了缩小。例如，在开发环境中，我们不希望提供缩小的 js 内容，而是编写原始文件。对于 js，这是通过包含脚本的 document.writes 来完成的，对于 css，我们编写导入规则。
  4. 如果需要缩小（在生产环境中），我们会检查请求中的 if-modified-since 标头。如果这个客户端已经有了缩小的内容，我们发送 http 头 304。如果客户端确实需要这些内容，我们检查缓存中是否有缩小的内容并提供它。否则，我们缩小并发送结果。

所有这些都分解为单独的服务。jsminificationwriter 服务中注入了缓存服务。这利用了仅处理缩小规则的原始缩小服务。

这种方法的好处是：

  • 它迫使我们的开发团队考虑 js/css “包”，因此正确地拆分功能并将它们分发到需要它们的页面上。
  • 在开发过程中，您完全能够调试，获得正确的文件和行号。
  • 您可以连接任何其他缩小服务实现，例如 YUI 等。JsMin 只是我们的第一次拍摄。
  • 这是一种适用于不同内容类型的通用方法。

希望这可以帮助。如果您愿意，我可以发布一些代码片段来进行更多说明。

于 2008-11-19T10:48:59.137 回答
3

你也可以这样做：

type *.js > compiled.js
于 2008-11-19T11:39:19.847 回答
3

我将使用第二个 yuicompressor，但我使用 /packer/

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

这对我来说真的很棒。

于 2008-11-19T12:51:02.353 回答
0

你也可以试试wro4j（java 的 web 资源优化器），它可以用作构建工具（maven 插件）、运行时解决方案（使用过滤器）或命令行工具。它允许您使用十几个用于机器人类型资源的压缩器轻松组织资源并为您处理合并：js 和 css。

定义要合并的资源很简单：

<groups xmlns="http://www.isdc.ro/wro">
  <group name="all">
    <css>/asset/*.css</css>
    <js>/asset/*.js</js>
  </group>
</groups>

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

于 2011-09-09T17:41:19.923 回答
0

我知道这是一个非常古老的问题，但为了完整起见，我会提到使用Browserify的选项。它允许您使用 NPM 的require函数将项目构建为不同的模块来解决依赖关系，然后它会解析这些依赖关系并将整个项目连接到一个文件中。

例如，假设您的项目名为FooBar，并且您想要输出一个名为foobar.js. 您将创建一个main.js文件作为项目的入口点，需要所有应包含的模块。

main.js

require("./doFoo");
require("./doBar");

然后运行：

browserify main.js -o foobar.js

或者，要在每次源文件更改时自动执行此操作，您也可以使用Watchify。

watchify main.js -o foobar.js

Browserify 还将解决模块之间的依赖关系。例如，如果 doBar.js 依赖于doQux.js...

doBar.js

require("./doQux");
const doBar = ()=>{
    //Do some bar stuff.
}
exports.doBar = doBar;

然后 Browserify 将确保包含doQux.js到foobar.js，这样您就不会有任何损坏的依赖项。

于 2020-01-28T09:20:18.567 回答