web-dev-qa-db-ja.com

grunt-contrib-uglifyを介してjsファイルを順番に縮小する方法は？

私は以下のようなディレクトリを持っています：

/folder/b.js
/folder/jQuery.js
/folder/a.js
/folder/sub/c.js

これらすべてのjsファイルを1つのjsファイルに縮小します順番：

jQuery.js-> a.js-> b.js-> c.js

Q：
1。

2.btw、デバッグ時に縮小されていないファイルを取得し、リリース時に変更されていない単一のファイルを取得するにはどうすればよいですか？script tag in html

javascriptnode.jsgruntjsuglifyjsgrunt-contrib-uglify
36
talent

良い質問です！

1）Uglifyは、宛先ファイルの関数を並べ替えて、関数定義が一番上になり、関数実行が一番下になるようにしますが、seemsは関数実行の順序を保持します。

これは、GruntfileのUglifyの構成でjQueryが最初に言及されていることを確認すると、jQueryが実行されてグローバル関数を定義する関数が最初に配置されることを意味します。

私はこの設定を使用します：

uglify: {
    options: {
        sourceMap: true
    },
    build: {
        files: {
            'public/all.min.js': ['public/js/vendor/jquery-1.10.2.min.js', 'public/js/*.js'],
        }
    }
}

2）これを達成するための明確な方法はないと思います。それは、どのWebフレームワーク、テンプレートフレームワーク、およびどのような要件があるかによって異なります。私はエクスプレス+ヒスイを使用しており、メインのヒスイのレイアウトには次のものがあります。

if process.env.NODE_ENV === 'production'
  script(src='/all.min.js')
else
  script(src='/js/vendor/jquery-1.10.2.min.js')
  script(src='/js/someScript.js')
  script(src='/js/otherScript.js')

私のpackage.jsonには次のものがあります：

"scripts": {
  "postinstall": "grunt"
},

つまり、（Herokuで）デプロイ時にnpm installを実行すると、ファイルを縮小/連結するためにgruntが実行され、NODE_ENV=productionでアプリが起動されると、縮小されたクライアント側javascriptが使用されます。ローカルでは、簡単にデバッグできるように、元のクライアント側javascriptが提供されます。

2つの欠点は次のとおりです。

  • （Gruntfileとlayout.jsで）スクリプトファイルの2つのリストを同期させなければなりません。Gruntfileで*.jsを使用してこれを解決しますが、これは全員に適しているとは限りません。 javascriptのリストをGruntfileに入れて、これからヒスイテンプレートを作成することもできますが、ほとんどのプロジェクトではやり過ぎのようです。
  • Gruntの設定を信頼できない場合、基本的にNODE_ENV=productionを使用してアプリケーションの実行をローカルでテストし、縮小が意図したとおりに機能したことを確認する必要があります。
25
gabrielf

これは、次のGruntタスクを使用して実行できます。

  1. https://github.com/gruntjs/grunt-contrib-concat ファイルを連結します
  2. https://github.com/gruntjs/grunt-contrib-uglify 連結されたファイルを最小化します

[〜＃〜] edit [〜＃〜]

通常、すべてのファイルを grunt-contrib-concat を使用してGrunt連結タスクで実行します。次に、 grunt-contrib-uglify を使用して、連結されたファイルをuく別のタスクがあります。

8
singh1469

おそらくこれを好まないでしょうが、最良の方法は、jsソースファイルをAMDモジュールとして定義し、Requirejsを使用してロードする順序を管理することです。 grunt-contrib-requirejsタスクは、依存関係ツリーを再帰的に処理し、jsファイルを必要な順序で1つの大きなjsファイルに連結します。次に、uglify（実際にはr.jsにはuglifyが組み込まれています）を使用して、大きなファイルを縮小します。

https://github.com/danheberden/yeoman-generator-requirejs には、動作する良いサンプルgruntfileとテンプレートjs​​ファイルがあります。

[〜＃〜] edit [〜＃〜]

AMDの代わりにCommonJSモジュールを使用し始めました。これは、ES6モジュールの仕様により近いためです。 Browserify を使用してcommonjsモジュールを実行することで、同じ結果（1つの大きなコンパイル済み+連結されたjsファイル）を達成できます。 grunt と gulp の両方のプラグインがあり、タスクを管理します。

[〜＃〜] edit [〜＃〜]

ES6を使用してサイトが記述されている場合、 Rollup が最適な新しい連結パッケージであることを付け加えます。ファイルをバンドルするだけでなく、ツリーシェーキングも実行し、importステートメントを使用して含まれている場合は使用するライブラリの一部を削除します。これにより、決して使用しないコードの肥大化なしに、必要なものだけにコードベースが縮小されます。

