我正在开始一个工作项目,并想知道最好的构建工具是什么。
整个过程都是用CoffeeScript编写的,使用AngularJS作为客户端,NodeJS作为服务器。
该应用程序有几个组件:
所有这些之间有大量的共享代码,所有这些代码都是用CoffeeScript编写的。
我想要一个构建工具,我可以列出哪个应用程序使用了哪些代码(大部分共享),并将每个应用程序的javascript文件构建到一个单独的文件夹中。
例如,我会设置一个名为'/ compiled / ipad /'的文件夹,其中包含index.html,以及js,css,img等文件夹。我会列出我想要扔进/编译的编译咖啡文件ipad / js(其中一些来自/src/shared/*.coffee,其中一些来自/src/ipad/*.coffee等)以及我想要扔进/ compiled / ipad / css的文件。我希望它能够轻松地将文件连接到我想要的地方。
它还会编译我的测试,从/ src / test / ipad到/ compiled / test / ipad / * .js。
我的所有客户端单元测试都是使用testacular编写的,我不知道我还要编写服务器端单元测试的内容。
什么构建工具/配置是最好的方法?一个Makefile?像Grunt这样的东西?老实说,我对整个构建场景都很陌生。
编辑:决定使用Browserify。您可以在此处找到我的解决方案,使其适用于Angular:https://groups.google.com/forum/#!topic/angular/ytoVaikOcCs
答案 0 :(得分:4)
就我个人而言,我认为在javascript或coffeescript中编写服务器端代码的驱动力也扩展到了你的构建工具链:所以坚持使用javascript / coffeescript。这将允许您从构建工具轻松自动化您的服务器/客户端任务 - 我怀疑使用另一个工具(如make)(您只是在node.js命令调用周围编写包装器)是否有意义。建议,按结构化顺序排列:
当然,您可以使用其他语言熟悉的其他构建工具:rake,maven,ant,gradle等。
答案 1 :(得分:4)
我根据需要使用节点模块在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'
现在这大致是我认为你要求的。
绝对可以更漂亮,特别是有一个单独的函数来编写缩小的内容,但它可以工作。
对于样式来说并不完美,因为我使用Sass并且在它达到缩小功能之前还有其他功能,但我认为你明白了。
答案 2 :(得分:3)
我会将所有共享代码放入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(还有其他人)这样的东西来制作客户端应用程序。这样,而不是有一个构建文件,你说你需要什么,你实际上有真正的应用程序导入模块。