はじめに
gruntを入れてファイルの変更監視、自動minifyまでしてみるひな形的メモ。
前に似たような記事も書きましたが目的が違ったので、
今回は純粋にgruntを入れてタスクを実行するような流れとしてシンプルな手順になるようにメモります。
ゴール
この記事のゴールとして下記を目指します
- gruntを実行するまでのコマンドを簡単にメモ
- gruntを実行するまでのコマンドひな形をREADME.mdとしてまとめる
今回の流れで作成したREADME.mdはこちらです。
https://github.com/tweeeety/grunt-sample
ながれ
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も豊富で自分で作ることもできるので
いろいろ試したり自分でカスタムして便利にしていきたいですね！
