Grunt + Bower + Bootstrapでフロントエンドのテスト環境を自動構築

JSやSassを気持よくかける環境がないと何かと萎えて勉強意欲なくなるから、私の思う「気持ちいいいい!」っていう環境をコマンド数発で構築できるものを作ってやった。

github.com

前提として、Rubyとnpm入ってること…。

RubyのインストールはRubyのインストールが参考になるかな。npmはNode入れた時についてくるやつだったはずなので、brew install nodeとかやればいいと思う。brewってのはHomebrewのことなんだが、便利だからわからん人は検索してみて。

構築手順

基本はこのリポジトリはcloneしたらpullしないでそのままカスタマイズして使う体のやつなので、clone先は毎回新しくテストコード書きたいプロジェクト名みたいなの付けてやればいい。

git clone https://github.com/hoge/frontend.git project-name

初めての人はダメだけど、準備さえできていればこれですぐにBootstrapベースのJSとかSassが使える構築完了

cd project-name
npm install
grunt

はじめてじゃない人はSass、Gruntを揃えよう。といっても簡単。

Sassはもう使ってる人は入れなくていいけど入れてないならgemで一発

gem install sass

Gruntはグローバルにインストールするので-gして一発

npm install -g grunt-cli

これで終わり

使い方

このコマンドを実行するとassets/sass/app.scssを監視して自動でpublic/css/app.cssコンパイル結果を保存する

grunt watch:sass

あとはBootstrapとかjQueryのファイルが既にpublic以下のどっかに入っているので、適宜index.htmlとかから読み込んで使えばおっけー。基本全体の設定はその都度変えていけばいいと思う。あくまで私が作ったこれはベースであって、その都度環境によって他に入れたいものがあるだろうしな。

PHP + MySQL動かしたい

publicディレクトリのある階層にこれを入れればコマンド一発でPHPMySQLが動くように作ってあるが私のライフはもう0よ!

github.com

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA