Grunt チュートリアル

前置き

特に注意：もしこの記事が十分詳細でないと感じるなら、強く Grunt 英文公式サイト のチュートリ���ルを見ることをお勧めします。中文版 は注釈を部分的に翻訳しており、翻訳しない方が良いです（翻訳に誤解されやすいです）

1. Grunt とは何か？

Grunt は自動構築ツールで、類似のものに Ant、Buildy、Gmake などがあります。詳細情報は [黯羽轻扬：JS 自動化](/articles/js 自動化/) を参照してください

2. Grunt の用途は？

自動構築ツールは自動化ツールを統合し、タスク形式で管理できます。そのため Grunt 公式サイトのサブタイトルは The JavaScript Task Runner です。

簡単に説明すると、プロジェクト構築 -> モジュール化開発 -> 再利用 -> テスト -> デバッグ -> 検証 -> リリース -> バージョン管理、この全フローで多くの自動化ツールが必要です。例えば Require、QUnit、JSHint、Uglify などです。ほぼ毎回ソースコードを変更するたびに、特定の順序でいくつかのツールを手動で再実行する必要があります。。。

Grunt のような自動構築ツールがあれば、再実行の操作を簡素化できます。設定ファイルを書いた後、コマンドラインでカスタムタスクを実行するだけです。さらに grunt-contrib-watch プラグインと連携してファイル変更を監視し、自動的にタスクを実行することもできます

3. Grunt の良いところは？

• 人気：Twitter、JQuery、Adobe、Mozilla などが Grunt を使用

• プラグインが多い：現在（2015.5.22）すでに 4560 個の Grunt プラグインがあります。常用的な JSHint、Require、Sass などを含み、十分に使用できます。实在ダメなら自分でプラグインを書くこともできます

• 使いやすい：設定ファイルが比較的簡単で、プラグインドキュメントが充実（npm 公式サイトが統一管理を提供）

一.grunt のインストール

1. NodeJS をインストール

Windows は直接http://nodejs.org/からインストールパッケージをダウンロードするだけで良いです。npm 付き

其它プラットフォームの インストールチュートリアル

インストール後、コマンドラインで node -v を入力してテストします

2. npm をインストール

コマンドラインで npm -v を入力してテストします。エラーが出る場合は、自分で npm をインストールする方法を考えます

3. Grunt-CLI（コマンドラインツール Command Line Interface）をインストール

コマンドラインで npm install -g grunt-cli を入力し、インストール完了を待ちます

二.設定ファイル

2 つの設定ファイルが必要です：

• package.json：Nodejs パッケージ管理用。プロジェクト依存モジュール（grunt および grunt プラグイン）を宣言

• Gruntfile.js：Grunt 設定ファイル。タスクを定義。Gruntfile.js または Gruntfile.coffee と命名可能

注意：package.json と Gruntfile.js はすべてプロジェクトのルートディレクトリに配置し、プロジェクトのソースコードと一緒に提出します

端的に言えば、Grunt を学ぶとは設定ファイルの書き方を学ぶことです

三.package.json

一般形式は以下の通り：

{
    "name": "プロジェクト名",
    "version": "プロジェクトバージョン番号",
    "description": "プロジェクト説明",
    "author": "プロジェクト作成者",
    "license": "プロジェクト著作権",
    "devDependencies": {
        //プロジェクト依存プラグイン
    }
}

例えば小さなプロジェクトの package.json：

{
  "name": "world",
  "version": "0.4.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-uglify": "~0.2.2",
    "grunt-contrib-watch": "^0.6.1"
  }
}

package.json を書いた後、コマンドラインで cd して入り、npm install を実行し、刚才宣言した各依存項をダウンロードします。現在のディレクトリ下の node_modules フォルダに配置されます

依存項を追加する必要がある時は直接 npm install grunt-contrib-XXX --save-dev を実行すれば良く、package.json の内容を自動的に更新できます

注意：

1. 注釈は不可。否则 npm install 解析失敗（どのような形式の注釈でも、ファイルの先頭末尾部分でも其它でも。。すべて不可）

2. version は必ず X.X.X 形式。X.X はエラー

実は version のフォーマットには複雑な標準があります。http://semver.org/を参照してください

3. コマンドラインで npm install grunt-contrib-XXX --save-dev のようなコマンドを入力すると、package.json を自動的に更新できます

最後の依存モジュール grunt-contrib-watch はこのように追加しました

4. バージョン番号の前の~と^是什么意思？

