bootstrapのGettingStartedについてメモ
Download
- Bootstrap
カスタマイズのためのLessやSass関連のファイルは入っていない
distというフォルダー。
- Source code
Lessによるカスタマイズのためのファイルが入っている。
LessからCSSを書き出すとdistというフォルダーに書き出される - Sass
Sassによるカスタマイズのためのファイルが入っている。
これはまだ試していないのでわからない。
Compiling Css and JavaScript
LessやSassをCSSに書き出すのにGruntというものをインストールする
手順(macの場合)
node.jsをインストールする
ターミナルを開いて
brew update
brew install nodebrew
nodebrew install latest
npm install -g grunt-cli
と打ち込んだらエラーがでた。
sudoがいるのかと思い
sudo npm install -g grant-cli
としてみたがやはりエラー...よく見たらスペルが間違っていた
grantじゃなくてgruntだった；
sudo npm install -g grunt-cli
無事にインストール
あとはブートストラップのフォルダに移動してgruntコマンドを実行する
cd bootstrap-less
移動して
試しにdistコマンド（このじてんでなんのコマンドかわかってない；）
grunt dist
エラーが出た
他のコマンドも試す
grunt watch
エラーが出た
Fatal error: Unable to find local grunt.
何かを忘れているっぽい
調べるとローカルにグラント関連ファイルがないということなので
入れてみた
npm install grunt
インストール完了
もう一度gruntコマンドを試す
grunt dist
エラーが出た
まだ何か忘れているっぽい。
bootstrapのGetting Startedを見直す
- Navigate to the root
/bootstrap/directory, then runnpm install. npm will look at thepackage.jsonfile and automatically install the necessary local dependencies listed there.
bootstrapフォルダーで npm installすればいいのかな、ということで
npm install
インストール完了
3度目の正直！gruntコマンドを試す
grunt dist
やっと成功！
ちなみにgrunt distは
grunt dist (Just compile CSS and JavaScript)
Regenerates the /dist/ directory with compiled and minified CSS and JavaScript files. As a Bootstrap user, this is normally the command you want.
といっても英語よくわからないけれど
compiledはLessをCSSにかきだすことか？
minifiedは圧縮してくれるということのようなきがする
jsファイルにも実行されるみたいだ。
いろいろ試してみよう
grunt watch (Watch)
Watches the Less source files and automatically recompiles them to CSS whenever you save a change.
こっちはSassを触っていたのでなんとなくわかる。
Lessファイルを編集して保存したら自動でCSSを書き出してくれる
こっちは保存するだけの作業なので楽。
ちょっと書き出しが遅い気もする...
