javascript - 前端开发人员如何打包和缩小文件？

Question

在纯前端应用中缩小和捆绑 js/css 的最佳实践是什么？这些工具是如何工作的？

我知道如何使用 .NET/Java/LAMP/等服务器端应用程序完成此操作。但是现在使用 say、ember 或 angular 构建的纯前端元素、SPA 元素或后端元素呢？假设您的整个元素由 HTML/css/js 组成，它们与其他地方的 RESTful 服务接口(interface)。

您使用什么样的流程或工具来缩小和捆绑资源？

我见过为此存在的 grunt 插件，但我发现文档非常神奇，但我仍然不清楚它们是如何工作的。

具体而言，该工具:

1) 将 src="/js/a.js",src="/js/b.js"替换为 src="/js/bundle-a+b.min.js"？ (和 css 一样？)在源 html 文件中？

2) 开发和发布有不同的模式，还是该工具仅在元素发布时运行？

或者资源请求是否完全由 js 工具管理，而 js/css 文件必须通过库函数请求？在这种情况下，延迟不会很明显吗？

谢谢。

Answer 1

通过使用构建工具，前端开发人员可以在开发时自动缩小 javascript、css 甚至图像和 html 文件。最常见的是咕噜声，紧随其后。

您配置 grunt 任务，例如 grunt-contrib-uglify和 grunt-contrib-copy ，并将这些任务放在 grunt-contrib-watch 下任务。让 grunt watch 任务监视您修改的文件，每次检测到更改时，这些 .min 文件都会自动生成。

这些构建工具对您的应用程序没有影响，它们在文件被服务器之前运行。您假设有一种简单的方法可以做到这一点是正确的。我建议你看看grunt getting started , 一个 sample gruntfile ，或使用 grunt 的元素 - here's mine ，它会按照您的要求进行缩小。克隆我的存储库，运行 sudo npm install，然后运行 ​​sudo grunt。我的元素中没有设置 watch，但是 grunt 有很好的文档记录。