ローカルでの開発環境
今までは会社と自宅でそれぞれローカルサーバー用のディレクトリを用意しておいてそこに作業ファイルを放り込んでからMAMPなりXAMPPでサーバー作って確認してたけどなんか面倒くさくなってきたのが発端。しかもGit使ってバージョン管理し始めたりgrunt使い出したから色々納品時に不要なファイルも混在してくるのでなんかいい方法がないか模索してるとこと。
ディレクトリ構造
gruntでSass使いつつGitでバージョン管理する場合、とりあえずhtdocs以下に下記のように展開することにした。
.
└── development
├── .git
├── .sass-cache
├── Rakefile
├── css
│ ├── _src
│ │ ├── _base.scss
│ │ ├── _cssfonts.scss
│ │ ├── _functions.scss
│ │ ├── _layout.scss
│ │ ├── _mixins.scss
│ │ ├── _modules.scss
│ │ ├── _normalize.scss
│ │ ├── _variables.scss
│ │ └── styles.scss
│ ├── all.css
│ └── all.min.css
├── grunt.js
├── index.html
├── js
│ ├── _src
│ │ ├── jquery-1.7.1.min.js
│ │ ├── jquery-ui-1.8.18.custom.min.js
│ │ ├── jquery.easing.1.3.js
│ │ ├── jquery.ui.plugin.js
│ │ └── scripts.js
│ ├── all.js
│ ├── all.min.js
│ ├── jquery-1.7.2.min.js
│ └── modernizr-2.5.3.min.js
└── tasks
├── cssmin.js
└── sass.js
Rakefileの内容
作業に必要そうなものをポツポツ追加していってる。 ruby分からんから適当だけどまあ動けばいいやと思ってる。 上からgruntの監視用、ローカルサーバー用（http://localhost:8000/で確認出来る）、納品ファイル生成用のコマンド。
# Usage: rake watch
desc "Watch files"
task :watch do
sh "grunt watch"
end
# usage: rake preview
desc "Launch preview environment"
task :preview do
sh "grunt"
sh "ruby -rwebrick -e \"WEBrick::HTTPServer.new({:DocumentRoot => './', :Port => 8000}).start\""
end
# usage: rake generate
desc "Generate production file"
task :generate do
sh "cp -Rfpav './' '../production'"
sh "find '../production' -name '_src' -o -name '.*' -o -name 'grunt.js' -o -name 'Rakefile' -o -name 'tasks' | xargs rm -rfv"
end
納品ファイルの生成
上記のRakeコマンド、rake generateを叩くと下記ファイルがdevelopmentと同階層に生成される。
.
└── development
└── production
├── css
│ ├── all.css
│ └── all.min.css
├── index.html
└── js
├── all.js
├── all.min.js
├── jquery-1.7.2.min.js
└── modernizr-2.5.3.min.js
これで完成。 ちょこちょこ追加していこう。
