cre8cre8
AskMe♥

【コピペでできる!】Railsでless.jsを使いたかったのでシェルスクリプト作ってワンライナーでできるようにしてみた。

結論を先に言うと、この記事の内容は以下のコマンドを実行するだけで、終わります。
なんでワンライナーを作ったかというと、私の趣味&確認用テストサイト構築用のためです。

Shell
1bash -c "$(curl -fsSL https://gist.githubusercontent.com/takumiio/f6bd8dc4aec7f34886df793195d5f2b1/raw/00816bec6f7027765efb791f4cdffc03f2f35dbc/auto-rails-in-lessjs.sh)"

よければ、ゆっくり使っていってね!!!!
GitHub Gistにあげています。中身はこうなってます。

auto-rails-in-lessjs.sh
1#! /bin/bash
2
3rails new lessjs --skip-bundle
4cd lessjs
5
6echo ''                   >> Gemfile
7echo 'gem "therubyracer"' >> Gemfile
8echo 'gem "less-rails"'   >> Gemfile
9
10bundle install --path vendor/bundle
11
12mv app/assets/stylesheets/application.css app/assets/stylesheets/application.css.less
13rails g scaffold iloveless name:string
14
15echo ''                              >> app/assets/stylesheets/application.css.less
16echo '@BGCOLOR: #031035;'            >> app/assets/stylesheets/application.css.less
17echo '@FONTCOLOR: #fff;'             >> app/assets/stylesheets/application.css.less
18echo 'html {'                        >> app/assets/stylesheets/application.css.less
19echo '    * {'                       >> app/assets/stylesheets/application.css.less
20echo '        color: @FONTCOLOR;'    >> app/assets/stylesheets/application.css.less
21echo '    }'                         >> app/assets/stylesheets/application.css.less
22echo '    body {'                    >> app/assets/stylesheets/application.css.less
23echo '        background: @BGCOLOR;' >> app/assets/stylesheets/application.css.less
24echo '    }'                         >> app/assets/stylesheets/application.css.less
25echo '}'                             >> app/assets/stylesheets/application.css.less
26
27rake db:migrate
28rails s

それでは、簡単にコマンドの内容を解説していきましょう。
(解説部分では一部、echoではなくviを使っています)

STEP1: Railsプロジェクト用意編

Shell
1rails new lessjs --skip-bundle

新たにRailsプロジェクトを作ります。
bundle install はあとで実行するので、スキップします。

STEP2: Gemfileを編集してless.jsを導入

Gemfile
1gem "therubyracer"
2gem "less-rails"

less.jsを有効にするために、Gemをインストールします。
therubyracerはRailsがless.jsをコンパイルするために必要です。
mac(or linux)の方はすんなり動くと思いますが、Windowsだとここでコケるかもしれません。
そのうち、Windowsにtherubyracerを導入する記事を書きます。気力があれば...ですが...(^^;)

STEP3: bundle install実行

Shell
1bundle install --path vendor/bundle

Gemfileに追記が完了したら、 bundle install を実行します。

STEP4: less.jsを有効にするため、ファイル名を変更

Shell
1mv app/assets/stylesheets/application.css app/assets/stylesheets/application.css.less

おう、less.js使うぜless.js。
というわけで、application.cssの拡張子をapplication.css.lessにします。
次のステップからは、less.jsが有効になっているか確認していきます。

STEP5: less.jsが有効になってるか確認するため scaffold&編集

Shell
1rails g scaffold iloveless name:string
2vi app/assets/stylesheets/application.css.less

application.css.less への追記内容

application.css.less
1@BGCOLOR: #031035;
2@FONTCOLOR: #fff;
3html {
4    * {
5        color: @FONTCOLOR;
6    }
7    body {
8        background: @BGCOLOR;
9    }
10}

ファイルの末尾にでも追加してください。

STEP6 確認編

Shell
1rake db:migrate
2rails s

Railsサーバを起動します。
ブラウザで http://localhost:3000/ilovelesses にアクセスして以下になっていれば成功です。

無事確認できた方はお疲れ様。
そうじゃない方はSTEP1からまた読んでいってね!!!
どうしてもできなかった場合は、お問い合わせいただくと対応することがあるかもしれません...(きまぐれ)

この記事が短い理由?
私の備忘録だからです... @w@;<(よく使うんですねん)

[おまけ:番外編] curl -fsSL のオプションの意味はなんぞや??

See you again soon!! (`・ω・´)ノシ

≪ 前の記事
今更ながらless.jsでレスポンシブデザインできるコードをさっくりと書いてみた
次の記事 ≫
str を全く使った覚えがないのに
[TypeError: 'str' object is not callable] がでてドハマリした結果、 str を使っていたのを見失っていた午後7時くらいのできごと

いいねやコメントを送っていただけると中の人がしっぽ振って大喜びします♪

あなたへのおすすめの記事