【コピペでできる!】Railsでless.jsを使いたかったのでシェルスクリプト作ってワンライナーでできるようにしてみた。
結論を先に言うと、この記事の内容は以下のコマンドを実行するだけで、終わります。
なんでワンライナーを作ったかというと、私の趣味&確認用テストサイト構築用のためです。
| Shell | |
|---|---|
| 1 | bash -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 | |
| 3 | rails new lessjs --skip-bundle |
| 4 | cd lessjs |
| 5 | |
| 6 | echo '' >> Gemfile |
| 7 | echo 'gem "therubyracer"' >> Gemfile |
| 8 | echo 'gem "less-rails"' >> Gemfile |
| 9 | |
| 10 | bundle install --path vendor/bundle |
| 11 | |
| 12 | mv app/assets/stylesheets/application.css app/assets/stylesheets/application.css.less |
| 13 | rails g scaffold iloveless name:string |
| 14 | |
| 15 | echo '' >> app/assets/stylesheets/application.css.less |
| 16 | echo '@BGCOLOR: #031035;' >> app/assets/stylesheets/application.css.less |
| 17 | echo '@FONTCOLOR: #fff;' >> app/assets/stylesheets/application.css.less |
| 18 | echo 'html {' >> app/assets/stylesheets/application.css.less |
| 19 | echo ' * {' >> app/assets/stylesheets/application.css.less |
| 20 | echo ' color: @FONTCOLOR;' >> app/assets/stylesheets/application.css.less |
| 21 | echo ' }' >> app/assets/stylesheets/application.css.less |
| 22 | echo ' body {' >> app/assets/stylesheets/application.css.less |
| 23 | echo ' background: @BGCOLOR;' >> app/assets/stylesheets/application.css.less |
| 24 | echo ' }' >> app/assets/stylesheets/application.css.less |
| 25 | echo '}' >> app/assets/stylesheets/application.css.less |
| 26 | |
| 27 | rake db:migrate |
| 28 | rails s |
それでは、簡単にコマンドの内容を解説していきましょう。
(解説部分では一部、echoではなくviを使っています)
STEP1: Railsプロジェクト用意編
| Shell | |
|---|---|
| 1 | rails new lessjs --skip-bundle |
新たにRailsプロジェクトを作ります。
bundle install はあとで実行するので、スキップします。
STEP2: Gemfileを編集してless.jsを導入
| Gemfile | |
|---|---|
| 1 | gem "therubyracer" |
| 2 | gem "less-rails" |
less.jsを有効にするために、Gemをインストールします。
therubyracerはRailsがless.jsをコンパイルするために必要です。
mac(or linux)の方はすんなり動くと思いますが、Windowsだとここでコケるかもしれません。
そのうち、Windowsにtherubyracerを導入する記事を書きます。気力があれば...ですが...(^^;)
STEP3: bundle install実行
| Shell | |
|---|---|
| 1 | bundle install --path vendor/bundle |
Gemfileに追記が完了したら、 bundle install を実行します。
STEP4: less.jsを有効にするため、ファイル名を変更
| Shell | |
|---|---|
| 1 | mv 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 | |
|---|---|
| 1 | rails g scaffold iloveless name:string |
| 2 | vi app/assets/stylesheets/application.css.less |
application.css.less への追記内容
| application.css.less | |
|---|---|
| 1 | @BGCOLOR: #031035; |
| 2 | @FONTCOLOR: #fff; |
| 3 | html { |
| 4 | * { |
| 5 | color: @FONTCOLOR; |
| 6 | } |
| 7 | body { |
| 8 | background: @BGCOLOR; |
| 9 | } |
| 10 | } |
ファイルの末尾にでも追加してください。
STEP6 確認編
| Shell | |
|---|---|
| 1 | rake db:migrate |
| 2 | rails s |
Railsサーバを起動します。
ブラウザで http://localhost:3000/ilovelesses にアクセスして以下になっていれば成功です。
無事確認できた方はお疲れ様。
そうじゃない方はSTEP1からまた読んでいってね！！！
どうしてもできなかった場合は、お問い合わせいただくと対応することがあるかもしれません...(きまぐれ)
この記事が短い理由？
私の備忘録だからです... ＠ｗ＠；<(よく使うんですねん)
[おまけ:番外編] curl -fsSL のオプションの意味はなんぞや？？
- -f ... サーバエラーが生じた時、何も出力せず終了する
- -s ... サイレントモード。標準出力にプログレスバーやエラーメッセージを出力しなくなる。
- -S ... サイレントモード指定時にエラーが出た場合、エラーを表示する。(-s:サイレントモードと組み合わせて使用)
- -L ... リダイレクトしていた場合、リダイレクト先を取得する
See you again soon!! (｀･ω･´)ﾉｼ
