Gruntを使用してワークフローを自動化する方法[チュートリアル]

私は 自動化の大きな支持者 それは人生をそれほど簡単にするからです。コンピュータを使って自分のために物事をこなすときに、生命を奪うような単調で単調な作業に時間を費やすのはなぜですか。これは特にWeb開発に当てはまります。.

多くの開発作業は面倒です。開発中にコードをコンパイルしたい場合があります。開発バージョンをプッシュするときは、ファイルを連結および縮小したり、開発専用リソースを削除したりすることができます。ファイルの大部分を削除したり、フォルダの名前を変更するなど、比較的複雑でないものでも 私たちの時間の大部分を占めることができます.

この記事では、JavascriptタスクランナーのGruntが提供する優れた機能を活用して、あなたがどのようにあなたの人生を楽にすることができるかを紹介します。あなたがJavascriptウィザードでなくても心配は要りません。!

Hongkiat.comに関するその他の情報：

CSSMaticはCSSをWebデザイナーにとって容易にします
フォルダアクションを使ってMacのタスクを自動化する
アクションを使ってDropboxファイルを自動化する
Androidデバイスでタスクを自動化するのに役立つ10のアプリ
Webサイトを（自動的に）Dropboxにバックアップする方法

Gruntのインストール

Gruntのインストールはノードパッケージマネージャを使うのでとても簡単です。つまり、Node自体もインストールする必要があるかもしれません。端末またはコマンドプロンプトを開き（私はこれからこの端末を呼び出します）、次のように入力します。 nmp -v.

あなたが持っているバージョン番号を見れば 午後 インストールされている場合、「コマンドが見つかりません」というエラーが表示された場合は、ノードのダウンロードページに移動して必要なバージョンを選択してインストールする必要があります。.

Nodeがインストールされると、Gruntを取得することは端末で発行された単一のコマンドの問題です。

npm install -g grunt-cli

基本的な使い方

プロジェクトごとに要件が異なるため、プロジェクトごとにGruntを使用します。フォルダを作成し、私たちの端末からもナビゲートしてプロジェクトを始めましょう。.

Gruntの心臓部は2つのファイルで構成されています。 package.json そして Gruntfile.js. パッケージファイルは、あなたのオートメーションが使用するすべてのサードパーティの依存関係を定義します、Gruntfileはあなたが制御することを可能にします どうやって まさにこれらが使われています。次の内容で、必要最低限のパッケージファイルを作成しましょう。

"name"： "test-project"、 "version"： "1.0"、 "devDependencies"："grunt"： "〜0.4.5"、

名前とバージョンはあなた次第です、依存関係はあなたが使用しているすべてのパッケージを含まなければなりません。現時点では何もしていませんので、Grunt自体が依存関係として追加されていることを確認します。.

チルダと呼ばれるその波線（〜）が何をしているのかと自問しているのかもしれません。.

バージョンは、npmのセマンティックバージョン管理ツールの規則を使用して要求されることがあります。手短に：

次のように正確なバージョンを指定してください 4.5.2
以下のように最小または最大バージョンを示すために、大なり/小なりを使用できます。 > 4.0.3
チルダを使用すると、バージョンブロックが指定されます。を使う 〜1.2 と見なされます 1.2.x, 1.2.0より上で1.3より下の任意のバージョン

バージョンを指定する方法はもっとたくさんありますが、ほとんどのニーズにはこれで十分です。次のステップは自動化を実行するGruntfileを作成することです。.

 module.exports = function（grunt）grunt.initConfig（pkg：grunt.file.readJSON（ 'package.json'））; grunt.registerTask（ 'default'、[]）; ;

これは基本的にGruntfileのスケルトンです。興味のある場所が2つあります。一つの場所は initConfig（） 関数。これがあなたのプロジェクト設定がすべて行くところです。これには、LESS / SASSコンパイルの処理、スクリプトの縮小などの処理が含まれます。.

2番目の場所は、タスクを指定する場所の下にあります。指定された1つのタスクを見ることができます “デフォルト”. 現時点では空なので何もしませんが、後で詳しく説明します。. タスクは基本的に私たちのプロジェクト設定からビットとピースを並べて実行します.

