概要

各種jsのcombine(結合)及びminify(難読)を行うためのツールで他にも有名どころとしてgulp、google closure compilerがある。
visualStudioCodeで作業することが多かったため、vsCodeへの導入をメモ

導入手順

※導入するプロジェクトファイあるのルートを開いた状態でスタートすること

Node.jsをインストールする
（vsCodeでnpm, nodeが使用できるようになる）
（Node.js）https://nodejs.org/en/
　LTSの方をインストール
Node.jsがインストールできたら、vsCodeを再起動する
vsCodeのターミナルでgrunt-cliをインストール
npm install -g grunt-cli
フォルダにgruntをインストール
(初回のみ gitにコミット済みであればスキップ)
場所は、プロジェクトのルートがいい（srcと同じ階層など）
npm install grunt -save-dev
grunt -Vでverが確認できればおｋ
Gruntfile.jsを作成
(初回のみ gitにコミット済みであればスキップ)


/// Gruntfile.js
module.exports = function (grunt) {
    // タスクの設定
    grunt.initConfig({
        uglify: {//← uglifyでないとダメ　コマンド設定
            options: {// オプションを設定する
                mangle: true,//ローカル変数名を短い名称に変更し難読化します。
                compress: true//冗長なコードを短くまとめてくれます。
                // beautify: true//改行、インデントは取り除かず、読みやすいように整形します。
                // sourceMap:/*ソースマップも合わせて出力します。ファイルの展開先と同じディレクトリに生成されます。ソースマップは、ファイルのマッピングを解決してくれるので圧縮されたファイルでデバッグする際に便利です*/
                // sourceMapName://ソースマップの生成先とファイル名を指定できます。 文字列をそのまま渡すか、関数でも渡せます。
                // preserveComments: /*メントの残し方を指定します。'all' ですべてのコメントを残します'some' で /*! から始まるコメントだけ残ります。バナーやライセンス表記の際に便利です*/
                // banner: //指定文字列をファイル冒頭、もしくは下部に追加した状態で生成されます
                // footer: //指定文字列をファイル冒頭、もしくは下部に追加した状態で生成されます
            },
            build1: { //srcにminify化したいファイルのパス　destにminify化後のパスを記載する
                src: 'src/js_dev/test1.js',
                dest: 'src/build/test1.min.js'
            },
            build2: {
                src: 'src/js_dev/test2.js',
                dest: 'src/build/test2.min.js'
            }
        },
        concat: {//← concatでないとダメ　コマンド設定
            js: {//←　好きな名前でどーぞ　build1とかと同様
                files: {
                    'src/build/combine.js': [// 統合ファイルのパス
                        'src/build/test1.min.js',// 統合元のファイルのパス
                        'src/build/test2.min.js'
                    ]
                }
            }
        },
       watch: {
            dev: {
                files: [// ←監視したいファイルのパスを設定
                    'src/js_dev/*.js',
                    'src/js_dev/*/*.js',
                ],
                tasks: ['uglify', 'concat'],// ←監視しているファイルに更新があった場合に行うタスクを設定
            }
        }
    });
    // モジュールの読み込み
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');    
    grunt.loadNpmTasks('grunt-contrib-watch');
    // タスクの登録
    grunt.registerTask('default', ['uglify', 'concat']);
};
//grunt uglifyを実行するとbuild1とbuild2が実行される
//grunt uglify:build1を実行するとbuild1のみ実行される
//grunt を実行するとuglifyを実行した後にconcatを実行する
//grunt watchを実行するとファイルの監視が始まり、監視しているファイルが更新されるたびにtasksが実行される

自動更新について

1.　npm install grunt-contrib-watch --save-dev(ファイル監視)
でwatchを導入し、Gruntfile.jsにwatchの設定をする

2.　vsCodeのコンソールにてgrunt watchを入力

C:\MyWorks\test>grunt watch
Running "watch" task
Waiting...

のようになればOK

参考文献

・https://qiita.com/koara-local/items/1db82e3bfb3064c41862
・http://webdrawer.net/javascript/firstgrunt.html
・https://qiita.com/shuntaro_tamura/items/6cf755d408eaad8572ad
・http://blog.tsumikiinc.com/article/20140731_how-to-use-grunt-contrib-uglify.html
・http://kudox.jp/server/grunt-js