6
Patrick Gunderson

これをuglifyタスクだけで実行できるとは思いませんが、希望する結果につながる可能性のある多数の選択肢があります。

考えられるワークフローは、最初にファイルを1つのファイルに順番に連結（grunt-contrib-concat）し、この連結されたファイルをuglifyを介して配置することです。 Gruntfileで連結の順序を定義するか、これらのプラグインを使用できます。

最初の1つは https://github.com/yeoman/grunt-usemin で、HTMLファイルで順序を指定し、スクリプトブロックの周りにコメントを入れます。 Googleのスタッフが作成したもので、使用するのはとても甘いものです。

2つ目は https://github.com/trek/grunt-neuter で、requireを使用して依存関係を定義できますが、require.jsの大部分は使用できません。 JSコードを変更する必要があるため、気に入らないかもしれません。私はオプション1に行きます。

5
ddprrt

私は同じ問題に遭遇しました。簡単な修正方法は、ファイル名を変更することです-1.jquery.min.js、2.bootstrap.min.jsなど.

3
kocytean

これはあなたの質問にリモートでのみ関連しているかもしれませんが、私は似たようなものが欲しかったです。私の注文だけが次の点で重要でした：

すべてのベンダーファイル（角度、jquery、およびそれらに関連するプラグイン）をワイルドカード（['vendor/**/*.js']）。ただし、一部のプラグインには、angularおよびjqueryの前にロードする名前が付いています。

['vendor/angular.js', 'vendor/jquery.js', 'vendor/**/*.js]

幸いなことにangularとjqueryハンドルは十分に2回ロードされています。膨張（これを指摘してくれた@Kanoに感謝！）

もう1つの問題はclient-jsで、すべての依存関係が読み込まれた後にメインアプリファイルを最後に読み込む必要があるという点で順序が重要でした。その解決策は、除外してから含めることでした：

['app/**/*.js', '!app/app.js', 'app/app.js']

これにより、app.js他のすべてのファイルと一緒にロードされないようにし、最後にそれを含めます。

2
laggingreflex

質問の2番目の部分はまだ回答されていないようです。しかし、一つずつ試してみましょう。

まず、前述のconcatの回答で説明されているように、多数のjsファイルを結合して1つにまとめることができます。 https://github.com/gruntjs/grunt-contrib-uglify を使用することも可能です。ワイルドカードがあるようです。 「expand = true」オプションとワイルドカードを試す必要がある場合があります。最初の質問はこれで終わりです。

2番目の部分では、big-ugly.jsに加わってuしたとしましょう。

これで、HTMLに次のディレクティブを追加できます。

<!-- build:js:dist big-ugly.js -->
<script src="js1.js"></script>
<script src="js2.js"></script>
<!-- etc etc --> 
<script src="js100.js"></script>
<!-- /build -->

そして、それを https://www.npmjs.com/package/grunt-processhtml にあるgrunt htmlプリプロセッサに、うなり声の一部として渡します。

このプリプロセッサは、ブロック全体を

<script src="big-ugly.js"></script>

これは、HTMLファイルが意味的に同等であることを意味します-単調なジョブの前後。つまり、ページがネイティブ形式（デバッグ用）で正しく機能する場合-変換されたページは、うなり声の後に正しく機能する必要があります-タグを手動で変更する必要はありません。

2
vpathak

これは@ 1469の答えでしたが、なぜこれが機能するのかを明確にしませんでした。 concatを使用してすべてのjsファイルを1つに配置します。このモジュールはファイル名の順序でこれを行うため、順序に基づいてファイル名にプレフィックスを付けます。他の注文オプションもあると思います。

concat: {

        js: {
            options: {
                block: true,
                line: true,
                stripBanners: true
            },
            files: {
                'library/dist/js/scripts.js' : 'library/js/*.js',
            }
        }
    },

次に、uglifyを使用して、縮小されたversionいバージョンを作成します。

uglify: {
      dist: {
        files: {
          'library/dist/js/scripts.min.js': [
            'library/js/scripts.js'
          ]

        },
        options: {

        }
      }
    },
1
Neo

問題は、順番にロードする必要があるベンダーがあったことです（jqueryプラグインの前にjqueryとしましょう）。 jqueryを '！jquery'という独自のフォルダーに入れ、事実上スタックの一番上に置くことで解決しました。次に、通常どおりconcatを使用しました。

concat: {
  options: {
    separator: ';',
  },
  build: {
    files: [
      {
        src: ['js/vendor/**/*.js', 'js/main.min.js'],
        dest: 'js/global.min.js'
      }
    ]
  }
},
0
Maurice