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

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を利用してサーバーサイドでも動作します。

* Language Features http://lesscss.org/features/
* The dynamic stylesheet language(日本語) http://less-ja.studiomohawk.com/

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

* ホームページ http://stylus-lang.com/
* stylus ドキュメント日本語訳 https://github.com/enja-oss/stylus
* CSSメタ言語「Stylus（スタイラス）」の基礎知識 http://www.risewill.co.jp/blog/archives/3758

## Sass
* ホームページ http://sass-lang.com/
* Sass ドキュメント日本語訳 https://github.com/enja-oss/Sass
* Sassオレオレリファレンス https://tenderfeel.github.io/SassReference/first.html

## 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のソースです。

~~~file:myapp3/public/stylesheets/style.styl
body
  padding: 50px
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
a
  color: #00B7FF
~~~
表示結果は、以下の様になります。
![スクリーンショット 2017-05-10 1.50.10.png](https://qiita-image-store.s3.amazonaws.com/0/42829/e2c04ed6-17d5-33d2-a335-ea9583c9836f.png)

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

~~~file:myapp3/public/stylesheets/style.styl
body
  padding: 50px
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
  color: white                <-- フォント色を追加
  background-color: #26343F   <-- バックグラウンド色を追加
a
  color: #00B7FF
~~~
バックグランド色とフォント色の変更後の実行結果です。
![スクリーンショット 2017-05-10 1.50.53.png](https://qiita-image-store.s3.amazonaws.com/0/42829/5b3c90df-3f0d-4a76-a6e4-64f2f1f81aad.png)

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

~~~
myapp3/public$ tree
.
├── images
├── javascripts
└── stylesheets
    ├── style.css
    └── style.styl
~~~
このstyle.css の中身で、Stylus のソースから、生成されたCSSファイルです。

~~~file: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 プリプロセッサのソース

~~~file:style.less
body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  color: #fff;                 <-- 追加　フォントを白へ変更
  background-color: #26343f;   <-- 追加  バックグランドを濃紺へ変更
}
a {
  color: #00b7ff;
}
~~~
やはり、アプリをスタートするとCSSが生成される。　LESSのプリプロセッサは、CSSを触れない感じでした。

~~~file: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のソースに、フォント色とバックグランド色を追加してみます。

~~~file: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

> myapp5@0.0.0 start /home/tkr/express_work2/myapp5
> node ./bin/www
~~~
これで、アプリをアクセスできれば、動作確認OKです。
起動時に、CSSファイルが生成されます。以下が生成されたCSSファイルです。

~~~file: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

> myapp6@0.0.0 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! myapp6@0.0.0 start: `node ./bin/www`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the myapp6@0.0.0 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
~~~

以上