在这个视频中,我们将把代码恢复到一个正常的文本编辑器,就像我们开始一样。在“真实世界”情况下,这些情况都是正确的
- 您需要将您的 JavaScript 分成尽可能多的子文件。就像我们将 JavaScript 代码分成小的、易于理解的函数一样,我们也可以对文件进行同样的操作。请记住 var
Movies = { };
这个对象可能就是它自己的文件。 - 这些较小的文件应该被连接(组合成一个文件)并压缩(通过一个最小化系统运行,以去除空格,甚至重写变量等,以减小最终的文件大小)。
连接和压缩的任务非常普遍,无论您的工作流程是什么,可能都有一个工具可以帮助您完成这些任务。
CodeKit 是一款适用于 Mac 的软件,可以帮助您完成这些任务。

您可以让 CodeKit 监控您的整个项目文件夹。它会找到其中的 JavaScript 文件(以 .js 结尾的文件,或者如果您更喜欢用 CoffeeScript 编写,则以 .coffee 结尾的文件)。在“脚本”选项卡下,它会列出所有文件。您可以点击其中一个文件,然后选择当该文件被修改和保存(通过任何文本编辑器)时要执行的操作。
在上面的屏幕截图中,您可以看到在 CSS-Tricks 本身,我有一个 global.js
文件,它导入了许多其他文件(依赖项)。当该文件被修改/保存时,它会通过 JS Hint 进行检查,然后依赖项会根据指定的方式被追加或预置,最后生成最终文件(global-ck.js
)并进行最小化。很酷吧!
您可以直接通过 CodeKit UI 管理这些依赖项,但最好还是通过 JS 文件本身的代码注释进行管理。
// put BEFORE the rest of the code in this file
// @codekit-prepend "jquery.markitup.js"
// put AFTER the rest of the code in this file
// @codekit-append "prism.js"
然后,您可以在 HTML 中链接 -ck.js
版本的 JavaScript。
如果您不是在 Mac 上呢?您可以搜索 Google 寻找替代方案。我在这里链接了一些,但这个领域一直在不断变化。我知道肯定有一些工具复制了 CodeKit 的外观和功能,但它们可以在跨浏览器环境中使用,并且是开源的。
假设您的项目是 Ruby on Rails。Rails 有 Asset Pipeline,它也能为您完成这些任务。
就像 CodeKit 有特殊格式的注释来让它知道依赖项是什么一样,Asset Pipeline 也有。
//= require libs/jquery.js
//= require common/love.js
var MyObject = {
// yadda yadaa
}
然后,您可以从模板中链接该 JavaScript 文件,例如
<%= javascript_include_tag "admin/admin.js" %>
我认为这是一个非常棒的系统。原因有几个。一个是在开发过程中,文件会保持分离,这对于在 DevTools 中进行调试非常有用。另一个是在部署后,文件会在文件名中包含缓存清除字符串,如果您要 使用远期过期标头 进行良好缓存,这是很重要的一步。
<script src="//assets.yoursite.com/assets/common/everypage-f2a6e496508e79e40a7f0ac730e91270.js" type="text/javascript"></script>
当然,这并不是唯一的两种选择。可能还有无数种方法可以做到这一点。现在,另一种非常流行的技术是 Grunt。
您可以使用 grunt-contrib-concat 和 grunt-contrib-uglify 来完成这些“任务”。
这是一个示例 Gruntfile.js,它会将一个包含库依赖项和 global.js 文件的文件夹连接并最小化到一个 production.min.js 文件中
module.exports = function(grunt) {
grunt.initConfig({
concat: {
dist: {
src: [
'js/libs/*.js',
'js/global.js'
],
dest: 'js/build/production.js',
}
},
uglify: {
build: {
src: 'js/build/production.js',
dest: 'js/build/production.min.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat', 'uglify']);
};
然后,只需在项目文件夹的命令行中输入“grunt”,就会完成这个操作。正如您可能预料的那样,Grunt 可以做得更复杂。这将留到以后再讨论!
我已经为你们(那些有下载权限的人)准备了一个示例项目,这样你们就可以通过它来了解 Grunt 是如何工作的。先决条件
然后,您可以尝试运行 grunt
命令并查看它是否正常工作。
这个视频不是高清的吗?
我会尝试重新导出和重新上传。
还是不是高清?很难看清楚。不过,这个系列非常棒。谢谢!
有没有可能把它做成高清的?
现在正在重新上传。抱歉。我有一个高清版本,如果所有方法都失败了,我会直接链接它。
我认为已经修复了。