5次元のカオス

南の島の学生がつらつらと日々を書き連ねます

grunt.jsについて勉強してみた

先日のことですが、とあるゲーム開発会社に訪問しコードレビューしてもらいました.

その際に、「coffeescriptをpublic内に置いておくのはあまり良くない。grunt.jsとか使ってみたら?」というアドバイスを受け、

gruntとはなんぞやと勉強してみました.

最近の開発って自動化が必須ツールとなっているような気がします.

学習コストは高い気がするのですが、すごく便利なので使いこなしていけるといいなあ...

以下、自分への健忘録としてメモ.

※ 基本的な流れはドットインストールです.

grunt.jsとは?

公式サイトより
The less work you have to do 

Grunt.jsはnode.jsを利用したタスクの自動化のためのツールらしいです.(都合の良い部分を拝借して超訳

  • 公式サイト:gruntjs.com
  • 知識(列挙していますがお試しなのであまり必要ないです)
    • node.js
    • javascript
    • フロントエンド周りの知識
    • less
    • unixコマンド

記事を書いた時の情報

grunt-cli : v0.1.13
grunt     : v0.4.3
node.js   : v0.10.25

環境構築

npmを使ってgruntコマンドのインストールを行います.

$ npm install -g grunt-cli

プラグインなども同様の手順でインストールすることができます.

$ npm install grunt --save-dev ~

※ save-devをつけることで開発環境と本環境を切り分けることができます.

package.jsonの作成

node.jsを使ってWebサイトを作ることを想定します.

テスト用のフォルダを作成

$ mkdir mysite
$ cd mysite/

プロジェクトへgruntをインストールする

$ npm init
$ npm install grunt --save-dev
$ cat package.json

→ grunt:"~0.4.2"が追加されていることが確認できます.

package.jsonを書くことでアプリを譲渡した際に、コマンド1つで環境を構築することができます.

$ npm install

Gruntfileの作成

Gruntfileは自動化するタスクをコードにしたものです.

プロジェクト内のルートディレクトリに存在し、 同階層にpckage.jsonファイルがあります.

coffee スクリプトを使って記述していきます.

$ touch Gruntfile.coffee または touch Gruntfile.js

Gruntfileにはプロジェクトの設定やプラグインのロード、自動化するタスクを記述していきます.

プラグインの探し方

公式サイト:plgins

contribという名前が付いているものはgruntが公式にチェックしているプラグインとなっています.

プラグインを導入してみる

試しにlessをcssコンパイルするプラグインを導入していきます.

プラグインの導入

$ npm install grunt-contrib-less --save-dev

Gruntfileへの記述

Json形式で(), {}がすごく多くなってしまうのでcoffeeスクリプトで書いて手抜きしm(ry

lessファイルは適当に作る感じです.

Gruntfile.coffee

module.exports = (grunt) ->
    # プロジェクトの設定
    grunt.initConfig
        less :
            build :
                src : "src/style1.less"       # 対象フォルダ
                dest : "build/styles.css"    # コンパイル先のフォルダ

  # プラグインのロード
  grunt.loadNpmTasks('grunt-contrib-less')

  #  デフォルトのタスクを指定
  grunt.registerTask('default', 'less');

gruntの実行

Gruntfile.coffee と同改装で下記コマンドを実行.

$ grunt

エラーの無いことを確認して次に進みます.

カスタムタスクを実行する

一般的な書式

less :
    build1 :
        設定1
    build2 :
        設定2
    buildN :
        設定N

デフォルトタスク以外にも個別でタスクを設定することもできる.

# tasks1のbuild1を実行するように書きなおす
# grunt.registerTask('default', 'less')
grunt.registerTask("build1", "less:build1")

実行は下記のコマンドで行う.

$ grunt build1

→ tasksに登録したものを個別実行される

タスクのターゲット指定の方法

コンパクト形式とファイルオブジェクト形式という2つの書き方がある.

コンパクト形式

less :
    build :
        src : "src/style1.less"      # 対象フォルダ
        dest : "build/styles.css"    # コンパイル先のフォルダ
    build2 :
        src: ['src/style1.css', 'src/style2.css']
        dest: "build/styles2.css"

ファイルオブジェクト形式

less :
  build :
     files :
        "build/style1.less" : "src/styles.css"    # コンパイル先のフォルダ : 対象フォルダ

ファイルオブジェクト形式では1対多のファイル対応をさせることができる

"build/styles.css" : ["src/style1.less", "src/style2.less"]

※ * を使えばコンパクト形式でも複数ファイルに対応することはできるがファイル名の指定などができない?

※ 公式サイト gruntjs.com/configuring-tasks に書き方が指示されている.

optionsの書き方

全てのタスクに共通したオプションとあるタスクにだけオプションを適用する2つの書き方がある.

grunt-contrib-lessのcompressオプションを使って実験.

全部のタスクに共通させる

task :
    options :
        compress: true
    target1 :
        src : "src/style1.less"
        dest : "build/styles.css"
    build2 :
        src: ['src/style1.css', 'src/style2.css']
        dest: "build/styles2.css"

あるタスクにだけ適用したい

targetの中に記述することでそのタスクにのみオプションを適用できる.

 task :
     target1:
         options:
             compress: true
         src : "src/style1.less"
         dest : "build/styles.css"
     target2 :
         src : "src/style1.less"
         dest : "build/styles.css"

コメントに関するオプション

圧縮された時に、コメントを消してほしくない(ライセンスとかコピーライターcommentに!をつける.

/*! comment */g

他のプラグインを使ってみる

プラグインをいくつか導入し、試しに使ってみます.

grunt-contrib-csslint

css の妥当性をチェックするプラグイン.

導入

$ npm install grunt-contrib-csslint --save-dev

使用例

Gruntfile.coffee

module.exports = (grunt) ->
    grunt.initConfig
        csslint :
            check :
                src: "<%= less.build.dest %>" # 変数を展開させることも可能

    grunt.loadNpmTasks('grunt-contrib-less')

    grunt.registerTask("default", "csslint"]);

grunt-contrib-cssmin

css圧縮するためのプラグイン.

導入

$ npm install grunt-contrib-cssmin --save-dev

gruntのtemplate変数でコメントに日付けを挿入するなどのことができる.

"/*! <%= grunt.template.today("yyyy-mm-dd") %> */"

他の変数を展開させることも可能

"<%= css.minify.src %>""

使用例

Gruntfile.coffee

module.exports = (grunt) ->
    grunt.initConfig
        cssmin :
            options :
                banner : "/*! <%= grunt.template.today("yyyy-mm-dd") %> */"
            minify :
                src : "build/styles.css"

    grunt.loadNpmTasks('grunt-contrib-cssmin')

    grunt.registerTask("default", "cssmin"]);

grunt-contrib-watch

ファイルの変更を監視し、自動でgruntを実行してくれるプラグイン

プラグインの導入

$ npm install grunt-contrib-watch

使用例

Gruntfile.coffee

module.exports = (grunt) ->
    grunt.initConfig
        watch :
            files: "src/*.less"
            tasks: ["less". "csslint", "cssmin". "watch"]
        less :
            build :
                src : "src/style1.less"
                dest : "build/styles.css"
        csslint :
            check :
                src: "<%= less.build.dest %>"
        cssmin :
            options :
                banner : "/*! <%= grunt.template.today("yyyy-mm-dd") %> */"
            minify :
                src : "build/styles.css"

    grunt.loadNpmTasks('grunt-contrib-less')
    grunt.loadNpmTasks('grunt-contrib-csslint')
    grunt.loadNpmTasks('grunt-contrib-cssmin')
    grunt.loadNpmTasks('grunt-contrib-watch')


    grunt.registerTask("default", ""watch"");

→ 指定したlessファイルに変更があったときに自動でgruntを実行する

※ watchを止めるには ctrl - cで止める

livereloadオプション

ファイルを監視し、変更があった場合にブラウザをリロードするためのプラグイン.

grunt-contrib-connect

擬似的にサーバを起動するためのプラグイン.

optiondでホスト名とポートを指定するとそこにアクセスできるようになる.

(Apacheを動かしているようなイメージ)

ちなみにconnectはNode.jsで広く使われているシンプルなWeb serverである.

導入

$ npm install grunt-contrib-connect

使用例

Gruntfile.coffee

module.exports = (grunt) ->
    grunt.initConfig
        connect : 
            server : 
                options :
                    port: 8080;
                    hostname; "192.168.33.1"
                    livereload: 35729


    grunt.loadNpmTasks('grunt-contrib-connect')

    grunt.registerTask("default", "connect"]);

livereloadオプション

ファイルを監視し、変更があった場合はブラウザをリロードするためのオプション.

オプションをつけるとlivereload.jsを自動作成してくれるため、それを編集中のhtmlから読み込む形になる.

index.htmlに下記のスクリプトを追加

<script src="http://192.168.33.76:35729/livereload.js">

※ 35729がデフォルトのポートとなっている

参考