IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

ホーム / Linux / node.js と Grunt で Bootstrap less ファイルをコンパイルする(自動化)

node.js と Grunt で Bootstrap less ファイルをコンパイルする(自動化)

2014/12/8 Linux, Node.js, Plamo

Plamo-linux 上に Bootstrap の less ファイル自動コンパイル環境を作ってみようと思います。環境の構築方法は、Bootstrap の「Compiling CSS and JavaScript」に記載があります。

getbootstrap.com

node.js インストール

node.js

ソースからビルドしてみました。

$ wget http://nodejs.org/dist/v0.10.33/node-v0.10.33.tar.gz
$ tar zxvf node-v0.10.33.tar.gz
$ cd node-v0.10.33
$ ./configure
$ make
$ su
# make install

$ node -v
v0.10.33

$ npm -v
1.4.28

npm も同時にインストールされるようです。

grunt インストール

$ su
#  npm install -g grunt-cli
/usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
grunt-cli@0.1.13 /usr/local/lib/node_modules/grunt-cli
矜 碣esolve@0.3.1
矜 碆opt@1.0.10 (abbrev@1.0.5)
矜 砌indup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)

メッセージが文字化けしていますね。とりあえず進んでみます。

Bootstrap ダウンロード~展開

Getting started · Bootstrap

Bootstrap のソースコードをダウンロードして展開、ディレクトリに移動し、npm install で何やらインストールするそうです。この当たりよく分かりませんが進みましょう。

$ wget https://github.com/twbs/bootstrap/archive/v3.3.1.zip
$ unzip v3.3.1.zip
$ cd bootstrap-3.3.1
$ npm install
…
grunt-saucelabs@8.3.3 node_modules/grunt-saucelabs
矜 矣olors@0.6.2
矜 碵aucelabs@0.1.1
矜 碌@1.0.1
矜 碣equest@2.35.0 (json-stringify-safe@5.0.0, aws-sign2@0.5.0, forever-agent@0.5.2, qs@0.6.6, oauth-sign@0.3.0, tunnel-agent@0.4.0, mime@1.2.11, node-uuid@1.4.2, form-data@0.1.4, tough-cookie@0.12.1, lodash.merge@2.4.1, http-signature@0.10.0, hawk@1.0.0)
矜 碎odash@2.4.1
矜 碵auce-tunnel@2.1.0 (chalk@0.4.0, request@2.21.0)

かなりいろいろインストールするようです。同じように文字化けしています。

less ファイルコンパイル

これで grunt と打てば less ファイルがコンパイルされるようです。試しにフォントファミリーとサイズを変更してみましょう。

less/variables.less

@font-family-sans-serif: “Helvetica Neue”, Helvetica, Arial, sans-serif;
 ↓ 
@font-family-sans-serif: Verdana, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;

@font-size-base: 14px;
 ↓
@font-size-base: 16px;

と変更して grunt と打ちます。

dist/css/bootstrap.css

body {
font-family: Verdana, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
font-size: 16px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}

確かに変わっています。

コンパイルの自動化

less ファイルを変更する度にコマンドラインで grunt と打つのも面倒ですので、

$ grunt watch &

と打っておきます。これで less ディレクトリ以下のファイルに変更が加えられると

>> File “less/variables.less” changed.
Running “less:compileCore” (less) task
File dist/css/bootstrap.css.map created.
File dist/css/bootstrap.css created: 135.58 kB 皹35.62 kB

Running “less:compileTheme” (less) task
File dist/css/bootstrap-theme.css.map created.
File dist/css/bootstrap-theme.css created: 18.83 kB 皹8.88 kB

Done, without errors.

自動的にコンパイラが走り、css ファイルを書き換えます。

grunt watch は minify ファイルは作りませんので、カスタマイズ終了後に

$ grunt cssmin 

と打てば、minify ファイルが作成されます。watch で minify ファイルまで作ってしまいたい場合は、Gruntfile.js の watch Task を以下のように編集すれば自動で作るようになります。

watch: {
…
less: {
files: ‘less/**/*.less’,
tasks: [‘less’, ‘cssmin’]
}
},

ということで、less ファイルのコンパイルが自動化できました。dist ディレクトリも自由に変更できるようですが、私は、bootstrap の dist ディレクトリをシンボリックリンクにして直接該当ファイルを書き換えるようにしています。たとえば、laravel4-blog の場合、

$ ln -s ../public_html/laravel4-blog/public/assets/ dist

としています。

http://ausnichts.hatenablog.com/archive/category/laravel4ausnichts.hatenablog.com

さらに「Laravel4入門」 KCFinder を単独 stand alone で使う
Plamo-5.2/sudo でパスが引き継がれない(解決)
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/07/29

WordPressでiframeが表示されない(解決)

2022/07/14

WordPressのデータベースを入れ替える

2022/07/7

WordPress:テーマをゼロから作ってみる(3)

2022/06/26

WordPress:Aレコード変更でウェブだけ他サーバへ移転

2022/06/13

WordPress Popular Posts 他のプラグインに変えたほうがいいかも

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ212
  • WebTips108
  • javascript95
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress37
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php19
  • Node.js18
  • SASS16
  • Ubuntu16
  • laravel415
  • Chrome10
  • cms-style10
  • iPhone9
  • genesis6
  • Git入門6
  • ConoHa WING5
  • Python4
  • Android4
  • SSD3
  • Docker3
  • スマートフォン3
  • Facebook3
  • Firefox3
  • 静的サイトジェネレーター3
  • Blankslate3
  • Mactype2
  • GitHub2
  • rails入門1
  • はてなブクマ1
  • Twitter1
  • 映画1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com