たとえば、次のタスク “スクリプト” すべてのスクリプトを連結し、結果のファイルを縮小してから最終的な場所に移動します。これら3つのアクションはすべてプロジェクト構成で定義されていますが、 “一緒に引っ張った” タスクによって。これがまだ明確ではない場合でも、心配しないでください。これがどのように行われるかを説明します。.

私たちの最初の仕事

1つのJavaScriptファイルを縮小するタスクを作成しましょう。.

新しいタスクを追加したいときには、4つのことが必要です。

必要に応じてプラグインをインストールする
Gruntファイルでそれを要求する
タスクを書く
必要に応じてタスクグループに追加してください

（1）プラグインの検索とインストール

あなたが必要とするプラグインを見つける最も簡単な方法はグーグルにこのような何かをタイプすることです： “javascript gruntプラグインを縮小する”. 最初の結果はあなたをgrunt-contrib-uglifyプラグインに導きます。.

Githubページはあなたが知る必要があるすべてをあなたに言います。インストールはターミナルの単一行です。これはあなたが使う必要があるものです：

 npm install grunt-contrib-uglify --save-dev

あなたは管理者権限でこれを実行する必要があるかもしれません。あなたが何かのようになったら npm ERR！ root / Administratorとしてこのコマンドを再実行してください。. その過程で、コマンドの前にsudoと入力し、プロンプトが表示されたらパスワードを入力します。

 sudo npm install grunt-contrib-uglify --save-dev

このコマンドは実際には package.json ファイルを作成して依存関係として追加します。手動で行う必要はありません。.

（2）Gruntfileで要求する

次のステップはあなたのGruntfileを必要条件として追加することです。私はファイルの先頭にプラグインを追加したいのですが、追加した後の完全なGruntfileはここにあります。 grunt.loadNpmTasks（ 'grunt-contrib-uglify'）;.

 module.exports = function（grunt）grunt.loadNpmTasks（ 'grunt-contrib-uglify'）; grunt.initConfig（pkg：grunt.file.readJSON（ 'package.json'））; grunt.registerTask（ 'default'、[]）; ;

（3）スクリプトを縮小するためのタスクを作成する

説明したように、これは initConfig（） 関数。プラグイン（および他のほとんどのプラグイン）のGithubページには、たくさんの情報と例があります。これが私のテストプロジェクトで使ったことです.

 uglify：ビルド：src： 'js / scripts.js'、宛先： 'js / scripts.min.js'

これはかなり簡単です。 scripts.js プロジェクトのjsディレクトリにあるファイルと、縮小ファイルの保存先。ソースファイルを指定する方法はたくさんありますが、後で見ていきます。.

今のところ、これが追加された後に完全なGruntfileを見てみましょう。.

 module.exports = function（grunt）grunt.loadNpmTasks（ 'grunt-contrib-uglify'）; grunt.initConfig（pkg：grunt.file.readJSON（ 'package.json'）、uglify：ビルド：src： 'scripts.js'、dest： 'scripts.min.js'）; grunt.registerTask（ 'default'、[]）; ;

（4）この設定をタスクグループに追加する

今あなたはあなたの端末に行ってタイプすることができます むかつく しかし、後で複数のタスクを実行するにはタスクグループが必要になります。デフォルトのタスクは空です。何かが追加されるのを待っているので、次のように変更しましょう。

 grunt.registerTask（ 'default'、['uglify']）;

この段階であなたは端末に行くことができるはずです。 不機嫌そうな そして縮小が行われるのを見なさい。を作成することを忘れないでください scripts.js もちろんファイル!

セットアップにはそれほど時間はかかりませんでしたか？これらすべてに慣れていなくても、手順を実行するのに時間がかかったとしても、節約する時間は数回の使用でそれに費やす時間を超えるでしょう。.

連結ファイル

連結ファイルを見てみましょう ターゲットとして複数のファイルを指定する方法を学ぶ 途中で.

連結は、複数のファイルの内容を単一のファイルに結合するプロセスです。 grunt-contrib-concatプラグインが必要です。手順を見ていきましょう。

