Ferramenta de construção:Projeto Coffeescript/Node com múltiplos componentes

Question

Estou iniciando um projeto no trabalho e queria saber qual seria a melhor ferramenta de construção para usar.

Tudo é escrito em CoffeeScript, usando AngularJS para o lado do cliente e NodeJS para o servidor.

Existem vários componentes no aplicativo:

• Um aplicativo para iPad
• Um aplicativo para iPhone (funcionalidade diferente do iPad)
• Um CMS para os aplicativos
• Um servidor NodeJS

Há toneladas de código compartilhado entre todos eles, novamente todos escritos em CoffeeScript.

Eu gostaria de uma ferramenta de construção onde eu pudesse listar qual aplicativo usa qual código (muito dele compartilhado) e criaria os arquivos javascript de cada aplicativo em uma pasta separada.

Por exemplo, eu configuraria uma pasta chamada '/compiled/ipad/' que possui index.html e pastas para js, css, img, etc.Eu listaria quais arquivos de café compilados eu quero colocar em /compiled/ipad/js (alguns deles de /src/shared/*.coffee, alguns deles de /src/ipad/*.coffee, etc) e quais arquivos eu quero jogado em /compiled/ipad/css.Eu gostaria que ele também pudesse concatenar arquivos facilmente como eu quero.

Ele também compilaria meus testes, de /src/test/ipad para /compiled/test/ipad/*.js.

Todos os meus testes de unidade do lado do cliente são escritos usando testacular e ainda não tenho certeza sobre o que escreverei nos testes de unidade do lado do servidor.

Qual ferramenta/configuração de construção é a melhor abordagem aqui?Um Makefile?Algo como Grunt?Sinceramente, sou novo em todo o cenário de construção.

editar:Decidi ir com o Browserify.Você pode encontrar minha solução para fazê-lo funcionar com Angular aqui: https://groups.google.com/forum/#!topic/angular/ytoVaikOcCs

Answer 1

Eu colocaria todo o código compartilhado em módulos Node.js e criaria um projeto parecido com o seguinte:

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

Eu usaria então algo como o Browserify (existem outros) para criar os aplicativos do lado do cliente quando necessário.Dessa forma, em vez de ter um arquivo de construção onde você diz o que precisa, você realmente tem aplicativos reais importando módulos.

Answer 2

Pessoalmente, acho que a unidade para escrever o código do lado do servidor em JavaScript ou CoffeeScript se estende para a sua cadeia de ferramentas de construção também: então fique com o uso de JavaScript / CoffeeScript lá também. Isso permitirá que você automatize facilmente suas tarefas do servidor / cliente da sua ferramenta de construção - duvido que fosse significativamente possível com outra ferramenta como fazer (você estaria apenas escrevendo wrappers em torno de chamadas de comando node.js). Sugestões, ordenadas por Ness estruturado:

• node.js : basta rolar seus scripts de construção em JavaScript, e invocá-los com nó. Semelhante a scripts de shell, suponho. Eu não recomendo esta rota.
• Jake ou bolo : Eu sou do mundo java, então não é surpreendente que estes me lembrem de formiga. Eu prefiro Coffescript e, portanto, prefiro bolo.
• grunhido : Eu não tinha ouvido falar disso antes, então não posso dar muito conselhos. Isso me lembra de Maven, claro ... e eu posso apenas dizer ... Quanto mais estrutura uma ferramenta de construção tende a impor a menos flexível pode ser. É algo de um trade off. Contanto que você faça isso "a ferramenta de construção", você pode economizar toneladas de tempo. Mas se você tem problemas específicos do aplicativo, pode ser uma dor real para resolver.

Claro, você pode ir com alguma outra ferramenta de construção que você já está familiarizado de alguma outra língua: ancinho, maven, formiga, grada, etc etc.

Answer 3

Eu fiz quase exatamente isso em um Cakefile usando módulos de nó conforme necessário.

Defina algumas variáveis ​​globais que são matrizes com o caminho de cada arquivo, concatene esses arquivos em um arquivo no diretório compilado especificado e compile esse arquivo em js.

Para os estilos, a mesma coisa com a concatenação sem a compilação, obviamente.

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'

Agora, isso é aproximadamente o que acho que você está pedindo.

Definitivamente poderia ser mais bonito, especialmente tendo uma função separada para escrever o conteúdo reduzido, mas funciona.

Também não é perfeito para os estilos porque eu estava usando Sass e tinha outras funções antes de atingir a função minificada, mas acho que você entendeu.