使用 CoffeeScript/Cake 组合和缩小模板

问题描述

我有一个 src/templates/ 目录，里面装满了小胡子模板.我将如何组合和缩小这些内容，以便在我的 CoffeeScript 应用程序中使用它们?

I have a src/templates/ directory full of mustache templates. How would I combine and minify the contents of those, so they're available for use in my CoffeeScript app?

我已经按照 https://github.com/jashkenas/coffee-script/wiki/%5BHowTo%5D-Compiling-and-Setting-Up-Build-Tools 用于将我的 CoffeeScript src 合并并缩小为 js.

I'm already following the directions at https://github.com/jashkenas/coffee-script/wiki/%5BHowTo%5D-Compiling-and-Setting-Up-Build-Tools for combining and minifying my CoffeeScript src into js.

推荐答案

首先，我假设您的模板正在被导出到全局对象(例如，每个模板都执行 window.userpane =而不仅仅是 userpane =).这是最重要的.如果你这样做了，并且你连接和编译成功，那么唯一剩下的就是在每次连接后自动缩小.

First off, I'll assume that your templates are being exported to the global object (e.g. each one does window.userpane = rather than just userpane =). That's the most important thing. If you're doing that, and you're concatenating and compiling successfully, then the only thing left is to have automatic minification after each concatenation.

简短的回答:目前还没有很好的工具.最好的选择是使用类似的行扩展现有的 Cakefile

Short answer: There's no good tool for this yet. Your best option is to extend your existing Cakefile with a line like

fs.watchFile 'concatenated.js', ->
  exec 'uglifyjs concatenated.js'

(要安装 UglifyJS，请运行 npm install uglify-js.)

(To install UglifyJS, run npm install uglify-js.)

现在，这并不能解决确保脚本以合理顺序连接的问题.(例如，如果您在文件 A 中有 window.templates = {}，在文件 B 中有 templates.userpane =，那么在文件 A 之前连接文件非常重要B.) 为此，您应该关注 Sprockets，它可以让您在每个 JS 文件的顶部指出其依赖项是什么，然后按照尊重这些依赖关系的顺序组合它们.Sprockets 的创建者 Sam Stephenson 是 CoffeeScript 社区的活跃成员，Sprockets 中对 CoffeeScript 的一流支持将在 Sprockets 2 (repo 这里).

Now, this won't solve the problem of ensuring that your scripts are concatenated in a sensible order. (For instance, if you have window.templates = {} in file A and templates.userpane = in file B, then it's very important that file A be concatenated before file B.) For that, you should keep an eye on Sprockets, which lets you indicate at the top of each JS file what its dependencies are, then combine them in an order that respects those dependencies. The creator of Sprockets, Sam Stephenson, is an active member of the CoffeeScript community, and first-class support for CoffeeScript in Sprockets is coming in Sprockets 2 (repo here).

更新:这是一个 Cake 任务，用于实际读取和连接 template 目录中的所有内容:

Update: Here's a Cake task to do the actual reading and concatenating of everything in the template directory:

templateJs = ''
files = fs.readdirSync 'template'
for file in files
  contents = fs.readFileSync file, 'utf8'
  name = file.replace /..*/, '' # remove extension
  templateJs += "window.#{name} = '#{contents}';"

然后用 templateJs 在你的串联 JS 前添加.请注意，这假定模板中没有单引号 (').要么在它们前面加上反斜杠，要么始终使用双引号.

Then prepend your concatenated JS with templateJs. Note that this assumes that there are no single quotes (') in the template. Either put backslashes in front of them or consistently use double quotes.