#29: 准备上线

在这个视频中，我们将把代码恢复到一个正常的文本编辑器，就像我们开始一样。在“真实世界”情况下，这些情况都是正确的

1. 您需要将您的 JavaScript 分成尽可能多的子文件。就像我们将 JavaScript 代码分成小的、易于理解的函数一样，我们也可以对文件进行同样的操作。请记住 var Movies = { }; 这个对象可能就是它自己的文件。
2. 这些较小的文件应该被连接（组合成一个文件）并压缩（通过一个最小化系统运行，以去除空格，甚至重写变量等，以减小最终的文件大小）。

连接和压缩的任务非常普遍，无论您的工作流程是什么，可能都有一个工具可以帮助您完成这些任务。

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 是如何工作的。先决条件

• 已安装 Node
• 已安装 Grunt-CLI
• 在终端中，在这个目录下运行 npm install

然后，您可以尝试运行 grunt 命令并查看它是否正常工作。