Gruntをinstallその3

環境

• Mountain Lion

今回はgruntを使ってjavaScriptを管理します。

プロジェクトの用意

プロジェクトの親フォルダに移動します。
今回もモックのオブジェクトを使います。

package.jsonの用意

プロジェクトフォルダに移動します。

前回作成したpackage.jsを以下のように変更します。

{
  "name": "mock4",
  "version": "0.0.0",
  "description": "test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": "",
  "author": "masaya",
  "license": "BSD",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-uglify": "~0.1.1",
    "grunt-contrib-concat": "~0.1.2",
    "grunt-contrib-jshint": "~0.1.1",
    "grunt-contrib-watch": "~0.3.1",
    "grunt-contrib-cssmin": "~0.4.2"
  }
}

追加したのは以下のパッケージです。

• grunt-contrib-uglify
• grunt-contrib-concat
• grunt-contrib-jshint

grunt-contrib-concatは、jsの結合処理を実行します。
grunt-contrib-uglifyは、jsの圧縮をしてくれます。
grunt-contrib-jshintは、jshint(文法チェック)を実行してくれます。

準備ができたら下記のコマンドを打ち込みます。

npm install

node_modulesに上記のパッケージフォルダが追加されているのを確認したら次の作業にうつります

Gruntfile.jsの設定

Gruntfile.jsを設定します、

コードを以下のように記載します。

  grunt.initConfig({
   // 結合
      concat: {
        options: {
         // 結合したファイルの頭にコメント入れておく
         banner: "/* test */\n"
        },
        dist: {
          src: ['js/test.js','js/test2.js'],
          dest: 'js/script.js'
        }
      },
   // something
   
   grunt.loadNpmTasks("grunt-contrib-concat");

concatが追加した部分です。concatはjsファイルを結合します。
実行します

grunt concat
Running "concat:dist" (concat) task
File "js/script.js" created.

Done, without errors.
 

js/script.jsを見てみましょう。test.jsとjs/test2.jsが結合されたjsファイルができているはずです。

続いてminify化

 　// something
   // minify
   uglify : {
    dist : {
     src : ['js/test.js','js/test2.js'],
     dest : 'js/script.min.js'
    }
   },
   // something
   
 　grunt.loadNpmTasks("grunt-contrib-uglify");

uglifyが追加した部分です。uglifyはjsファイルをminify(圧縮)します。
実行します

grunt uglify
Running "uglify:dist" (uglify) task
File "js/script.min.js" created.
Uncompressed size: 73 bytes.
Compressed size: 42 bytes gzipped (61 bytes minified).

Done, without errors.

フォルダにscript.min.jsが作成されているはずです。

最後にjshintを実行します。これはjavaScriptの文法チェックをしてくれます。

    // jshint
 jshint: {
       options: { 
         // jshintの設定ファイル
       },
       // 対象ファイル
       all: ["test.js", "<%= concat.dist.src %>"]
    },
 

実行します

 grunt jshint
 Running "jshint:all" (jshint) task
 >> 2 files lint free.

 Done, without errors.

上手くいきましたね。

---

実際に使ってみた感想は、「便利なのでプロジェクトで使ってみよう」です。
こういったツールは、実際に運用していくことで利点や欠点が見えてきます。なので、とりあえず今やっているプロジェクトで使っていこうと思います。

ということで、こなれてきたらまた感想記事を書きます。

でわ。

関連記事

• Gruntをinstall
• Gruntをinstallその2

参考サイト

• Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門

この記事がお役にたちましたらシェアをお願いします

Tweet