黒田 晋一 エディタをNetBeansからSublimeTextに移行し始めて1ヶ月と少し。だいぶ環境に慣れてきたので、欲を出してGruntを試してみました。
SCSSからCSSへの変換処理だけなら、これまでどおりで良かったのですが、機能ごとに分けて作ったJSの結合もやってみたいと思っていたのがGruntを試した理由です。Gruntを導入する工程を、残しておいたEvernoteのメモから転記します。作業はTerminal.appで行います。
Macの設定
MacPortsのデータベースアップデート
- Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門を見ながら設定を始める。
- ターミナルでNode.jsが使える状態にしておく必要があるようなので、MacPortsでインストールを試みる。
- …と、その前にMacPortsのportデータベースのアップデート(sudo port selfupdate)をしようとすると、失敗する。どうやら定期的にアップデートしないと、不具合が起きるようだ。
- sudo port clean all を実行してみる(少し待つ)。
- もう一度、sudo port selfupdate を実行(少し待つ)。
- selfupdateが終わると、「The ports tree has been updated. To upgrade your installed ports, you should run port upgrade outdated」とメッセージが出たので、port outdatedを入力して、古いパッケージを確認する。
- ズラズラ、っと出る。
- sudo port upgrade installed を実行して、インストールされているパッケージのアップデートを試みる。
- 「Error: Problem while installing subversion-perlbindings-5.16」と言われる。
- sudo port -f activate subversion-perlbindings-5.16 を実行してみる。
- sudo port upgrade installedをもう一度実行してみる。
- この間、「Warning: No port ncursesw found in the index. 」のメッセージを確認。
- 途中でとまったので、Ctrl+Cで終了。
- port list installedでインストールされているパッケージを確認。
- sudo port -uf uninstallで重複パッケージを削除。
- もう一度、sudo port selfupdate を実行。
…面倒なツールだ。MacPortsの設定を完璧にするのを諦めて次の工程へ。
Node.jsのインストール
- sudo port install nodejsを実行。
- node -vでバージョン確認。インストール時は0.10.26。
- 【Mac OSX】node.jsをローカルで動かす！ « zoomAroidを見ながらhoge.jsを、作成したnodeディレに入れ、cd移動後、node hoge.js を実行。
- Node.jsが動くことを確認する。
npm(パッケージ管理ツール)のインストール
- sudo npm install -g grunt-cliを実行。sudo: npm: command not found と言われる。
- sudo port install npm を実行。
- npm -vでバージョン確認。インストール時は1.4.4。
Gruntの設定
grunt-cliのインストール
- sudo npm install -g grunt-cliをもう一度実行。
- Gruntを使う準備が整う。
初期設定
- 実行ディレに移動。
- npm initを実行。
- package.json生成のための初期値を聞かれる。
- Gruntを使ってJSやCSSの面倒なタスクを自動化しよう | kudox.jpを見ながら設定。
- name : プロジェクト名
- version : 0.1.0(とりあえず)
- description : プロジェクトの説明
- entry point : Gruntfile.js
- test command : return
- git repository : return
- keywords : return
- author : @busstop_kuroda
- license : とりあえずMITにしておく。
- Is this ok?と聞かれるので yesと入力。
Gruntのインストール
- npm install grunt –save-dev を実行し、Gruntをインストール。node_modulesディレ(この中にGruntが入っている)の生成とpackage.jsonに必要な情報が追加されたのを確認。
- npm install grunt-contrib-watch grunt-contrib-cssmin –save-devを実行し、grunt-contrib-watch(ファイル監視処理用モジュール)とgrunt-contrib-cssmin(CSSをミニファイ保存するモジュール)を入れる。
- 一度、node_modulesを削除し、npm installを実行。package.jsonが使い回せるかテストする。node_modulesが無事生成されたのを確認。
- npm install grunt-contrib-compass –save-devを実行。
- npm install grunt-contrib-sass –save-devを実行。
- npm install grunt-contrib-connect –save-devを実行。
- npm install grunt-open –save-devを実行。
- npm install grunt-contrib-concat –save-devを実行。(ファイル結合用)
watchとconnectを併用することでLivereloadが出来るらしいので、今回は使いませんがgrunt-contrib-connectと関連しているgrunt-openも、とりあえず入れておきました。grunt-contrib-cssminもついでです。
Gruntfile.jsの作成
module.exports = function(grunt) {
grunt.initConfig({
//compass
compass: {
dist: {
options: {
config: 'config.rb'
}
}
},
//watch
watch: {
options: {
livereload: true
},
//html
html: {
files: '*.html',
tasks: ['']
},
//sass
sass: {
files: 'sass/*.scss',
tasks: ['compass']
},
//js
js: {
files: 'prejs/*.js',
tasks: ['concat']
}
},
//concat
concat: {
prod: {
//連結するファイル
src: [
"prejs/_function.js",
"prejs/_intro.js",
"prejs/_lightBox.js",
"prejs/_outro.js",
],
//JSファイル生成
dest: "js/all.js"
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-concat');
//gruntコマンドで実行するタスク
grunt.registerTask('default', ['connect','watch','compass','concat']);
};[Grunt] JSファイルを結合するときに無名関数として出力する | un-T factory! Interactive blogを見ながら設定してます。
watchで作業ディレ内の『sass』ディレと『js』ディレを監視し、sassはファイルに変更があればcompassタスクを実行、jsはconcatタスクを実行し、その実行内容をconcat内に記述しています。
Gruntの実行(terminal.app)
gruntと打って実行するだけです。これで当初予定していたJSファイルの連結もSASS処理に加えて行えるようになりました。Gruntの設定よりMacPortsの設定に手こずった印象です。