tweeeetyのぶろぐ的めも

アウトプットが少なかったダメな自分をアウトプット<br>\(^o^)/

【grunt】Gruntを使うまでのシンプルメモ - node、npmからのgruntでjavascriptメモ(やcss)ファイルの変更監視と自動minifyしてみる

はじめに

gruntを入れてファイルの変更監視、自動minifyまでしてみるひな形的メモ。
前に似たような記事も書きましたが目的が違ったので、

今回は純粋にgruntを入れてタスクを実行するような流れとしてシンプルな手順になるようにメモります。

ゴール

この記事のゴールとして下記を目指します

  • gruntを実行するまでのコマンドを簡単にメモ
  • gruntを実行するまでのコマンドひな形をREADME.mdとしてまとめる

今回の流れで作成したREADME.mdはこちらです。
https://github.com/tweeeety/grunt-sample

ながれ

  1. Node.jsインストール(インストール)
  2. grunt-cliインストール
  3. projectの初期設定の初期設定する(npm initでpackage.json作成)
  4. GruntとGruntプラグインのインストール
  5. Gruntタスクを書く(Gruntfile.jsを作成)
  6. Gruntを実行してみる

1. Node.jsインストール(インストール)

Homebrewインストール

Node.jsをインストールするためにはHomebrewをインストールします。

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

ここでは割愛しますがHomebrewインストールの詳細は下記で。
Mac OS XにHomebrewインストール。command line developer tools入れたり使い方メモったり(install、update、upgradeなど)

Node.jsインストール

Node.jsをインストールします。
また、Node.jsをインストールするとnpmも一緒にインストールされます。

※ homebrewでnode.jsインストール
$ brew install node

※ nodeのバージョン確認
$ node -v
v0.12.0

※ npmのバージョン確認
$ npm -v
2.5.1
npmって?

参考サイトまんまですが一応

「npm」とはNode.jsのモジュールを管理するためのツールです。
Node.jsにはさまざまなモジュールが公開されており、npmを使うことで簡単にインストールできます。
また、自分でモジュールを作成して公開する場合にもnpmを使用します。

詳細は参考リンクを張っておきます。
いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール (2/2)

2. grunt-cliインストール

grunt-cliコマンドラインでgruntを利用するためのツール群です。

$ npm install -g grunt-cli

※ バージョン確認
$ grunt --version
grunt-cli v0.1.13

詳細はこちら
いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール (2/2)

3. projectの初期設定の初期設定する(npm initでpackage.json作成)

※ プロジェクトディレクトリに移動
$ cd [path_to_projekt_dir]

$ npm init
Press ^C at any time to quit.
name: (grunt-sample) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: (https://github.com/tweeeety/grunt-sample.git) 
keywords: 
author: tweeeety
license: (ISC) (BSD) MIT
About to write to /Users/tweeeety/github/grunt-sample/package.json:

{
  "name": "grunt-sample",
  "version": "1.0.0",
  "description": "grunt base sample.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/tweeeety/grunt-sample.git"
  },
  "author": "tweeeety",
  "license": "(BSD) MIT",
  "bugs": {
    "url": "https://github.com/tweeeety/grunt-sample/issues"
  },
  "homepage": "https://github.com/tweeeety/grunt-sample"
}

※ 確認(package.jsonだけ作成される)
$ ls -al 
drwxr-xr-x  13 tweeeety  tweeeety  442  3 15 11:50 .git
-rw-r--r--   1 tweeeety  tweeeety   34  3 15 11:50 README.md
-rw-r--r--   1 tweeeety  tweeeety  476  3 15 12:15 package.json

4. GruntとGruntプラグインのインストール

Grunt本体とGruntのプラグインを入れます。基本コマンドは下記。

npm install [module] --save-dev

-save-devオプションを付けると
installしたlibrary情報をpackage.jsonに追加してくれます。

Grunt入れる

Gruntを入れます。

$ npm install grunt --save-dev
補足

-gオプションを付けるとインストール先がglobalになります。
プロジェクトごとにプラグインを入れたいので今回は付けません。
確認するとこんな感じで追加されてます

$ pwd
[path_to_project]

$ ls -al
drwxr-xr-x  13 tweeeety  staff  442  3 15 11:50 .git
-rw-r--r--   1 tweeeety  staff   34  3 15 11:50 README.md
drwxr-xr-x   3 tweeeety  staff  102  3 15 12:24 node_modules ← 増えた
-rw-r--r--   1 tweeeety  staff  526  3 15 12:24 package.json

