使用CoffeeScript / Cake组合和缩小模板 [英] Combine and minify templates with CoffeeScript / Cake

问题描述

我有一个 src / templates / 目录中的胡子模板。

我已经按照的指示进行操作了， https://github.com/jashkenas/coffee-script/wiki/%5BHowTo%5D-Compiling-and-Setting-Up-Build-Tools =nofollow> https://github.com/jashkenas/

解决方案

首先，我假设你的模板被导出到全局对象（例如每个 window.userpane = 而不是 userpane = ）。这是最重要的事情。如果你这样做，并且你连接和编译成功，那么唯一剩下的就是每次连接后自动缩小。

简短的答案：您最好的选择是使用像

这样的行扩展您现有的Cakefile。

  fs.watchFile'c​​oncatenated.js'， - > 
 exec'uglifyjs concatenated.js'
  

（要安装UglifyJS ，运行 npm install uglify-js 。）

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

更新：这是一个Cake任务，用于实际读取和连接 template 目录：

  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。    注意，这假设模板中没有单引号（'）。在其前面放置反斜杠或始终使用双引号。
 
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?

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.
解决方案
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.

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'
(To install UglifyJS, run npm install uglify-js.)

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).

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}';"
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.

                        
这篇关于使用CoffeeScript / Cake组合和缩小模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！