node.js,bootstrap

nvmのインストール

Node.jsを使った開発のためにNVM(Node Version Manager)を導入する。

$ git clone https://github.com/creationix/nvm.git ~/.nvm
$ source ~/.nvm/nvm.sh

gitコマンドがインストールされてない場合には、インストールしておく。

$ yum -y install git

nvmコマンドでNode.jsをインストール

バージョンを確認してみる。

$ nvm ls-remote

Baidu IME_2016-1-8_10-34-11
既にインストールされていると、こんな感じで「→」が。

インストール

$ nvm install 0.12.7

バージョン確認。

$ node -v

「v0.12.7」って出る。よかった!

nvmの設定

nvmコマンドは、このままだとターミナル再起動時に同じような手順が必要とのこと。
いつでも使えるように設定しておく。

まずはデフォルトのNode.jsのバージョンを指定しておく。

$ nvm alias default v0.12.7
default -> v0.12.7

~/.bash_profileを、ターミナル起動時にnvmコマンドが適用されるように設定。

「$ vi ~/.bash_profile」でbash_profileを編集。
(iでインサートモード、ESCでコマンドモード)

if [[ -s ~/.nvm/nvm.sh ]];
 then source ~/.nvm/nvm.sh
fi

grunt インストール

npm install -g grunt-cli

Baidu IME_2016-1-8_10-47-19

Bootstrap DL、展開

$ wget https://github.com/twbs/bootstrap/archive/v3.3.6.zip
$ unzip v3.3.6
$ cd bootstrap-3.3.6
$ npm install

これで grunt と打てば less ファイルがコンパイルされるそうな。

$ grunt

ll

Baidu IME_2016-1-8_10-55-14

RGBA非対応ブラウザはHSLで代用しますよ…。

Baidu IME_2016-1-8_10-57-23

ジキルをインストールしろ!…とでた。

でも。問題なく動く模様。後で対応しようっと。

Baidu IME_2016-1-8_10-57-0

こんな感じでなんとかコンパイルもできる。

コンパイルの自動化

lessファイルを変更する度にgruntするのも面倒なので…

$ grunt watch &

と打っておく。

これで、Lessファイルに変更があると自動的に再コンパイルしてくれる。

Baidu IME_2016-1-8_11-15-44

grunt watch は min ファイルを作らないので、minファイル使用時には手動で

$ grunt cssmin

してあげる必要があるけど。

watch で min ファイルまで作ってしまいたい場合は、Gruntfile.js の watch Task を編集。

watch: {
...
less: {
files: 'less/**/*.less',
tasks: ['less', 'cssmin']
}
},