10

仕事でプロジェクトを開始していますが、どのビルド ツールを使用するのが最適かを考えていました。

全体は CoffeeScript で記述されており、クライアント側には AngularJS を使用し、サーバーには NodeJS を使用しています。

アプリにはいくつかのコンポーネントがあります。

  • iPadアプリ
  • iPhone アプリ (iPad とは異なる機能)
  • アプリの CMS
  • NodeJS サーバー

これらすべての間に大量の共有コードがあり、ここでもすべて CoffeeScript で記述されています。

どのアプリがどのコードを使用しているか (その多くは共有されている) を一覧表示できるビルド ツールが必要で、各アプリの JavaScript ファイルを別のフォルダーにビルドします。

たとえば、index.html を含む「/compiled/ipad/」というフォルダーと、js、css、img などのフォルダーをセットアップします。/compiled/ipad/js にスローするコンパイル済みのコーヒー ファイルをリストします。 (/src/shared/*.coffee からの一部、/src/ipad/*.coffee からの一部など) と、/compiled/ipad/css にスローしたいファイル。また、ファイルを簡単に連結できるようにしたいと思います。

また、テストを /src/test/ipad から /compiled/test/ipad/*.js にコンパイルします。

クライアント側の単体テストはすべてtestacularを使用して記述されていますが、サーバー側の単体テストを何に記述するかはまだわかりません。

ここでは、どのビルド ツール/構成が最適なアプローチですか? メイクファイル?グラントみたいな?私は正直なところ、ビルドシーン全体に不慣れです。

編集: Browserify を使用することにしました。ここで Angular で動作させるための私のソリューションを見つけることができます: https://groups.google.com/forum/#!topic/angular/ytoVaikOcCs

4

3 に答える 3

4

個人的には、javascript または coffeescript でサーバー側のコードを記述したいという衝動は、ビルド ツール チェーンにも及ぶと思います。これにより、ビルド ツールからサーバー/クライアント タスクを簡単に自動化できます。make などの別のツールを使用しても意味があるとは思えません (node.js コマンド呼び出しのラッパーを作成するだけです)。構造化された順に並べられた提案:

  • node.js : ビルド スクリプトを JavaScript でロールし、node で呼び出すだけです。シェルスクリプトに似ていると思います。このルートはお勧めしません。
  • jake or cake : 私は Java の世界から来たので、これらが私に ant を思い出させるのは当然のことです。私はコーヒースクリプトが好きなので、ケーキが好きです。
  • grunt : これは聞いたことがなかったので、あまりアドバイスできません。もちろん、それはmavenを思い出させます...そして私はただ言うことができます...ビルドツールがより多くの構造を強制する傾向があるほど、柔軟性が低下する可能性があります。それはトレードオフのようなものです。「ビルドツール」の方法で行う限り、時間を大幅に節約できます。ただし、アプリ固有の問題がある場合は、解決するのが王室の苦痛になる可能性があります.

もちろん、rake、maven、ant、gradle など、すでに使い慣れた他の言語のビルド ツールを使用することもできます。

于 2012-05-21T17:43:21.823 に答える
4

必要に応じてノードモジュールを使用して、Cakefile でほぼこれとまったく同じことを行いました。

各ファイルのパスを含む配列であるいくつかのグローバル変数を設定し、指定したコンパイル済みディレクトリ内のファイルにそれらのファイルを連結してから、その 1 つのファイルを 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を使用していて、縮小された関数に到達する前に他の関数を持っていたので、スタイルには完璧ではありませんが、あなたはアイデアを得ると思います.

于 2012-05-21T18:27:25.327 に答える
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(他にもあります)のようなものを使用して、必要に応じてクライアント側のアプリを作成します。そうすれば、必要なものを言うビルドファイルを作成する代わりに、実際にモジュールをインポートする実際のアプリを使用できます。

于 2012-05-21T17:58:48.293 に答える