0

私はbackbone.jsアプリを書いています。複数のjs、css、htmlテンプレートファイルがあります。また、ダウンロードを高速化するために、それらを1つのファイルにまとめるスクリプトもあります。開発中にどのように作業する必要がありますか：

  1. ファイルシステムにリスナーを追加し、変更するたびにファイルをコンパイルして、ブラウザーで表示できるようにします。これは、自分が何をしたかを確認できるようになるまでに1〜2秒のオーバーヘッドが発生することを意味します。これは、HTMLの微調整に煩わしいことです。

  2. どういうわけか、開発中に複数のファイルを使用して閲覧し、本番環境に移行する前にクランチするだけです。これは、devとprodに別々のindex.htmlが必要であることを意味します。

あなたの考えは何ですか？

4

5 に答える 5

1

開発を使用して結合および縮小されたファイルを操作するのは悪夢です。2つの並列インデックスファイルも苦痛になります。

ビルド自動化を探しています。プロジェクトをデプロイする準備をするビルドスクリプトを作成します。あなたの場合、これはすべてのファイルをクランチしてから、結合されたファイルのみを参照するようにインデックスファイルを変更することです。その他のタスクには、接続文字列の更新、FTP経由のアップロードなどが含まれます。

単純なbashスクリプトで十分ですが、 Ant、Phing、またはその他のビルドスクリプトを使用することもできます。重要なのは再現性です。簡単なコマンドを使用してこれを行うことができるはずです。

編集：Antを使用する場合は、Exec/ReplaceRegexpタスクを調べてください。

于 2012-10-05T15:29:32.263 に答える
1

Minifyを使用してJSを結合および縮小し、バックボーンアプリのindex.htmlには、次のようなコードブロックがあります。

   if (APP._dev === true) {
        // So on development, we load all the files individually
        $.when(
                // Utilities
                $.getScript(APP._rootDir + 'app/js/util.js'),

                // Models
                $.getScript(APP._rootDir + 'app/js/models/Timer.js'),
                $.getScript(APP._rootDir + 'app/js/models/Section.js'),

                // Collections
                $.getScript(APP._rootDir + 'app/js/collections/Timers.js'),
                $.getScript(APP._rootDir + 'app/js/collections/Sections.js'),

                // Views
                $.getScript(APP._rootDir + 'app/js/views/TitleView.js'),
                $.getScript(APP._rootDir + 'app/js/views/BackgroundAudioView.js'),

                // Router
                $.getScript(APP._rootDir + 'app/js/routers/APPRouter.js'),

                // Load in our templates file and add each template to a
                // proerty visible in our application scope
                $.get(APP._rootDir + 'app/js/templates/all.html',function(result){
                    var tmp = $('<div></div>').html(result);
                    $('script.template', tmp).each(function(){
                        APP._templates[this.id] = $(this).html();
                    });
                },'html'),

                // Here we create a new deferred object which we will bind
                // to JQuery's ready() event.
                $.Deferred(function (deferred) {

                    // DOM Ready. Invokes our APP.init() function.
                    $(deferred.resolve); // init
                })
        ).done(
                APP.init
        ).fail(
                function () { /* fail how you would like */ }
        );
    } else {
        $.when(
                // And on prod, we load a combined & minified JS file instead
                $.getScript(APP._rootDir + 'min/?g=js'),

                // Load in our templates file and add each template to a
                // proerty visible in our application scope
                $.get(APP._rootDir + 'app/js/templates/all.html',function(result){
                    var tmp = $('<div></div>').html(result);
                    $('script.template', tmp).each(function(){
                        APP._templates[this.id] = $(this).html();
                    });
                },'html'),

                // Here we create a new deferred object which we will bind
                // to JQuery's ready() event.
                $.Deferred(function (deferred) {

                    // DOM Ready. Invokes our APP.init() function.
                    $(deferred.resolve); // init
                })
        ).done(
                APP.init
        ).fail(
                function () { /* fail how you would like */ }
        );
    }

次に、Minifyの/min/ディレクトリにあるgroupsConfigで、jQueryの遅延オブジェクトの読み込み順序に一致するようにビルド配列を定義します。

return array(
    'js' => array(
        '//' . $rootDir . '/util.js',

        '//' . $rootDir . '/models/Timer.js',
        '//' . $rootDir . '/models/Section.js',

        '//' . $rootDir . '/collections/Timers.js',
        '//' . $rootDir . '/collections/Sections.js',

        '//' . $rootDir . '/views/TitleView.js',
        '//' . $rootDir . '/views/BackgroundAudioView.js',

        '//' . $rootDir . '/routers/APPRouter.js'
    ),
    'css' => array(),
);

おそらくDRYほどではありませんが、機能し、ニーズに合わせて調整できます。

于 2012-10-05T15:30:27.240 に答える
1

私は通常、フェーズを開発するために、持っているファイルと同じ数のタグを含むhtmlページを持っています。

それが生産に行かなければならないとき、それはクランチすることができます。

次のプロジェクトでは、開発中の正しい順序でファイルをロードするrequireJSを使用することをお勧めします。これにより、r.jsはすべてのスクリプトを1つのファイルに結合して本番環境に移行できます。

于 2012-10-05T15:31:30.547 に答える
1

問題は、ファイルウォッチャープログラムを使用して更新を行っていることです。「最終変更日」フィールドを使用すると、ファイルシステムウォッチャーが不要になります。

ユーザーがリクエストを行うときは、次の手順を実行します。

  • すべてを縮小した後、結果のキャッシュバージョンを保存します。
  • ロードするたびに、いずれかのファイルの「最終変更」フィールドがキャッシュよりも新しいかどうかを確認してください。そうである場合は、すべてを再縮小してキャッシュし、新しくキャッシュされたバージョンを返します。それ以外の場合は、キャッシュされたバージョンを返すだけです。シンプルで、必要なときにのみ実行されます。

開発は速いです。生産が速くなります。どちらも同じコードを使用します。

于 2012-10-05T16:18:17.700 に答える
0

私はrequire.jsを使用していて、すべてのファイルをr.jsで圧縮しようとしていますが、問題は、.js .cssファイルは圧縮できますが、.htmlファイルは圧縮できないことです。現在、50個のテンプレートがあり、それらを初めてロードするのに10秒かかります。

于 2012-10-05T16:31:00.270 に答える