これを説明する資料を見ていませんが、推測できます：^は最新バージョンを探すことを表し、は指定バージョンを表します（git の HEAD^ と HEADn と同じかもしれません。。もちろん、推測に過ぎません）

一般に~を使用して具体的なバージョンを指定します。プラグインの互換性および安定性の問題が存在する可能性があるためです

P.S.もし信頼できる説明を知っている場合は教えてください。ありがとうございます

5. package.json を自動的に生成

コマンドラインで npm init を入力し、コマンドラインの提示に従って一歩一歩完了します。実測では使いにくいです。手書きをお勧めします。または常用的なテンプレートを書いて、強制的に再利用します

三.Gruntfile.js

一般形式は以下の通り：

module.exports = function(grunt){
    // 1.  タスクを定義
    grunt.initConfig({
        // 1.  package.json を読み取り
        pkg: grunt.file.readJSON('package.json'),

        // 2.  各タスクの設定オブジェクトを初期化
        task1: {
            options: {
                // 設定オプションを設定
            },
            
            build: {
                // 入出力パスなどを設定
            }
        },
        task2: {
            // ...
        }
    });

    // 2.  プラグインをロード
    grunt.loadNpmTasks('Grunt プラグイン名');

    // 3.  タスクを登録
    grunt.registerTask('default',['Grunt タスク']);
    grunt.registerTask('mytask',['task1', 'task3']);
};

例えば小さなプロジェクトの package.json：

module.exports = function(grunt) {
    
    // 1.  タスクを定義
    grunt.initConfig({
        // 1.  package.json を読み取り
        pkg: grunt.file.readJSON("package.json"),
        
        // 2.  各タス��の設定オブジェクトを初期化
        // ファイルを結合
        concat: {
            options: {
                // 結合エラーを防止（前のファイルの末尾にセミコロンが少ない）
                separator: ";",
                // 頂部情報（注釈フォーマットを自带する必要があり、自動的に注釈せず、自動的に改行もしない）
                banner: "/*<%= pkg.name %>_<%= pkg.version %> " +
                        // *注意*：yyyy-mm-dd は引用符を追加し、文字列パラメータを表す
                        "<%= grunt.template.today('yyyy-mm-dd') %>*/\r\n\r\n",
                // 底部情報
                footer: "\r\n\r\n/* author: http://ayqy.net/ */"
            },
            
            build: {
                src: ["src/w.js", "src/Const.js", "src/Item.js", "src/Map.js", "src/Util.js", "src/Core.js"],
                dest: "build/<%= pkg.name %>.js"
            }
        },
        // コード検査
        jshint: {
            options: {
                eqeqeq: true,   // ===を要求
                trailing: true, // 尾部に空白がないことを要求
                //unused: true,   // 使用されていない変数を警告することを要求（モジュール化コードはエラーになる）
                forin: true,    // for-in は必ず hasOwnProp でフィルタすることを要求
                curly: true     // 中括弧を要求
            },
            
            files: ["Gruntfile.js", "src/*.js"]
        },
        // コードを瘦身
        uglify: {
            options: {
                // 変数名を混淆しない
                mangle: false,
                // 圧縮率を出力。選択可能な値は false(情報を出力しない)、gzip
                report: "min",
                // 頂部情報（注釈フォーマットを自带する必要があり、自動的に注釈せず、自動的に改行もしない）
                banner: "/*<%= pkg.name %>_<%= pkg.version %> " +
                        "<%= grunt.template.today('yyyy-mm-dd') %>*/\r\n\r\n",
                // 底部情報
                footer: "\r\n\r\n/* author: http://ayqy.net/ */"
            },
            
            build: {
                files: {
                    // <%= concat.dist.dest %>は uglify が自動的に concat タスクで生成されたファイルを瘦身することを表す
                    "build/<%= pkg.name %>.min.js": ["<%= concat.build.dest %>"]
                }
            }
        },
        // ファイル変動を監視し、自動的にタスクを実行
        watch: {
            files: ["<%= jshint.files %>"],
            tasks: ["default"]
        }
    });
    
    // 2.  プラグインをロード
    grunt.loadNpmTasks("grunt-contrib-concat");
    grunt.loadNpmTasks("grunt-contrib-jshint");
    grunt.loadNpmTasks("grunt-contrib-uglify");
    grunt.loadNpmTasks("grunt-contrib-watch");
    
    // 3.  タスクを登録
    grunt.registerTask("default", ["jshint", "concat", "uglify"]);  // デフォルトタスク
    grunt.registerTask("check", ["jshint"]);    // カスタムタスク：コード検査
};

