Tool di Build:Coffeescript/Nodo di progetto con più componenti
-
12-12-2019 - |
Domanda
Sto iniziando un progetto di lavoro e chiedevo qual'è il miglior tool di build da utilizzare sarebbe.
Il tutto è scritto in CoffeeScript, utilizzando AngularJS per il lato client e NodeJS per il server.
Ci sono parecchi componenti app:
- Un'app per iPad
- Un'app per iPhone (funzionalità diverse da ipad)
- Un CMS per la app
- Un NodeJS server
Ci sono tonnellate di codice condiviso tra tutti questi, di nuovo, tutto scritto in CoffeeScript.
Mi piacerebbe un tool di build dove posso elenco di app che utilizza il tipo di codice che è molto comune) e che sarebbe costruire ogni app file javascript in una cartella separata.
Per esempio, vorrei impostare una cartella chiamata '/compilato/ipad/' che ha index.html e le cartelle per js, css, img, etc.Vorrei fare un elenco di cosa compilato caffè file voglio gettato in /compilato/ipad/js (dal /src/shared/*.caffè, alcune delle quali provenienti da /src/ipad/*.caffè, ecc) e dai file che voglio gettato in /compilato/ipad/css.Vorrei essere facilmente in grado di concatenare i file come voglio, troppo.
Sarebbe anche compilare il mio test da /src/test/ipad /compilato/test/ipad/*.js.
Tutti i miei client-side unit test sono scritti utilizzando testacular e io non sono sicuro di quello che scriverò server-side unit test di sicurezza.
Quale strumento di creazione/configurazione è l'approccio migliore qui?Un Makefile?Qualcosa di simile a Grunt?Io sono onestamente nuovo a tutta la build scena.
modifica:Ha deciso di andare con Browserify.Potete trovare la mia soluzione per farlo funzionare con Angolare qui: https://groups.google.com/forum/#!argomento/angolare/ytoVaikOcCs
Soluzione
Vorrei mettere tutto il codice condiviso in Node.js moduli e creare un progetto che sembra qualcosa di simile al seguente:
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
Vorrei quindi usare qualcosa come Browserify (ce ne sono altri) per rendere il lato client di applicazioni dove è necessario.In questo modo invece di avere un file di build in cui dici di che cosa avete bisogno è effettivamente reale apps importazione di moduli.
Altri suggerimenti
Personalmente credo che l'unità di scrivere codice server in javascript o coffeescript si estende per il vostro strumento di generazione catena:così bastone con l'utilizzo di javascript/coffeescript anche lì.Questo vi permetterà di automatizzare facilmente il vostro server/client attività dal tool di build - dubito che sarebbe significativamente possibile con un altro strumento come fare (devi solo essere iscritto wrapper intorno node.js comando chiama).Suggerimenti, ordinate per strutturata-ness:
- node.js :Basta arrotolare il tuo script in javascript, e richiamarli con un nodo.Simile per gli script di shell, suppongo.Io non consiglio questo percorso.
- jake o torta :Io vengo dal mondo java, quindi non è sorprendente che questi un pò mi ricordano ant.Io preferisco coffeescript, e quindi preferiscono torta.
- grunt :Non avevo sentito parlare di questo prima, quindi non posso dare molti consigli.Mi ricorda maven, ovviamente...e posso solo dire...la struttura più uno strumento di creazione tende ad imporre il meno flessibile che può essere.Il suo qualcosa di un trade off.Come e 'lo strumento di generazione' modo è possibile risparmiare un sacco di tempo.Ma se si dispone di app di problemi specifici, può essere un dolore reale per risolvere.
Naturalmente, si può andare con qualche altro tool di build si conoscono già da qualche altra lingua:rake, maven, ant, gradle, etc etc.
Ho fatto quasi esattamente la cosa che tutti in un Cakefile utilizzando nodo moduli necessari.
Impostare alcune variabili globali che sono matrici con il percorso di ogni file, è possibile concatenare i file in un file compilato directory specificata, quindi compilare un file in js.
Per gli stili, la stessa cosa con la concatenazione senza la compilazione, ovviamente.
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'
Ora, questo è grosso modo quello che penso che stai chiedendo.
Potrebbe sicuramente essere più bella, soprattutto avendo una funzione separata per scrivere il minified contenuti, ma funziona.
Non è perfetto per gli stili sia perché stavo usando Sass e avevano altre funzioni prima di colpire la ridotta funzione, ma penso che si ottiene l'idea.