構建工具：具有多個組件的Coffeescript/Node項目

Question

我在工作中開始一個項目，並想知道使用哪種最佳構建工具。

整個事情是寫在CoffeeScript中，使用的客戶端和針對的NodeJS服務器AngularJS。

有幾個組件來應用：

• iPad程序
• iPhone應用程序（從ipad的不同的功能）
• 甲CMS的應用
• 甲的NodeJS服務器

所有這些之間都有大量的共享代碼，全部都是用CoffeeScript編寫的。

我想構建工具，我可以列出該應用程序使用哪些代碼（大部分是共享的），它會建立每個應用程序的JavaScript文件到一個單獨的文件夾。

例如，我將設置一個名爲'/ compiled/ipad /'的文件夾，其中包含index.html，以及js，css，img等的文件夾。我將列出要編譯/編譯的咖啡文件/ ipad/js（其中一些來自/src/shared/*.coffee，一些來自/src/ipad/*.coffee等）以及我想要將哪些文件引入/ compiled/ipad/css。我希望它能夠輕鬆地連接文件，我也想要。

它也將編譯我的測試中，從/ src目錄/測試/ iPad變成/compiled/test/ipad/*.js。

我所有的客戶端單元測試是使用testacular寫的，我不知道我會在還沒有寫服務器端單元測試。

什麼構建工具/配置是最好的方法？一個Makefile？像Grunt的東西？我是整個構建場景的新手。

編輯：決定去Browserify。你可以找到我的解決方案，使其與角在這裏工作：https://groups.google.com/forum/#!topic/angular/ytoVaikOcCs

Answer 1

我會把所有的共享代碼到Node.js的模塊，並創建一個項目，看起來像下面這樣：

Project 
|~apps/ 
| |~cms/ 
| | `-app.js 
| |~ipad/ 
| | `-app.js 
| |~iphone/ 
| | `-app.js 
| `~node/ 
| `-app.js 
|~libs/ 
| |-module.js 
| `-module2.js 
|~specs/ 
| |~cms/ 
| | `-app.js 
| |~ipad/ 
| | `-app.js 
| |~iphone/ 
| | `-app.js 
| `~node/ 
| `-app.js 
| `~libs/ 
| |-module.js 
| `-module2.js 
`-Makefile 

然後我會使用類似Browserify（還有其他的），使在需要的客戶端應用程序。這樣，而不是有一個構建文件，你說你需要你實際上有真正的應用程序導入模塊。

Answer 2

我個人認爲寫的驅動服務器端代碼中的JavaScript或CoffeeScript中延伸到你的編譯工具鏈，以及：與使用JavaScript/CoffeeScript中有太多這樣堅持下去。這將允許你輕鬆地從你的構建工具中自動執行你的服務器/客戶端任務 - 我懷疑它是否可以使用另一個工具如make（你只需要編寫node.js命令調用的包裝器）。建議，按結構化排序：

• node.js：只需將您的構建腳本轉換爲javascript，然後使用節點調用它們即可。類似於shell腳本，我想。我不推薦這條路線。
• jake或cake：我從Java世界來的，所以它不是令人驚訝的是，這些有點讓我想起了螞蟻。我更喜歡咖啡，因此更喜歡蛋糕。
• grunt：我之前沒有聽說過這個，所以我不能給出太多建議。它讓我想起了maven，當然......並且我可以說......構建工具越傾向於執行的結構越不靈活。這是一種折衷。只要你這樣做'構建工具'的方式，你可以節省大量的時間。但是，如果你有特定的應用程序問題，解決這個問題可能是一個極大的難題。

當然，你也可以用一些其他的構建工具去，你已經熟悉了一些其他語言：耙，行家，螞蟻，gradle產出，等等等等

Answer 3

我根據需要使用節點模塊在Cakefile中完成了幾乎所有的事情。

設置一些全局變量，這些變量是包含每個文件路徑的數組，將這些文件連接到您指定的編譯目錄中的文件中，然後將該文件編譯爲js。

對於樣式，很明顯，與沒有編譯的連接相同。

fs = require 'fs' 
path = require 'path' 
{spawn, exec} = require 'child_process' 
parser = require('uglify-js').parser 
uglify = require('uglify-js').uglify 
cleanCss = require 'clean-css' 

coffees = 
[ 
    "/src/shared/file1.coffee" 
    "/src/shared/file2.coffee" 
    "/src/ipad/file1.coffee" 
] 

tests = 
    [ 
    "/src/ipad/tests.coffee" 
    ] 

styles = 
[ 
    "/src/ipad/styles1.css" 
    "/src/shared/styles2.css" 
] 

concatenate = (destinationFile, files, type) -> 
    newContents = new Array 
    remaining = files.length 
    for file, index in files then do (file, index) -> 
     fs.readFile file, 'utf8', (err, fileContents) -> 
      throw err if err 
      newContents[index] = fileContents 
      if --remaining is 0 
       fs.writeFile destinationFile, newContents.join '\n\n', 'utf8', (err) -> 
       throw err if err 
       if type is 'styles' 
       minifyCss fileName 
       else 
       compileCoffee fileName 


compileCoffee = (file) -> 
    exec "coffee -C#{file}", (err) -> 
     throw err if err 
     # delete coffee file leaving only js 
     fs.unlink 'path/specifying/compiled_coffee', (err) -> 
      throw err if err 
      minifyJs file 

minifyJs = (file) -> 
    fs.readFile f, 'utf8', (err, contents) -> 
     ast = parser.parse contents 
     ast = uglify.ast_mangle ast 
     ast = uglify.ast_squeeze ast 
     minified = uglify.gen_code ast 

     writeMinified file, minified 

writeMinified = (file, contents) -> 
    fs.writeFile file, contents, 'utf8', (err) -> throw err if err 


minifyCss = (file) -> 
    fs.readFile file, 'utf8', (err, contents) -> 
    throw err if err 
    minimized = cleanCss.process contents 
    clean = minimized.replace 'app/assets', '' 

    fs.writeFile file, clean, 'utf8', (err) -> 
     throw err if err 


task 'compile_coffees', 'concat, compile, and minify coffees', -> 
    concatenate '/compiled/ipad/code.coffee', coffees, 'coffee' 

task 'concat_styles', 'concat and minify styles', -> 
    concatenate '/compiled/ipad/css/styles.css', styles, 'styles' 

task 'compile_tests', 'concat, compile, and minify test', -> 
    concatenate '/compiled/ipad/tests.coffee', tests, 'tests' 

現在這大致是我認爲你所要求的。

肯定會更漂亮，尤其是有一個單獨的函數來編寫縮小的內容，但它的工作原理。

不完美的風格，因爲我使用薩斯和其他功能之前，它擊中縮小功能，但我認爲你明白了。