Gruntでjavascriptとcssをタスク制御 - m_shige1979のときどきITブログ

自動化する方法

Gruntが最近のベストっぽいので簡単に調査

やりたいこと

javascriptのコードチェック

javascriptの圧縮

cssをcompassを使用してscssから変換

手順

nodejsをセットアップ

grundをインストール

gruntのプラグインをインストール

Gruntfile.jsを編集

実行

今回の環境

Windows8 64bit
※なんかLinuxでやろうと思ったけどちょっと面倒そうだったので

手順

nodejsの確認

C:\Users\m_shi_000>node -v
v0.10.22

C:\Users\m_shi_000>npm -v
1.3.14

C:\Users\m_shi_000>

作業ディレクトリを作成してそこで「npm init」を実行

C:\Users\m_shi_000>cd c:\Tools\grunt\sampleproject

c:\Tools\grunt\sampleproject>npm init

※あとなんかいろいろ対話式ででるので回答すると「package.json」を作成

必要なものをnpmインストール

# package.jsonにgruntを追加
npm install grunt --save-dev

# gruntのプラグインを追加
npm install grunt-contrib-clean      --save-dev
npm install grunt-contrib-coffee     --save-dev
npm install grunt-contrib-compass    --save-dev
npm install grunt-contrib-compress   --save-dev
npm install grunt-contrib-concat     --save-dev
npm install grunt-contrib-connect    --save-dev
npm install grunt-contrib-copy       --save-dev
npm install grunt-contrib-cssmin     --save-dev
npm install grunt-contrib-csslint    --save-dev
npm install grunt-contrib-handlebars --save-dev
npm install grunt-contrib-htmlmin    --save-dev
npm install grunt-contrib-imagemin   --save-dev
npm install grunt-contrib-jade       --save-dev
npm install grunt-contrib-jasmine    --save-dev
npm install grunt-contrib-jshint     --save-dev
npm install grunt-contrib-jst        --save-dev
npm install grunt-contrib-less       --save-dev
npm install grunt-contrib-livereload --save-dev
npm install grunt-contrib-nodeunit   --save-dev
npm install grunt-contrib-qunit      --save-dev
npm install grunt-contrib-requirejs  --save-dev
npm install grunt-contrib-sass       --save-dev
npm install grunt-contrib-stylus     --save-dev
npm install grunt-contrib-uglify     --save-dev
npm install grunt-contrib-watch      --save-dev
npm install grunt-contrib-yuidoc     --save-dev

※--saveを指定することでpackage.jsonに登録

Gruntfile.js編集

'use strict';
module.exports = function(grunt) {
    // 設定
    grunt.initConfig({
        // package.jsonに設定されている内容を取得
        pkg: grunt.file.readJSON('package.json'),
        
        // 規約チェック
        jshint: {
            options: {
                jshintrc: '.jshintrc'
            },
            
            // 対象ファイル
            files: [
                'Gruntfile.js',
                'js/**/*.js'
            ]
        },
        
        // jsファイル圧縮
        uglify: {
            compressTarget: {
                options: {
                    // ソースマップ
                    sourceMap: function(name){
                        return name.replace(/.min.js/,'.map');
                    }
                },
                files: [{
                    expand: true,           // ？
                    cwd: 'js/',             // 移動先ディレクトリ
                    src: ['**/*.js'],       // ソース
                    dest: 'compress/',      // 圧縮先
                    ext: '.min.js'          // 拡張子
                }]
            }
        },
        
        // compass
        compass: {
            dev: {
                options: {
                    config: 'compass_config_dev.rb',    // 設定ファイル
                    environment: 'development'          // 環境
                }
            },
            prod: {
                options: {
                    config: 'compass_config.rb',        // 設定ファイル
                    environment: 'production'           // 環境
                }
            }
        },
        
        // 監視
        watch: {
            jshint: {
                files: [
                    '<%= jshint.files %>'
                ],
                tasks: ['jshint'],
                options: {
                    debounceDelay: 1000
                }
            },
            
            uglify: {
                files: [
                    'js/**/*.js'
                ],
                tasks: ['uglify'],
                options: {
                    debounceDelay: 1000
                }
            },
            
            compass: {
                files: [
                    'sass/**/*.scss'
                ],
                tasks: ['compass'],
                options: {
                    debounceDelay: 1000
                }
            }
        }
    });
    
    // プラグインをロード
    grunt.loadNpmTasks('grunt-contrib-uglify');     // 圧縮用
    grunt.loadNpmTasks('grunt-contrib-jshint');     // コードチェック用
    grunt.loadNpmTasks('grunt-contrib-compass');    // compass
    grunt.loadNpmTasks('grunt-contrib-watch');      // 監視
    
    // 登録するタスク
    grunt.registerTask('default', ['jshint', 'uglify', 'compass:dev', 'compass:prod']);

};

実験

C:\Tools\grunt\sampleproject>grunt watch
Running "watch" task
Waiting...

で待機状態になるのでjsファイルなどを更新したら

Waiting...OK
>> File "js\test2.js" changed.

Running "jshint:files" (jshint) task
>> 10 files lint free.

Done, without errors.
Running "uglify:compressTarget" (uglify) task
Source Map "compress/aaa/bbb/test.map" created.
File "compress/aaa/bbb/test.min.js" created.
Source Map "compress/aaa/bbb/test2.map" created.
File "compress/aaa/bbb/test2.min.js" created.
Source Map "compress/aaa/bbb/test3.map" created.
File "compress/aaa/bbb/test3.min.js" created.
Source Map "compress/aaa/test.map" created.
File "compress/aaa/test.min.js" created.
Source Map "compress/aaa/test2.map" created.
File "compress/aaa/test2.min.js" created.
Source Map "compress/aaa/test3.map" created.
File "compress/aaa/test3.min.js" created.
Source Map "compress/test.map" created.
File "compress/test.min.js" created.
Source Map "compress/test2.map" created.
File "compress/test2.min.js" created.
Source Map "compress/test3.map" created.
File "compress/test3.min.js" created.

Done, without errors.
Completed in 4.369s at Fri Nov 29 2013 07:26:12 GMT+0900 (東京 (標準時)) - Waiting...

となる

まとめ

一応やりたいことはできるようでこれである程度の作業が捗りそう。
編集するファイルは１箇所で公開するのは開発と本番で分けて対応できそうかはそのうち調査する
compassでscssの変換しかしてなかったので便利そう
なんかyeoman、bowerなどがあったらもっと便利になりそうなんでそれも合わせてチェックする