プラグインをインストールするには npm install grunt-contrib-concat --save-dev ターミナルで。完了したら、使用する前と同じようにGruntファイルに必ず追加してください。 grunt.loadNpmTasks（ 'grunt-contrib-concat'）;.

次は設定です。 3つの特定のファイルを組み合わせてみましょう、構文はおなじみでしょう.

 concat：dist：src：['dev / js / header.js'、 'dev / js / myplugin.js'、 'dev / js / footer.js']、dest： 'js / scripts.js'、 、,

上記のコードは、ソースとして指定された3つのファイルを受け取り、それらを宛先として指定されたファイルに結合します。.

これはすでにかなり強力ですが、新しいファイルが追加されたらどうなりますか？ずっとここに戻ってくる必要がありますか？もちろん、ファイル全体のフォルダを指定して連結することもできます。.

 連結：dist：src： 'dev / js / *。js "]、宛先：' js / scripts.js '、、,

これで、dev / jsフォルダ内のJavaScriptファイルはすべて1つの大きなファイルにマージされます。 js / scripts.js, ずっといい!

今度はタスクを作成して、実際にいくつかのファイルを連結できるようにします。.

 grunt.registerTask（ 'mergejs'、['concat']）;

これはもうデフォルトのタスクではありませんので、我々が発行するときに端末にその名前をタイプする必要があります。 不機嫌そうな コマンド.

 うなり声

自動化を自動化する

私たちはすでに多くの進歩を遂げましたが、まだまだあります！今のところ、連結または縮小したい場合は、端末に移動して適切なコマンドを入力する必要があります。それを見てみるべき時です 時計 これを実行するコマンドその過程で、同時に複数のタスクを実行する方法も学びます。.

うまくいくためには、grunt-contrib-watchをつかむ必要があります。私はあなたがそれをインストールしてあなた自身でGruntfileにそれを今までに追加することができると確信しています、それで私は私が私のテストプロジェクトで使用するものを示すことから始めます.

 監視：スクリプト：ファイル：['dev / js / *。js']、タスク：['concat'、 'uglify']、、

私は一組のファイルを見るために命名しました “スクリプト”, まさに私はそれが何をするのか知っています。このオブジェクト内で、監視するファイルと実行するタスクを指定しました。前の連結例では、dev / jsディレクトリ内のすべてのファイルをまとめました。.

縮小の例では、このファイルを縮小しました。変更があるかどうかdev / jsフォルダーを監視し、変更があるときはいつでもこれらのタスクを実行することは理にかなっています.

ご覧のとおり、複数のタスクをカンマで区切って簡単に呼び出すことができます。この場合は、最初に連結、次に縮小の順に実行されます。これはタスクグループでも行うことができます。これは、それらが存在する理由の一種です。.

これでデフォルトのタスクを修正できます。

 grunt.registerTask（ 'default'、['concat'、 'uglify']）;

今2つの選択肢があります。スクリプトを連結して縮小したいときはいつでも端末に切り替えてタイプすることができます。 不機嫌そうな. また、watchコマンドを使ってファイルの監視を開始することもできます。 不機嫌そうな腕時計.

あなたがこれらのファイルを修正するのを待って、それはそこに座ります。一度実行すると、それはそれに割り当てられたすべてのタスクを実行し、先に行き、試してみる.

それははるかに優れています、私達からの入力は不要です。あなたは今あなたのファイルを片付けることができますそしてあなたのためにすべてがうまく行われるでしょう.

概要

プラグインのインストール方法と使用方法、およびwatchコマンドの機能に関する基本的な知識があれば、皆さんは自分でオートメーションの常習者になることができます。 Gruntには、私たちが議論したことよりももっとたくさんのことがありますが、あなたが自分で処理できないものは何もありません.

SASSのコンパイル、イメージの最適化、自動プレフィックスなどのためのコマンドの使用は、私たちが議論したステップをたどり、プラグインが必要とする構文を読むだけの問題です。.

Gruntの特に優れた用途をご存知の方は、コメント欄にご連絡ください。Gruntのようなツールの使用方法をお聞きになることをお勧めします。!