Gruntfile.js を書いた後、num install などのコマンドを実行する必要はありません。直接 grunt TaskName で対応するタスクを実行すれば良いです。例えば：grunt は default タスクを実行、grunt jshint はコード検査を実行、grunt mytask は順序通りに一連のタスクを実行などです

複数の target がある場合は grunt TaskName*:（英語半角コロン）*TargetName で指定の target を実行できます。タスクを登録する時も TaskName:TargetName で target を指定できます

P.S.target とは何かについては、下を見続けてください。Gruntfile.js を設定するのは少し面倒かもしれませんが、幸い一度だけ設定すれば良く、以後直接使用できます。某些の詳細をまだあまり理解していないかもしれませんが、必ず下の注意部分を看完してください

注意：

1. dist と build はどちらを使う？

常见的有 options-dist と options-build の 2 種類で、どちらも使用可能です。名前はどうでも良いからです

options だけが有所謂です。例えばこのようにできます：

    concat: {
        options: {
            separator: ";"
        },
        
        xx: {
            src: "src/*.js",
            dest: "<%= pkg.name %>.js"
        }
    }
    

もちろんこのようにもできます：

    concat: {
        options: {
            separator: ";"
        },
        
        xx: {
            src: "src/*.js",
            dest: "<%= pkg.name %>.js"
        },
        
        xxx: {
            src: "src/*.js",
            dest: "<%= pkg.name %>.js"
        }
    }
    

そして grunt concat を実行すると、xx と xxx を順に実行します。したがって target が 1 つだけ（xx と xxx はすべて target と呼ぶ）の場合、build と dist を使用しても違いはありません。意味的に区別する必要がないからです

複数の target がある場合は、意味的に友好的な名前を付けるのが良いです

P.S.個人的には build を好みます。もちろん、名前は重要ではないので、某些のチュートリアルでは bar、foo なども現れ、人を困惑させます

2. options について

上の例は grunt が options だけを認めることを説明しています（注意：s が 1 つ少なくてもダメですよ〜）。options でない名前はすべて target として実行されます

前の例はすべて target 級の options ですが、実は task 級の options もあります。task 下のすべての target に作用できます。もちろん、これを知らなくても関係ありません。コードを少し多く書くだけです

3. 同名タスクを登録すると死再帰になります

   grunt.registerTask("concat", ["concat"]);
   

4. タスクに別名を付けられます

   grunt.registerTask("check", ["jshint"]);    // カスタムタスク：コード検査
   

5. より多くの例

より多くの例が必要で理解を助ける必要がある場合は、自分で小さなプロジェクトを書いて、ゆっくりテストすることをお勧めします

实在時間がない場合は、博客園：grunt 使用小記之 uglify：最全的 uglify 使用 DEMO を参照してください

四.オンラインリソース

1. どのプラグインがニーズを満たし、安定しており、使いやすいか分からない

http://www.gruntjs.net/plugins

リンクページは 30 日以内のダウンロード量 top100 のプラグインを示し、機能簡介、最終更新時間などが付いています。クリックすると対応する npm 公式サイトプラグインホームページにジャンプします。さらに検索��サポートし、非常に便利です

2. XX プラグインにどのような設定オプションがあるか分からない

https://www.npmjs.com/

リンクページは npm 公式サイトで、検索ボックスにプラグイン名を入力すれば良いです。例えば grunt-contrib-watch

プラグインホームページは詳細な設定説明および例を提供します。例えば watch の設定オプション：

最も簡単な使い方：

    watch: {
        files: ['**/*'],
        tasks: ['jshint']
    }
    

または複雑な：

    watch: {
        sass: {
            // We watch and compile sass files as normal but don't live reload here 
            files: ['src/sass/*.sass'],
            tasks: ['sass']
        },
        livereload: {
            // Here we watch the files the sass task will compile to 
            // These files are sent to the live reload server after sass compiles to them 
            options: { livereload: true },
            files: ['dest/**/*']
        }
    }
    

3. Grunt API

http://gruntjs.com/api/grunt

リンクページには Grunt のすべての API があります。例えば grunt.log、grunt.initConfig などなど。新しいものを見たら調べに行きましょう

参考資料

• W3CPlus：Grunt チュートリアル——Grunt に初涉足：大多数の入門チュートリアルよりずっと良い

• Grunt 中文公式サイト：お勧めしません

• Grunt 英文公式サイト：強くお勧めします

• 博客園：【grunt 整合版】30 分で grunt を使用してフロントエンドコードをパッケージングする方法を学ぶ：もし寂寞に耐えられるならこれを見ても。。