Express4系でstylusを使おうとミドルウェアのを書いたのですが、コンパイルできなかかったりとはハマったのでメモ
stylusとnibを導入
$ npm install --save stylus nib
コンパイルできなかった例
// app.js var stylus = require('stylus'), nib = require('nib'); // stylus app.use(stylus.middleware({ src: __dirname + '/assets/stylus', dest: __dirname + '/assets/css', compile: function compile(src, path) { return stylus(src) .set('filename', path) .set('compress', true) .use(nib()) .import('nib'); } })); // set static file dir app.use('/assets', express.static(__dirname + '/assets'));
スタティックファイルのディレクトリ指定app.use('/assets', express.static(__dirname + '/assets'));
がstylusの指定より前にあったり、スタティックファイルの指定そのものを無くしてみても、stylusがコンパイルされることはありませんでした。
スタティックファイルのディレクトトリ(/assets
)内にstylusファイルがある場合
どうやら、下記に該当する場合はコンパイルされないようです。
src
をスタティックファイルのディレクトトリの中にあるディレクトリで指定している
ex:src: '/assets/stylus'
- 出力先
dest
の指定がある
// app.js // stylus app.use(stylus.middleware({ src: __dirname + '/assets', // スタティックファイルのディレクトを指定 // dest: __dirname + '/assets/css', ※ destは指定できない compile: function compile(src, path) { return stylus(src) .set('filename', path) .set('compress', true) .use(nib()) .import('nib'); } })); // set static file dir app.use('/assets', express.static(__dirname + '/assets'));
CSSの出力先の指定dest
オプションが使えないので、例えばassets/stylus
ディレクトリ内にstylusファイルが在ると、同じディレクトリ内にcssファイルがコンパイルされます。
stylusを置いておくフォルダとcssの出力先を分けたい場合
スタティックファイルの指定がされているディレクトリ(/assets
)内にstylusを置くと上記のように出力先を指定することができませんので、stylusを/assets
の外に置く必要があります。
ディレクトリも一緒に出力してくれるので、public/css
というディレクトリを作成てそこにstylusを置くことにしました。
// app.js var stylus = require('stylus'), nib = require('nib'); // stylus app.use(stylus.middleware({ src: __dirname + '/public', dest: __dirname + '/assets', compile: function compile(src, path) { return stylus(src) .set('filename', path) .set('compress', true) .use(nib()) .import('nib'); } })); // set static file dir app.use('/assets', express.static(__dirname + '/assets'));
これで、/assets/css
ディレクトリ内にCSSが出力されるようになりました。
注意: 出力先のディレクトリをスタティックファイル指定ディレクトリの中にすると上手く動作しないっぽい!
public/stylus
フォルダにstylusを置いて、assets/css
ディレクトリに出力しようとしてdest
オプションをスタティックファイルで指定しているディレクトリ(/assets
)の中に指定してしまうとコンパイルされませんでした。
コンパイルされなかった例
// stylus app.use(stylus.middleware({ src: __dirname + '/public/stylus', dest: __dirname + '/assets/css', compile: function compile(src, path) { return stylus(src) .set('filename', path) .set('compress', true) .use(nib()) .import('nib'); } }));
srcを/public/css
としてもコンパイルされなかったので、Expressでコンパイルする場合はstylusを置いているディレクトリと違う名前ディレクトリを作成してCSSを出力するのは諦めたほうが良いのかもしれません。
やり方があるのかもしれませんが見つけることができませんでした。
[参考]
- Starting a project with Express, node.js and Stylus - eysermans.com
- Stylus middleware in Express not working? - Stack Overflow
グリーンハウス 液晶ディスプレイアーム 4軸 クランプ式 GH-AMC03
- 出版社/メーカー: グリーンハウス
- 発売日: 2010/07/23
- メディア: Personal Computers
- 購入: 2人 クリック: 5回
- この商品を含むブログを見る