Grunt の変更点 - 闘うITエンジニアの覚え書き

追加された行はこの色です。
削除された行はこの色です。
Grunt へ行く。
* Grunt [#z3c7e7bf]
#setlinebreak(on)

#html(<div style="padding:0px 0px 10px 10px;">)
SCSS や minify などを行うWebクライアント(js、css) 用のビルドツール
ファイルの監視機能によりminifyなどの自動化が行える。
#html(</div>)

#contents
-- 関連
--- [[Gulp]]

** インストール [#oaec1616]
#html(<div style="padding-left:20px;">)

*** Node.js インストール [#oaec1616]
https://nodejs.org/ から node.js をインストール

*** grunt-cli インストール [#j73bb05f]
#myterm(){{
npm install -g grunt-cli
}}

*** プロジェクト用ディレクトリを作成し移動 [#j31149be]
#myterm(){{
mkdir example_grunt
cd example_grunt
}}

*** package.json の作成 [#k3fb1b03]
#myterm(){{
npm init
}}
※聞かれる質問は全部 [Enter] 押下でも良い。

*** プロジェクトフォルダ配下に grunt をインストール [#i7a848c7]
#myterm(){{
npm install grunt --save-dev
}}
※インストールが成功すると配下に node_modules フォルダが出来る。

*** プラグインの一括インストール [#h82960a0]
#myterm(){{
npm install grunt-contrib --save-dev
}}
※grunt-contrib-sass などのように個別にインストールも可能。

#html(</div>)

** Gruntfile.js の作成 [#r75eea9b]
#html(<div style="padding-left:20px;">)

Gruntの設定ファイルは、JSON形式で記述する。

*** 例）ログを出力するだけのデフォルトタスク [#te2cf60b]
#mycode(){{
module.exports = function(grunt) {
    grunt.registerTask('default', 'testlog', function() {
        grunt.log.write('test log!!!').ok();
    }); 
}; 
}}

*** 例）js、cssのminify [#i5dc7871]
#mycode(){{
module.exports = function(grunt) {

    // タスク定義
    grunt.initConfig({
        concat: {
            files: {
                src : 'js/*.js',
                dest: 'js-all.js'
            }   
        },  
        uglify: {
            dist: {
                files: {
                    'js-all-min.js': 'js-all.js'
                    // 'js-all-min.js': 'js/*.js'                              // concat と minify を一気に行う事も可
                    // 'js-all-min.js': ['js/test1.js', 'js/test2.js']   // 配列でファイルを複数指定も可
                }   
            }   
        },  
        cssmin: {
            css : { 
                src  : 'css/*.css',
                dest : 'css-all-min.css'
            }   
        },  
        watch: {
            js: {
                 files: 'js/*.js'
                ,tasks: ['concat', 'uglify']
            },  
            css: {
                 files: 'css/*.css'
                ,tasks: ['cssmin']
            }   
        }   
    }); 

    // プラグインの読み込み
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // デフォルトタスクの指定
    grunt.registerTask('default', ["watch"]);
}; 
}}

#html(</div>)

** 実行方法 [#r75eea9b]
#html(<div style="padding-left:20px;">)

*** デフォルトタスクの実行 [#q7f3d5be]
#myterm(){{
grunt
}}

*** タスク名を指定して実行 [#q98bf48e]
#myterm(){{
grunt watch
}}
#html(</div>)