11

ノードで実行される Web アプリがあります。すべての (クライアント) Javascript/CSS ファイルは、デバッグを容易にするために現時点では縮小されていません。

本番環境に入るときに、これらのスクリプトを縮小したいと考えています。次のようなものがあるといいでしょう：

node app.js -production

HTML ファイルのスクリプト タグを変更せずに、縮小版のスクリプトを提供するにはどうすればよいですか? 次のようなものがあるはずです：私が本番環境にいる場合は、これら2つの縮小された（結合された）スクリプトを使用し、それ以外の場合はすべての縮小されていないスクリプトを使用します..

これは可能ですか？多分私は複雑に考えすぎていますか？

4

5 に答える 5

21

あなたはPilerに興味があるかもしれません。これはNode.jsモジュールであり、デバッグモードでは通常どおりに指定したすべてのJavaScript（およびCSS）ファイルを配信しますが、本番モードでは連結および縮小されます。

特別な機能として、Socket.ioを介してCSSの更新をブラウザにリアルタイムで強制的に表示することができます（Pilerでは「CSSLiveUpdated」と呼ばれます）。これは非常に素晴らしいです:-)。

script秘訣は、テンプレート内には要素と要素のプレースホルダーしかなくlink、Pilerは実行時にこれらの要素をデバッグモードでは単一要素として、本番モードでは動的に生成された単一要素としてレンダリングすることです。

このようにして、アセットの連結バージョンと縮小バージョンを手動で作成したり、ビルドツールを使用したりすることを忘れることができます。これは実行時にのみ存在しますが、開発とデバッグの際には常に完全なバージョンが分離されています。

于 2013-02-12T20:47:17.993 に答える
5

静的ファイルに2つの別々の場所を使用できます

エクスプレスコードは次のとおりです。

if (process.env.MODE === "production") {
  app.use(express['static'](__dirname + '/min'));
} else {
  app.use(express['static'](__dirname + '/normal'));
}

でノードを開始します

MODE=production node app.js

さらに、すべてのファイルを複製したくない場合は、エクスプレス静的ルーターが最初のファイルで停止するという事実を利用して、代わりに次のようにすることができます。

if (process.env.MODE === "production") {
  app.use(express['static'](__dirname + '/min'));  // if minized version exists, serves it
}
app.use(express['static'](__dirname + '/normal'));  // fallback to regular files

ただし、最小化するかどうかに同じ名前を使用すると、ブラウザのキャッシュに問題が発生します。

于 2013-02-12T20:47:17.503 に答える
1

私の最終的な解決策を皆さんと共有したいと思います。

Express に JSHTML を使用しています (ここにリンクの説明を入力してください)

私のメイン ノード ファイルでは、特別なルートを使用します。

app.get('/**:type(html)', function (req, res, next) {
var renderingUrl = req.url.substring(1, req.url.lastIndexOf("."));
//TODO: Find a better solution
    try{
        var assetUrl = req.url.substring(req.url.lastIndexOf("/") + 1, req.url.lastIndexOf("."));
        var assets = config.getResourceBundle(assetUrl);
        assets.production = config.getEnviroment() === "production";
        res.locals(assets);
        res.render(renderingUrl);
    }catch(e){
        res.redirect("/");
    }
});

ご覧のとおり、config.getResourceBundle からアセットを取得しています。これは単純な関数です:

exports.getResourceBundle = function(identifier){
    switch(enviroment){
        case "development":
            return devConfig.getResourceBundle(identifier);
        case "production":
            return prodConfig.getResourceBundle(identifier);
        default:
            return devConfig.getResourceBundle(identifier);
    }
}

最後に、アセット ファイル コレクションの例を次に示します。

exports.getResourceBundle = function (identifier) {
    return resourceBundle[identifier];
};


resourceBundle = {
    index:{
        cssFiles:[
            "resources/dev/css/login.css",
            "resources/dev/css/logonDlg.css",
            "resources/dev/css/footer.css"
        ],
        jsFiles:[
            "resources/dev/js/lib/jquery/jquery.183.js",
            "resources/dev/js/utilities.js",
            "resources/dev/js/lib/crypto.3.1.2.js"
        ]
    },
    register:{
        cssFiles:[
            "resources/dev/css/login.css",
            "resources/dev/css/modalDialog.css",
            "resources/dev/css/footer.css"
        ],
        jsFiles:[
            "resources/dev/js/lib/jquery/jquery.183.js",
            "resources/dev/js/utilities.js",
            "resources/dev/js/lib/crypto.3.1.2.js",
            "resources/dev/js/lib/jquery.simplemodal.js",
            "resources/dev/js/xfiles.register.js"
        ]
    }
(...)

私は2つのフォルダを持っています。開発/製品。grunt は縮小されたファイルを prod/.. にコピーし、そのファイルを dev/... から削除します。また、NODE_ENV 変数が production に設定されている場合は、scripts/css の縮小版を出荷します。これが現時点で最もエレガントなソリューションだと思います。

于 2013-06-17T06:29:52.187 に答える
1

この問題を適切に解決するのに役立つビルド ツール プラグインがあります。

Gulp の場合: https://www.npmjs.org/package/gulp-userref/

Grunt の場合: https://github.com/pajtai/grunt-userref

于 2014-03-01T16:08:35.133 に答える
0

関連する可能性のある別の Node.js モジュールはconnect-cachifyです。

実際の縮小は行わないようですが、テンプレートを変更せずに、本番環境で縮小バージョンを提供したり、開発中のすべての元のスクリプトを提供したりできます ( と に感謝しcachify_jsますcachify_css)。

Pilerほど機能が豊富ではないようですが、おそらくもう少し単純で、質問に記載されているすべての要件を満たす必要があります。

于 2015-06-18T15:48:50.877 に答える