引き続き、開発環境を整える。
今回はメタ言語が使えるようにするのと、Grunt.jsの設定、ローカル開発環境の構築。
おまけでWordpressのインストール。
メタ言語関連
sass導入
cssのメタ言語。
% gem install sass
compass導入
sassを元にしたフレームワーク。
% gem install compass
ターミナル再起動後、ちゃんとインストールできているかを確認する。
% sass -v % compass -v
node.js導入
サーバーサイドJavaScript。
公式サイトからパッケージをダウンロードしてインストール。
npmを使うために必要。
CoffeeScript導入
JavaScriptのメタ言語。
% npm install -g coffee-script
Grunt導入
node.jsを利用したビルドツール。
コンパイルやminify、CSS Spriteの生成などを自動化できる。
% sudo npm install -g grunt-cli
使い方
プロジェクトごとに設定が必要。まずは作業ディレクトリに移動して、package.jsonを生成。
% npm init
中身はこんな感じ。
{
"name": "hoge",
"version": "0.0.0",
"description": "fuga",
"main": "piyo.js",
"scripts": {
"test": "nyan"
},
"author": "saitokensuke",
"license": "ISC"
}
gruntをインストール。
–save-devをつけると、package.jsonにインストールした情報が書き込まれる。
% npm install grunt --save-dev
よく使う機能を入れてみる。
% npm install grunt-contrib-compass grunt-contrib-watch grunt-contrib-uglify --save-dev
Gruntfile.jsを作成し、読み込むプラグイン、タスクなどを記述する。
module.exports = function(grunt) {
var package = grunt.file.readJSON('package.json');
grunt.initConfig({
compass: {
options: {
specify : 'hoge/sass/screen.scss',
sassDir : 'hoge/sass',
cssDir : 'hoge/css',
imageDir : 'hoge/images',
httpGeneratedImagesPath : 'hoge/images',
outputStyle : 'compact',
noLineComments : true
}
},
uglify : {
files : {
hoge/js/app.min.js : [
hoge/js_src/util.js,
hoge/js_src/applicatins.js
]
}
},
watch: {
files: ['hoge/sass/*.scss/', 'hoge/sass/*/*.scss'],
tasks: ['compass']
}
});
var taskName;
for(taskName in package.devDependencies) {
if(taskName.substring(0, 6) == 'grunt-') {
grunt.loadNpmTasks(taskName);
}
}
grunt.registerTask('default', ['compass', 'uglify']);
};
watchでフォルダを監視して、変更があったらタスクを自動的に実行する。
% grunt watch
ローカル開発環境構築
iOSシミュレータをDockに追加
Spotlightから使おうとしても出てこない。
Xcodeを立ち上げれば使えるけど、ショートカットをDockに追加しておくと便利。
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone
パッケージの内容を展開して進んでいくと、Simulator.appがある。
デフォルトの設定だと日本語が死んでるので、言語環境を日本語に変更するといい。
VirtualBoxでWindows環境を構築
「VirtualBox 4.3.6 for OS X hosts x86/amd64」をダウンロードしてインストール。公式サイト。
modern.IEでIEの動作確認環境を整える
公式サイトにいって、VMを入手。
MacのVirtualBox用のパッケージを選択。
「IE10 – Win8」の「Grab them all with cURL」を選ぶと、以下のコマンドを実行するように求められる。
% curl -O -L "http://www.modern.ie/vmdownload?platform=mac&virtPlatform=virtualbox&browserOS=IE10-Win8.1&filename=VirtualBox/IE10_Win8/Mac/IE10.Win8.For.MacVirtualBox.part{1.sfx,2.rar,3.rar,4.rar,5.rar}"
.sfxファイルを実行可能にする。
% chmod +x IE10.Win8.For.MacVirtualBox.part1.sfx
実行する。
% ./IE10.Win8.For.MacVirtualBox.part1.sfx
.ovaファイルが作成されるので、ダブルクリックで実行するとインストールされる。
WordPressをインストール
MAMPを落としてインストール。
WordPressをダウンロードして解凍。
「/Applications/MAMP/htdocs」内に「blog」など適当な名前のフォルダを作って、wordpressを配置。
http://localhost:8888/MAMP/?language=Japanese にアクセスし、phpMyadminの設定。
わかりやすいので、さっきと同じ「blog」という名前でデータベースを作成。
終わったらhttp://localhost:8888/blog/wordpress/ にアクセス。
設定ファイルを作成する。
からの「さあ、始めましょう！」
データベース、ユーザー名、パスワードを適当に設定して送信。
アカウント名やパスワードなど、必要情報を入力して、WordPressをインストール。
ログイン画面に移るので、いま設定したアカウントでログイン。
参考
CSSの常識が変わる！「Compass」、基礎から応用まで！
CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門
Mac+VirtualBox+modern.IEでIE6~10環境を無料で構築する
MAC：MAMPを使ってローカル環境にWORDPRESSのテスト環境を作ってみた
