かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Express4 stylusのコンパイルにハマる

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ファイルがある場合

どうやら、下記に該当する場合はコンパイルされないようです。

  1. srcをスタティックファイルのディレクトトリの中にあるディレクトリで指定している
    ex: src: '/assets/stylus'
  2. 出力先destの指定がある

stylusがコンパイルできるミドルウェアの書き方

// 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を置くことにしました。

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を出力するのは諦めたほうが良いのかもしれません。
やり方があるのかもしれませんが見つけることができませんでした。


[参考]

グリーンハウス 液晶ディスプレイアーム 4軸 クランプ式 GH-AMC03

グリーンハウス 液晶ディスプレイアーム 4軸 クランプ式 GH-AMC03