2012-05-21 11 views
11

Zaczynam projekt w pracy i zastanawiałem się, jakie będzie najlepsze narzędzie do kompilacji.Narzędzie do budowania: projekt Coffeescript/Node z wieloma komponentami

Całość napisana jest w języku CoffeeScript, przy użyciu AngularJS dla klienta i NodeJS dla serwera.

Istnieje kilka elementów do aplikacji:

  • iPada aplikacji
  • IPhone app (inna funkcjonalność z iPad)
  • CMS dla aplikacji
  • NodeJS serwerze

Istnieje mnóstwo wspólnego kodu między wszystkimi tymi, ponownie wszystkie napisane w CoffeeScript.

Chciałbym narzędzie do kompilacji, w którym mogę wyświetlić, która aplikacja używa kodu (większość z nich jest udostępniana), a pliki javascript każdej aplikacji będą budowane w oddzielnym folderze.

Na przykład chciałbym ustawić folder o nazwie "/ compiled/ipad /", który ma index.html, i foldery dla js, css, img, itp. Chciałbym wymienić, jakie skompilowane pliki kawy chcę wrzucić/skompilować/ipad/js (część z /src/shared/*.coffee, część z /src/ipad/*.coffee, itp.) i jakie pliki chcę umieścić w/compiled/ipad/css. Chciałbym, żeby był w stanie łatwo łączyć pliki, tak jak ja chcę.

Zestawiłbym również moje testy, od/src/test/ipad do /compiled/test/ipad/*.js.

Wszystkie moje testy po stronie klienta są napisane przy użyciu testacular i nie jestem pewien, na razie napiszę testy jednostkowe po stronie serwera.

Jakie narzędzie/konfiguracja to najlepsze podejście? Plik Makefile? Coś w rodzaju Grunta? Szczerze mówiąc, jestem nowy na całej scenie budowania.

edycja: Zdecydowano, aby przejść z przeglądaniem. Możesz znaleźć moje rozwiązanie, które sprawi, że będzie działało z Angular tutaj: https://groups.google.com/forum/#!topic/angular/ytoVaikOcCs

+0

+1. Świetne pytanie i nigdy wcześniej nie słyszałem o AngularJS. To wygląda niesamowicie. – Jivings

Odpowiedz

3

chciałbym umieścić cały wspólny kod do node.js modułów i stworzyć projekt, który wygląda mniej więcej tak:

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 

bym potem użyć czegoś podobnego Browserify (są inne), aby aplikacje po stronie klienta w razie potrzeby. W ten sposób zamiast mieć plik kompilacji, w którym mówisz, czego potrzebujesz, faktycznie masz prawdziwe aplikacje importujące moduły.

+0

Zauważyłem również, że powiedziałem przeglądanie zamiast przeglądania. – Pickels

+0

Poszedłem z przeglądarką w końcu, dzięki. :-). Możesz zobaczyć, jak udało mi się pracować w edycji do mojego głównego postu. –

4

Osobiście uważam, że napęd do pisania kodu po stronie serwera w javascript lub coffeescript rozciąga się również na twój łańcuch narzędzi do kompilacji: więc trzymaj się przy tym również używania javascript/coffeescript . Umożliwi to łatwą automatyzację zadań związanych z serwerem/klientem za pomocą narzędzia do budowania - wątpię, aby było to sensowne przy użyciu innego narzędzia, takiego jak make (po prostu pisanie wrapperów wokół wywołań komend node.js). Sugestie, zamówione przez uporządkowanego-ności:

  • node.js: Wystarczy rzucić skryptów kompilacji w javascript, i wywołać je z węzła. Przypuszczam, że chodzi o skrypty powłoki. Nie polecam tej trasy.
  • jake lub cake: Pochodzę ze świata java, więc nic dziwnego, że przypominają mi mrówkę. Wolę coffeescript, a więc wolę ciasto.
  • grunt: Nie słyszałem o tym wcześniej, więc nie mogę dać wiele rad. Przypomina mi oczywiście oczywiście maven ... i mogę powiedzieć ... im więcej struktura narzędzie do budowania ma tendencję do egzekwowania mniejszej elastyczności. To coś na kształt kompromisu. Tak długo, jak robisz to "narzędzie do budowania", możesz zaoszczędzić mnóstwo czasu. Ale jeśli masz problemy z aplikacją, może to być jeden królewski ból do rozwiązania.

Oczywiście, można przejść z jakimś innym narzędziem budowania jesteś już znane z innego języka: grabie, Maven, mrówki, Gradle, itp itd

4

Zrobiłem prawie dokładnie to wszystko w pliku CakeFile, używając modułów węzłów w razie potrzeby.

Ustawia niektóre zmienne globalne, które są tablicami ze ścieżką każdego pliku, łączy te pliki w pliku w określonym katalogu kompilowanym, a następnie kompiluje ten plik do pliku js.

Dla stylów, to samo z konkatenacją bez kompilacji, oczywiście.

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' 

Jest to mniej więcej to o czym myślę, że pytasz.

Zdecydowanie może być ładniejsza, zwłaszcza jeśli ma osobną funkcję do pisania minifikowanej zawartości, ale działa.

Nie jest idealny do stylów, ponieważ używałam Sassa i miałam inne funkcje, zanim trafił w minifunkcjonalną funkcję, ale myślę, że wpadłeś na ten pomysł.

Powiązane problemy