StylusCSSプリプロセッサ - Node.jsのチュートリアル

このレッスンでは、 expressアプリケーションから StylusCSSプリプロセッサーを 利用する方法について 説明します。 それではまずワークショッパーを 起動しましょう。 expressworks エンター。 今回はこちら５番目の、 STYLISH CSS という問題を解きます。 エンターを押します。 問題。 Stylusミドルウェアんいよって、 CSSを前処理されたindex.htmlを 配信するアプリケーションを 作成してください。 ただし、ポート番号と、 index.html,stylusファイルのある ディレクトリのパスは、 それぞれ１番目と２番目の コマンドライン引数で 与えられるものとします。 Stylusというのは CSSプリプロセッサーの一種で、 こちらの文にあるように、 問題文の部分ですね。 stylという拡張子で書かれた ファイルを、 Stylusの独自の スタイル記述ファイルである、 と解釈して、それをCSSに変換して ファイルを生成したうえで、 サーバーの処理を実行してくれます。 Stylusの独自のスタイル形式というのは このように、 普通のCSSとは若干違った 見た目になっています。 このようにStylusのような CSSプリプロセッサーを使用することによって、 CSSの記述を大幅に簡略化して、 生産性を高上させることができます。 Stylusを使用するためには、 問題文のヒントのこちらにあるように、 アプリケーションのuseというメソッドを 使って、Stylusのモジュールで 生成したミドルウェアに、 Stylusの独自のstylという拡張子を 持ったファイルが格納されている ディレクトリのパスを指定してやります。 これによってサーバーがその独自ファイルを CSSに変換してくれるようになります。 それではStylusのモジュールを インストールしましょう。 npm install stylus インストールができました。 これでStylusが使えるはずです。 ではここでいったん手を止めて、 皆さんで問題を解いてみてください。 いかがでしょう、 問題は解けましたでしょうか。 それでは答え合わせを していきたいと思います。 私の方でプログラムを 作成してみます。 テキストエディターでソースコードを 開きます。 prgram.js まずはexpressモジュールの ロードですね。 require ('express') それから、Stylusも使用しますので、 それもロードしましょう。 require ('stylus') そしてアプリケーションインスタンスの 作成ですね。 それからアプリケーションのuseメソッドを 使ってミドルウェアの設定ですね。 まず今回静的配信を行いますので、 expressのstaticミドルウェアを 使用します。 静的ファイルの配信パスは、 processのargy配列の３ですね。 それからもう一つ、Stylusの ミドルウェアを使用するために、 middlewareメソッドを使用します。 Stylusのファイルのパスも、 静的ファイルの ドキュメントルートと同様です。 そしてこれで設定ができたので、 後はアプリケーションのlisten、 listenするポートは、 これも コマンドラインパラメーターで 与えられます。 これでファイルの記述は 完了しましたので、 検証してみましょう。 expressworks verifyの program.js ソースコードの記述が 間違っていたようですので、 再度編集します。 こちらのStylusの部分が、 スペルミスでしたね。 修正して再度実行します。 この問題に関しては、 答え合わせをするときに、 特権が必要な様ですので、 この答え合わせに使用するファイルが、 配置されている場所が 特権ファイルへの権限が、 必要な場所ですので、 実行するときに先頭で sudoを付与してみてください。 これできちんと正解が通りました。 このレッスンでは、express.js アプリケーションで、 StylusCSSプリプロセッサーを使用する 方法について説明しました。