grunt入門

最近gruntに関する知識を整理し始めました.本文は主に案内文書として、具体的な操作はすべて他の文章を引用します.文中に引用点があれば、明記します.
grunt概要
gruntは何ですか
  Grontはタスクに基づくJavaScriptプロジェクト命令行構築ツールです.
なぜgruntを使いますか?
自動化する.反復的に繰り返されるタスクに対して、例えば圧縮、コンパイル、ユニットテスト、lintingなど、自動化ツールはあなたの労働を軽減し、あなたの仕事を簡略化することができます.Guntfileファイルに正しくジョブが設定されていると、自動的にあなたやあなたのグループのほとんどのつまらない作業を完了します.
gruntは事前準備を使用します.
  GrountとGrountプラグインはnpmでインストールして管理しています.npmはNode.jsのパッケージマネージャです.ですから、先にnode.jsをダウンロードしてください.コンベヤー?ドア

npm install -g grunt 

  このステップは省略してもいいです.省略するなら、package.jsonにこの依存を明記してください.以下に関連します.コマンドラインでgruntを使用するためには、Grontコマンドライン(CLI)をインストールする必要があります.

npm install -g grunt-cli

-gはグローバルインストールを表し、一部のシステムにはsudo権限が必要です.
彼はgruntを実行するたびに、nodeから提供されたrequire()システムを利用してローカルにインストールされたGrontを検索します.この仕組みのおかげで、プロジェクトの任意のサブディレクトリでgruntを実行できます.ローカルにインストールされているGranctを見つけたら、CLIはそれをローディングし、Guntfileの構成情報を伝達し、指定されたタスクを実行します.
  がgruntを使う時、普通はあなたのプロジェクトに二つのファイルを追加します.package.jsonとGuntfile.
package.jsonの書き方
nodeを使ったことがある人はプロジェクトのルートディレクトリにpackage.jsonファイルがあることを知っています.プロジェクトの基本情報(作者、プロジェクト名、バージョン番号など)とプロジェクトに必要な各種モジュールを説明します.  gruntを使用する前にgruntと関連するプラグインをプロジェクトディレクトリにインストールする必要があります.ルートディレクトリにpackage.jsonを書いて、gruntと関連プラグインをdevDependenciesの項目に書いて、インストールを実行します.

npm install

はい、npmにインストールされているモジュールを指定しない場合、npmは自動的に本カタログのpackage.jsonを検索して、中のdevDependenciesとdependenciesに明記されているモジュールを自動的にインストールします.  この点は阮一峰のキウイはもう詳しく書いてあります.コンベヤー?ドア
注意:運転項目は現在ルートディレクトリの実行npm installに必要です.そうでなければ、プロジェクトの実行時にエラーが発生します.
Guntfileの書き方
参考になるhttp://www.hulufei.com/post/grunt-introduction
このファイルはGuntfile.jsまたはGuntfile.co.ffeeと命名されています.タスクを設定または定義し、Grountプラグインをロードするために使用されます.この文書でGuntfileというのはファイルです.ファイル名はGuntfile.jsまたはGuntfile.co ffeeです.  grunt実行時にプロジェクトのGuntfileファイルを探します.Guntfileファイルの命名については、実測と大きさの関係は大きくなく、gruntfile、Guntfile、GuntFileは全部可能ですが、公式サイトによるとGuntfileと表記されています.
Guntfileは以下のいくつかの部分から構成されています.

「wrapper」関数

プロジェクトとタスク構成

gruntプラグインとタスク

をロードします.

カスタムタスク

よく使われているプラグインは以下の通りです.

jshint:簡単なjs文法検査で、具体的な構成は後で

まで述べます.

glify:圧縮コード、ウェブサイト最適化方案の一つ

concat:コード合併、ウェブサイト最適化方案の一つ

watch:リアルタイム監視、コードが変更された時に自動的に再コンパイルされ、常に保存しなくてもいいです.

ページを更新しました.
例:

