- 追加された行はこの色です。
- 削除された行はこの色です。
*最小限のGrunt実行サンプル
基本の手順をしっかり覚えましょう！
+Gruntを実行するディレクトリ（≒ プロジェクトディレクトリ）を作成してターミナルで開きます
+package.json（≒ プロジェクトファイル）を自動生成します
nmp init
+ローカルにgruntモジュールをインストールします
sudo npm install grunt --save-dev
+Gruntfile.js（≒ makefile）を作成します
+Gruntを実行します
grunt
引数を付けないとターゲットはdefaultとなります。「grunt default」と同じです。
~
ディレクトリ・ファイル構成
#pre{{
Grunt実行ディレクトリ ... ≒ プロジェクトディレクトリ
package.json ... ≒ プロジェクトファイル。「npm init」で自動生成
Gruntfile.js ... ≒ makefile。手動で作成
node_modules ... 「sudo npm install grunt --save-dev」などで自動生成
grunt
*.*
}}
~
備考：「--save-dev」オプションにより、どのモジュールを使用しているかがpackage.jsonに追記されます。
node_modulesを削除しても、このpackage.jsonがあれば、他の環境でも「npm install」とすれば同じようにモジュールがインストールされます。
~
package.json例
#pre{{
{
"name": "projectFoo",
"version": "1.0.0",
"description": "",
"main": "Gruntfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5"
}
}
}}
~
Gruntfile.js例
#pre{{
module.exports = function(grunt) {
// config
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
// plugin
// plugins
// tasks
grunt.registerTask('default', 'Log some stuff.', function() {
grunt.log.write('Logging some stuff...').ok();
});
};
}}
~
GruntfileはCoffeeScriptでも記述できます。
~
Gruntfile.coffee
#pre{{
module.exports = (grunt) ->
# config
grunt.initConfig
pkg: grunt.file.readJSON "package.json"
# plugin
# plugins
# tasks
grunt.registerTask "default","Log some stuff.",() ->
grunt.log.write "Logging some stuff..."
}}
~
サンプルでの「grunt」実行結果例
Running "default" task
Logging some stuff...OK
Done, without errors.
参考url: [[ブラックなWeb開発現場の救世主、Gruntのインストールと使い方 | @IT>http://www.atmarkit.co.jp/ait/articles/1403/04/news020.html]]
*リンク
-[[コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順 | OZPAの表4>http://ozpa-h4.com/2014/02/06/grunt-js-install/]]
-[[Gruntで始めるWeb開発爆速自動化入門（1）：ブラックなWeb開発現場の救世主、Gruntのインストールと使い方 | ＠IT>http://www.atmarkit.co.jp/ait/articles/1403/04/news020.html?fb_action_ids=495947923840680&fb_action_types=og.likes&fb_source=other_multiline&action_object_map=%5B407791856024072%5D&action_type_map=%5B%22og.likes%22%5D&action_ref_map=%5B%5D]]
-[[Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 | WWW WATCH>http://hyper-text.org/archives/2014/01/grunt_quick_start_for_web_designer.shtml]]
