问题 构建工具:具有多个组件的Coffeescript / Node项目


我正在开始一个工作项目,并想知道最好的构建工具是什么。

整个过程都是用CoffeeScript编写的,使用AngularJS作为客户端,NodeJS作为服务器。

该应用有几个组件:

  • 一个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 / test / ipad到/compiled/test/ipad/*.js。

我所有的客户端单元测试都是使用 testacular 而且我不确定我还会写什么服务器端单元测试。

什么构建工具/配置是最好的方法?一个Makefile?像Grunt这样的东西?我老实说是整个构建场景的新手。

编辑:决定使用Browserify。你可以在这里找到我的解决方案,使其适用于Angular: https://groups.google.com/forum/#!topic/angular/ytoVaikOcCs


8742
2018-05-21 16:43


起源

+1。很棒的问题,我以前从未听说过AngularJS。它看起来很棒。 - Jivings


答案:


我将所有共享代码放入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(还有其他人)这样的东西来制作客户端应用程序。这样,而不是有一个构建文件,你说你需要什么,你实际上有真正的应用程序导入模块。


3
2018-05-21 17:58



还注意到我说浏览器而不是browserify。 - Pickels
最后和browserify一起去了,谢谢。 :-)。您可以看到我在主帖子的编辑中如何使其工作。 - Andrew Joslin


我个人认为用javascript或coffeescript编写服务器端代码的驱动器也扩展到你的构建工具链:所以坚持使用javascript / coffeescript。这将允许您从构建工具轻松自动化您的服务器/客户端任务 - 我怀疑使用像make这样的另一个工具是否有意义(您只需要编写有关node.js命令调用的包装器)。建议,按结构化顺序排列:

  • 的node.js :只需在javascript中滚动构建脚本,然后使用node调用它们。我想,类似于shell脚本。我不推荐这条路线。
  • 可靠的人 要么 蛋糕 :我来自java世界,所以这些让我想起蚂蚁并不奇怪。我更喜欢咖啡,因此更喜欢蛋糕。
  • 咕噜 :我之前没有听说过这个,所以我不能给出太多建议。它让我想起了maven,当然......我只能说......构建工具越容易强制执行灵活性越低。这是一种权衡。只要您使用“构建工具”方式,就可以节省大量时间。但是,如果您有应用程序特定的问题,解决可能是一个皇家的痛苦。

当然,您可以使用其他语言熟悉的其他构建工具:rake,maven,ant,gradle等。


4
2018-05-21 17:43





我根据需要使用节点模块在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并且在它达到缩小功能之前有其他功能,但我认为你明白了。


4
2018-05-21 18:27