Expressと連携できる CSSプリプロセッサのメモ

13232 ワード
Express less Compass Sass stylus Sass テキストリンク

Node.js の express に指定できる CSSプリプロセッサ についての忘備録です。 express のヘルプを表示するとサポートする CSSプリプロセッサを知る事ができます。これらについて、ウェブで調べて、実際に試した時のメモです。

-c, --css <engine>  add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)

Express と連携する CSSプリプロセッサ

LESS

LESSは変数、ミックスイン、演算、そして関数のような動的な処理をCSSに追加拡張できます。 クライアントサイド(IE6+、Webkit、Firefox)、またnode.js、Rhinoを利用してサーバーサイドでも動作します。

Stylus

表現力豊かでダイナミックで堅牢なCSSとの事、リファレンス中心で説明が無い

Sass

compass

CompassはSassを元に開発したフレームワーク
* ホームページ http://compass-style.org/
* CSSの常識が変わる！「Compass」の基礎から応用まで！ https://liginc.co.jp/designer/archives/11623

動作させてみた記録

Stylus CSSプリプロセッサを指定してアプリを生成した場合

$ express --css stylus myapp3

   create : myapp3  <--- ミドルウェアとして sytlus が設定される
   create : myapp3/package.json
   create : myapp3/app.js
   create : myapp3/public
   create : myapp3/public/javascripts
   create : myapp3/public/images
   create : myapp3/public/stylesheets
   create : myapp3/public/stylesheets/style.styl  <--- フォルダとファイルが追加される
   create : myapp3/routes
   create : myapp3/routes/index.js
   create : myapp3/routes/users.js
   create : myapp3/views
   create : myapp3/views/index.jade
   create : myapp3/views/layout.jade  <--- スタイルシートの設定が追加される
   create : myapp3/views/error.jade
   create : myapp3/bin
   create : myapp3/bin/www

   install dependencies:
     $ cd myapp3 && npm install

   run the app:
     $ DEBUG=myapp3:* npm start

style.styl を修正して、npm start でアプリを起動すると、CSSプリプロセッサが実行されて、style.css が生成される。 次のファイルはアプリ生成直後の初期状態のファイルで、stylusのソースです。

myapp3/public/stylesheets/style.styl
body
  padding: 50px
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
a
  color: #00B7FF

表示結果は、以下の様になります。

フォント色とバックグランド色を指定して npm start を実行します。

myapp3/public/stylesheets/style.styl
body
  padding: 50px
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
  color: white                <-- フォント色を追加
  background-color: #26343F   <-- バックグラウンド色を追加
a
  color: #00B7FF

バックグランド色とフォント色の変更後の実行結果です。

expressコマンド生成したアプリケーションのディレクトリをリストすると、public/stylesheets に css が生成されているのが判ります。

myapp3/public$ tree
.
├── images
├── javascripts
└── stylesheets
    ├── style.css
    └── style.styl

このstyle.css の中身で、Stylus のソースから、生成されたCSSファイルです。

stylesheets/style.css
body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  color: #fff;
  background-color: #26343f;
}
a {
  color: #00b7ff;
}

LESS CSSプリプロセッサを指定してアプリを生成した場合

$ express --css less myapp4

   create : myapp4
   create : myapp4/package.json
   create : myapp4/app.js
   create : myapp4/public
   create : myapp4/public/javascripts
   create : myapp4/public/images
   create : myapp4/public/stylesheets
   create : myapp4/public/stylesheets/style.less  <-- このファイルが less で生成
   create : myapp4/routes
   create : myapp4/routes/index.js
   create : myapp4/routes/users.js
   create : myapp4/views
   create : myapp4/views/index.jade
   create : myapp4/views/layout.jade
   create : myapp4/views/error.jade
   create : myapp4/bin
   create : myapp4/bin/www

   install dependencies:
     $ cd myapp4 && npm install

   run the app:
     $ DEBUG=myapp4:* npm start

LESS プリプロセッサのソース

style.less
body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  color: #fff;                 <-- 追加　フォントを白へ変更
  background-color: #26343f;   <-- 追加  バックグランドを濃紺へ変更
}
a {
  color: #00b7ff;
}

やはり、アプリをスタートするとCSSが生成される。　LESSのプリプロセッサは、CSSを触れない感じでした。