$ tree -d -L 4
.
└── node_modules
    └── grunt
        ├── internal-tasks
        ├── lib
        │   ├── grunt
        │   └── util
        └── node_modules
            ├── async
            ├── coffee-script
            ├── colors
            ├── dateformat
            ├── eventemitter2
            ├── exit
            ├── findup-sync
            ├── getobject
            ├── glob
            ├── grunt-legacy-log
            ├── grunt-legacy-util
            ├── hooker
            ├── iconv-lite
            ├── js-yaml
            ├── lodash
            ├── minimatch
            ├── nopt
            ├── rimraf
            ├── underscore.string
            └── which
Gruntプラグイン入れる

今回はsmaple用にuglifyプラグインwatchプラグインを入れます。
uglifyプラグインはjsのminifyに使用します。
watchプラグインはファイルの変更を監視して、ファイルに変更が合った際に何かタスクを実行させます。

※ プラグイン インストール
$ npm install grunt-contrib-uglify grunt-contrib-watch --save-dev

※ 確認
$ tree -d -L 3
.
└── node_modules
    ├── grunt
    │   ├── internal-tasks
    │   ├── lib
    │   └── node_modules
    ├── grunt-contrib-uglify
    │   ├── node_modules
    │   └── tasks
    └── grunt-contrib-watch
        ├── node_modules
        └── tasks
補足

package.jsonを見ると"devDependencies"
インストールした情報が追加されてるのがわかります。

・・・省略・・・
 "homepage": "https://github.com/tweeeety/grunt-sample",
 "devDependencies": {
  "grunt": "^0.4.5",
"grunt-contrib-uglify": "^0.8.0", "grunt-contrib-watch": "^0.6.1"  }
}

5. Gruntタスクを書く(Gruntfile.jsを作成)

Gruntfile(Grujntfile.js or Gruntfile.coffee)は、 gruntコマンドを実行した際に行われるタスクを順番に書いてまとめておくようなファイルです。
プロジェクト内のルートディレクトリに存在し、 同階層にpckage.jsonファイルが必要です。

Gruntfileは下記の項目によって構成されています。

  • "wrapper"関数
  • プロジェクトとタスクの設定
  • Gruntプラグインとタスクの読み込み
  • カスタムタスク
Gruntファイル書く
baseサンプル

Gruntファイルのサンプルはこんな感じで書きます。
これだけで見ると簡単ですね。

module.exports = function(grunt) {
  // Gruntの設定
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
  });

  // 各タスクの設定を書く
  grunt.initConfig({ 
    task1 : {...},
    task2 : {...},
  });

  // defaultタスク(gruntコマンドのみで実行されるタスク)の定義
  grunt.registerTask('default', ['task1', 'task2']);  
};
今回の設定

今回の設定をGruntファイルに書きます

module.exports = function(grunt) {
  // Gruntの設定
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
  });

  // 各タスクの設定
  grunt.initConfig({
    uglify : {
      main : {
        files : {
          'js/sample.min.js' : ['js/sample.js']
        }
      }
    },
    watch: {
      styles: {
        files: ['js/*.js'],
        tasks: ['uglify']
      }
    }
  });

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

  // defaultタスクの設定
  grunt.registerTask('default', ['uglify', 'watch']);
};

6. Gruntを実行してみる

Gruntを実行してみます。

jsの作成

と、その前にプロジェクトディレクトリ内には
jsをはじめ、htmlすら作ってないので挙動の確認のために作っておきます。

※ 形だけindex.html作る
$ touch index.html

※ jsディレクトリを作成してminifyする前に軽くjs書いておく
$ mkdir js

$ vim js/sample.js
--- vi追記 ----
var func = function() {
  alert('this is sample');
};
func();
--------------
grunt動かす

gruntと打つとデフォルトタスクに設定したタスクが順番に実行されます。
watchはファイルの変更を監視するのでフォアグラウンドで動き続けます。

$ grunt
Running "uglify:main" (uglify) task
>> 1 file created.

Running "watch" task
Waiting...
minifyされたファイルを確認

別のターミナルを開いてminifyされたファイルを確認してみます。

※ 中身を見るとminifyされている
$ vim js/sample.min.js 
var func=function(){alert("this is sample")};func();

まとめ

シンプルな手順をメモとしてまとめて見ました。
今回の流れで作成したコピペ用README.mdはこちら。
https://github.com/tweeeety/grunt-sample

gruntはpluginも豊富で自分で作ることもできるので
いろいろ試したり自分でカスタムして便利にしていきたいですね!

参考:grunt-pluginの作り方と解剖