module.exports = function(grunt) {

    // load tasks
    [
        'grunt-contrib-jshint',
        'grunt-contrib-qunit',
        'grunt-contrib-watch',
        'grunt-contrib-clean',
        'grunt-contrib-copy',
        'grunt-contrib-concat',
        'grunt-contrib-uglify',
        'grunt-contrib-cssmin',
        'grunt-contrib-concat',
        'grunt-contrib-less',
        'grunt-contrib-coffee',
        'grunt-usemin',
        'grunt-filerev'
    ].forEach(function(task) { grunt.loadNpmTasks(task); });


    // setup init config
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        // clean up the `dist/` directory, i.e., delete files
        clean: {
            dist: {
                src: [
                    'dist/*',

                    // funny dance to keep old versioned dist/css/*.pkg.*.css
                    '!dist/css/**',
                    'dist/css/*',
                    '!dist/css/*.pkg.*.css',

                    // funny dance to keep old versioned dist/css/*.pkg.*.js
                    '!dist/js/**',
                    'dist/js/*',
                    '!dist/js/*.pkg.*.js'
                ]
            }
        },

        // copy over `src/` files to `dist/`
        copy: {
            dist: {
                files: [{
                    expand: true,
                    dot: true,
                    cwd: 'src/',
                    dest: 'dist/',
                    src: [
                        '*',
                        'css/**',
                        'js/**',
                        'ico/**',
                        'img/**'
                    ],
                    filter: 'isFile'
                }]
            }
        },

        // compile LESS files in `src/less/` into CSS files
        less: {
            css: {
                options: {
                    paths: ["src/less"]
                },
                files: [
                    {
                        expand: true,
                        cwd: 'src/less',
                        src: ['*.less'],
                        dest: 'src/css/',
                        ext: '.css'
                    }
                ]
            }
        },

        // compile coffeescript files in `/src/coffee/` into JS files
        coffee: {
            glob_to_multiple: {
                expand: true,
                // flatten: true,
                cwd: 'src/coffee',
                src: ['**/*.coffee'],
                dest: 'src/js',
                ext: '.js'
            }
        },

        // prep call for usemin (target all html files)
        useminPrepare: {
            html: [
                'dist/*.html'
            ]
        },

        // final call for usemin (target all html files)
        usemin: {
            html: [
                'dist/*.html'
            ],
            options: {
                dirs: ['dist/']
            }
        },

        // revision a specific set of static files, this can be
        // extended to do more files and images too
        filerev: {
            files: {
                src: [
                    'dist/css/*.pkg.css',
                    'dist/js/*.pkg.js'
                ]
            }
        },

        // TODO - support qunit
        qunit: {
            files: ['test/**/*.html']
        },

        // validate JS files using jshint (great for catching simple bugs)
        jshint: {
            files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
            options: {
                // options here to override JSHint defaults
                globals: {
                    jQuery: true,
                    console: true,
                    module: true,
                    document: true
                },
                ignores: [
                    // enter paths to ignore here, e.g., 'src/js/jquery.js'
                ]
            }
        },

        // watch command to auto-compile files that have changed
        watch: {
            coffee: {
                files: ['src/**/*.coffee'],
                tasks: ['coffee', 'jshint']
            },
            less: {
                files: ['src/**/*.less'],
                tasks: ['less']
            }
        }
    });

    // Composite tasks...

    // run tests
    grunt.registerTask('test', ['jshint', 'qunit']);

    // like watch, but build stuff at start too!
    grunt.registerTask('dev', ['less', 'coffee', 'watch']);

    // full build of project to `dist/`
    grunt.registerTask('default', ['less', 'coffee', 'jshint', 'clean', 'copy',
                                   'useminPrepare',
                                   'concat', 'uglify', 'cssmin',
                                   'filerev',
                                   'usemin']);
};

タスク毎に、レジスターTaskを追加する必要があります.register Task関数の最初のパラメータはタスク名で、2番目のパラメータはサブタスクを実行します.
  具体的な書き方は公式文書を見たほうがいいです.コンベヤー?ドア
jshint文法チェック
コードを書く時は、jshintのデフォルトのルールと合致しないので、様々なエラーがあって、私は非常に不快です.道具が邪魔になるのもつらいです.ですから、個人の習慣によって、jshintを配置して、不必要な新聞ミスを減らす必要があります.
紹介する文章:JSHint使用説明
gruntで使用する場合は、文のオプションをGuntfileのjshint.optionsのkey値として、valueとして配置すれば良いです.たとえば:

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    jshint: {
      files: ['Gruntfile.js'],
      options: {
        //     JSHint       
        globals: {
          jQuery: true,
          console: true,
          module: true,
          document: true
        },
        asi: true,
        eqeqeq: false
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
};