36

以下のようなディレクトリがあります。

/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.grunt-contrib-uglify を介してどのようにすればよいですか? (実際には、たくさんのファイルがあり、すべてのソース ファイルパスを個別に指定することは実際的ではありません)

2.ところで、デバッグ時に縮小されていないファイルを取得し、リリース時に縮小された単一のファイルを取得し、htmlのスクリプトタグを変更する必要がない(およびスクリプトタグの書き方)にはどうすればよいですか?

4

9 に答える 9

8

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

  1. https://github.com/gruntjs/grunt-contrib-concatはファイルを連結します
  2. https://github.com/gruntjs/grunt-contrib-uglifyは連結ファイルを縮小します

編集

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

于 2014-02-11T21:11:16.847 に答える
3

これはあなたの質問とは少し関係があるだけかもしれませんが、似たようなものが欲しかったのです。私の注文だけが次のように重要でした：

すべてのベンダー ファイル (angular、jquery、およびそれぞれに関連するプラグイン) をワイルドカード ( ['vendor/**/*.js']) でロードしていました。しかし、一部のプラグインには、angular および jquery の前にロードする名前がありました。解決策は、最初にそれらを手動でロードすることです。

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

幸いなことに、Angular と jquery のハンドルが 2 回読み込まれました。編集：このような大きなライブラリを2回ロードするのは実際にはベストプラクティスではありませんが、縮小されたファイルが不要に肥大化します. （これを指摘してくれた@Kanoに感謝します！）

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

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

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

于 2014-11-15T18:34:58.730 に答える
2

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

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

2 番目の部分では、big-ugly.js に参加して醜化したとします。

これで、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 -->

そして、それをgrunt ジョブの一部としてhttps://www.npmjs.com/package/grunt-processhtmlの grunt html プリプロセッサに渡します。

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

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

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

于 2015-08-05T04:16:00.757 に答える
1

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

concat: {

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

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

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

        },
        options: {

        }
      }
    },
于 2015-05-20T22:16:49.890 に答える
0

問題が、順番にロードする必要のあるベンダーがあった場合 (jquery プラグインの前に jquery としましょう)。jqueryを「!jquery」という独自のフォルダーに入れ、効果的にスタックの一番上に置くことで解決しました。次に、通常どおり concat を使用しました。

concat: {
  options: {
    separator: ';',
  },
  build: {
    files: [
      {
        src: ['js/vendor/**/*.js', 'js/main.min.js'],
        dest: 'js/global.min.js'
      }
    ]
  }
},
于 2015-02-19T06:04:38.647 に答える