[解決済み] Gruntは何のためにあるのですか？

質問

Gruntに初めて挑戦しているのですが、その有用性がよくわかりません。

タスクランナーであることは理解しています。bundle、uglify、jshint、minifyなどなど、スクリプト化できるタスクなら何でもできることは理解しています。

しかし、これがどんな利点になるのかわかりません。つまり、単純なシェルスクリプトを使ってこれらを組み合わせることができるのです。どうやら、grunt + gruntfilesをセットアップして、タスクを書くというのは より シェルスクリプトを書くよりも作業が少なくなる。

これについては、何が足りないのでしょうか？

どのように解決するのですか？

Gruntは基本的にNodeJSの上に書かれたビルド／タスク・マネージャです。私は、これをJavaのANTに相当するNodeJSスタックと呼ぶことにします。ここでは、gruntを使用したい一般的なシナリオをいくつか紹介します。

1. minificationが必要なjavascriptファイルを含むプロジェクトがあり、一般的にフロントエンドのビルドを別に生成する場合（バックエンドにJAVAを使用している場合）。( グラントコントリブアグリフィ )
2. 開発中に自分のマシンにコードを保存するとき、ブラウザが自動的にページを再読み込みするようにしたいものです (小さなことのように思えるかもしれませんが、私を信じてください、これで多くの時間を節約することができました)。( ライブリロード )
3. 開発者が自分のマシンにコードを保存するとき、JSエラーや一般的なベストプラクティス違反の包括的なリストを表示させたいと思っています。( グラント・コントリブ・ジシャント )
4. 開発中に開発者のマシンで CSS ファイルにコンパイルする必要がある SASS/ LESS ファイルを含むプロジェクトがある場合、例えば開発者が SASS ファイルを保存するたびに、それを自動的に CSS ファイルにコンパイルしてページに含めたい。( グラントコントリブサス )
5. フロントエンドの開発者がUIに取り組み、バックエンドの開発者がバックエンドに取り組んでいる場合、フロントエンドの開発者が自分のマシンで毎回コードをコンパイル＆アップロードせずにバックエンドのREST APIを使用できるようにしたいとします。XHRはブラウザによってクロスドメインが許可されていないため、一般的なウェブサーバのセットアップではこれが不可能なのです。Gruntは、あなたのシステムのXHRリクエストをgrunt接続サーバー内の他のシステムにリダイレクトするプロキシをセットアップすることができます。( grunt-contrib-proxy, grunt-contrib-connect )

シェルスクリプトでこれらすべてを実現できるとは思えません。結論から言うと、Gruntfile.jsの設定は、javascriptにあまり触れたことがない人、nodeJSに慣れていない人には面倒です。私も学習者として同じ痛みを経験しましたが、Gruntは素晴らしいソフトウェアです。しかし、Gruntは素晴らしいソフトウェアです。あなたのフロントエンドプロジェクトに適切なGruntfile.jsをセットアップするために時間を投資してください。）

シェルスクリプトと比較した場合の優位性

1. これらの作業のためにいちいちシェルスクリプトを書くと、メンテナンスが面倒ですし、いちいちカスタマイズするのも面倒です。Gruntfile.jsは実はとても簡単で、実行したいタスク、ソース、ターゲットを指定し、初期設定を行います。

2. YeomanやGulpのプロジェクトシードジェネレータとの統合も、考慮すべき大きな要因のひとつです。YeomanとGulpには、インテリジェントなデフォルトを持つGruntfile.js'が付属しています。チーム内で唯一のUIコントリビューターである私にとって、これは貴重なものです。

3. フロントエンドの技術に携わる者にとって、複数の人が一緒に仕事をする場合、シェルスクリプトを知るよりも、SOで多くの回答があり、すでにドキュメント化されているGruntを知る方が簡単だと思うのです。これは、大規模なチームにおける要因の一つかもしれません。

4. Gruntの多くのプラグインは、基本機能を拡張するものです。あなたのシェルスクリプトが非常に人気があり、非常にモジュール化されていない限り、そのためのプラグインが構築されることはないでしょう。これは、新しいフロントエンド技術をプロジェクトに取り込む場合にも当てはまります。例えば、明日からプロジェクトでtypescriptを使いたい場合、あなたのシェルスクリプトはこれを取り込み、あなた自身の努力でそれを説明する必要があります。Gruntでは、"npm install "と設定を追加するのと同じくらい簡単です。