style.css
body{padding:50px;font:14px "Lucida Grande",Helvetica,Arial,sans-serif;color:white;background-color:#26343F}a{color:#00B7FF}

Sass CSSプリプロセッサを指定してアプリを生成した場合

myapp4$ express --css sass myapp5

   create : myapp5
   create : myapp5/package.json
   create : myapp5/app.js
   create : myapp5/public
   create : myapp5/public/javascripts
   create : myapp5/public/images
   create : myapp5/public/stylesheets
   create : myapp5/public/stylesheets/style.sass
   create : myapp5/routes
   create : myapp5/routes/index.js
   create : myapp5/routes/users.js
   create : myapp5/views
   create : myapp5/views/index.jade
   create : myapp5/views/layout.jade
   create : myapp5/views/error.jade
   create : myapp5/bin
   create : myapp5/bin/www

   install dependencies:
     $ cd myapp5 && npm install

   run the app:
     $ DEBUG=myapp5:* npm start

生成したアプリのフォルダーとファイルのリストです。

myapp5$ tree
.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.sass   <-- Sassのテンプレートが出来ている
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.jade
    ├── index.jade
    └── layout.jade

Saasのソースに、フォント色とバックグランド色を追加してみます。

myapp5/public/stylesheets/style.sass
body
  padding: 50px
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
  color: white     <--- 追加
  background-color: #26343F   <--- 追加

a
  color: #00B7FF

必要なモジュールをインストールして、アプリを起動します。

myapp5$ npm install

myapp5$ npm start

> [email protected] start /home/tkr/express_work2/myapp5
> node ./bin/www

これで、アプリをアクセスできれば、動作確認OKです。
起動時に、CSSファイルが生成されます。以下が生成されたCSSファイルです。

myapp5/public/stylesheets/style.css
myapp5/public/stylesheets$ cat style.css
body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  color: white;
  background-color: #26343F; }

a {
  color: #00B7FF; }

/*# sourceMappingURL=style.css.map */

compass CSSプリプロセッサを指定してアプリを生成した場合（失敗)

compass を指定してアプリを生成します。

$ express --css compass myapp6

   create : myapp6
   create : myapp6/package.json
   create : myapp6/app.js
   create : myapp6/public
   create : myapp6/public/javascripts
   create : myapp6/public/images
   create : myapp6/public/stylesheets
   create : myapp6/public/stylesheets/style.scss
   create : myapp6/routes
   create : myapp6/routes/index.js
   create : myapp6/routes/users.js
   create : myapp6/views
   create : myapp6/views/index.jade
   create : myapp6/views/layout.jade
   create : myapp6/views/error.jade
   create : myapp6/bin
   create : myapp6/bin/www

   install dependencies:
     $ cd myapp6 && npm install

   run the app:
     $ DEBUG=myapp6:* npm start

フォルダとファイルのリストです。

myapp6$ tree
.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.scss
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.jade
    ├── index.jade
    └── layout.jade

7 directories, 9 files

compassのプリプロセッサのソースです。 Sass が元との事ですが、カッコ付きですね。　なんか変だなぁ。。。

myapp6/public/stylesheets$ cat style.scss 
@import "compass/css3";

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  color: white;
  background-color: #26343F;
}

a {
  color: #00B7FF;
}

必要なモジュールをインストールして、アプリを起動する。 ブラウザでアクセスした処でエラー発生した。 ENOENTは、Linuxシステムコールのエラーでファイルが存在しないエラーでした。　

myapp6$ npm install
<中略>

myapp6$ npm start

> [email protected] start /home/tkr/express_work2/myapp6
> node ./bin/www

GET / 304 950.069 ms - -
events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: spawn compass ENOENT
    at exports._errnoException (util.js:873:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
    at onErrorNT (internal/child_process.js:344:16)
    at nextTickCallbackWith2Args (node.js:442:9)
    at process._tickCallback (node.js:356:17)

npm ERR! Linux 3.13.0-65-generic
npm ERR! argv "/home/tkr/.ndenv/versions/v4.4.7/bin/node" "/home/tkr/.ndenv/versions/v4.4.7/bin/npm" "start"
npm ERR! node v4.4.7
npm ERR! npm  v2.15.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `node ./bin/www`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script 'node ./bin/www'.
npm ERR! This is most likely a problem with the myapp6 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node ./bin/www
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs myapp6
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! 
npm ERR!     npm owner ls myapp6
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/tkr/express_work2/myapp6/npm-debug.log

以上