Autumnsky

Node.jsを入れてStylusを使う

, , ,

CSSプリプロセッサ＝Sass(SCSS)とかLESSとかでCSSを生成してやると、複雑なCSSもシンプルで見通しのいいソースコード=CSSメタ言語から生成できます。

今回はそのCSSプリプロセッサを、例によってWindows10で使ってみましょう。
今、プリプロセッサって言いました？！ Sassだぁ！
いいえ、Stylusです。

stylus-old-logo.png
古いStylusロゴの方が好き

メジャーどころのSassはWindowsではRuby実行環境もインストールする必要があります（MacだとRubyは最初から入ってるそうです）。またStylusはNode.js謹製のプリプロセッサでもある。GulpとかGrantとか、タスクランナーと組み合わせると便利らしいです。

ですが、いきなり全部やると大変ですし、ややこしいです。今回はコマンドラインからStylusでCSSをコンパイルしてみましょう。
Stylusを入れるにあたって、下準備が二つほど要ります。

  1. Windows PowerShellの実行モード変更
  2. Node.jsのインストール

その後、Node.jsの機能を使ってStylusをインストール、CSSのコンパイルを試します。

Windows PowerShellの設定

Node.jsは基本的にコマンドラインから使います。
だが、いにしえのコマンドプロンプトとは訣別しよう。Windows 7以降ならば、Windows PowerShellというコマンドラインが使えます。
Windows PowerShell、略称WPS。以下でもWPSと書けばWindows PowerShellのことを指します。
一旦、管理者として起動してWPSの実行モードを変更する。
Stylusコマンドを実行するだけなら、この設定変更は不要かも知れない。
wps-from-start.png
私はWindows10 64bitを使用しているので、互換性のためかx86（32bit)のWPSもある。多分どちらでもいい。
wps01.png
起動したら、何か警告が出ている。
「セキュリティ上の問題があるので、WPSから実行できるスクリプトに制限をかけていますよ」とのこと。
WPSの実行制限モードを変更する。

> Set-ExecutionPolicy RemoteSigned

上記コマンドを入力。Yで続行。制限モードをRemoteSignedとして、ローカルで作成したスクリプトとリモートからは信頼できるスクリプトのみの実行とする。
wps02.png
再度、WPSを起動してみる。警告メッセージなし。
lsコマンドが使えるので、それだけでも乗り換える価値があります。
WPSはどの実行制限が妥当か、実は私では見当が付いてません。
下記サイトでは、Remote Signedが最適とのことです。企業だと社内ネットワークやPCのセキュリティポリシーなども関係してきます。詳しい人がいたら確認してみて欲しい。そして私にも教えて頂けると幸いです。

Remote Signed

  • 実行ポリシーがRemote Singedに設定されている場合、ローカルで作成されたあらゆるPowerShellスクリプトを実行することが許される。リモートで作成されたスクリプトは、信頼できる発行元が署名したものしか実行できない。

PowerShellの使用方法｜Windows管理者のためのPowerShell

Node.jsのインストール

Google先生に聞くまでもありません、最短距離でNode.jsの公式サイトへ行きましょう。

Node.js公式サイト https://nodejs.org/en/
Windows用のインストーラである.msiファイルを用意してくれてます、多謝。
nodejs-msi.jpg

スクリーンショットでは、node-v4.4.5-x64.msi ファイルをダウンロードしています。
（バージョンは2016年6月現在）
ダウンロードしたファイルからインストール、以上。
WPSから

> node –v

でバージョンが確認できれば、Node.jsのインストールは一先ず完了です。
私のNode.js は4.0.0ですね。
node-v.png

Stylusのインストール

JavaScriptといえば、普段はWebサイトの表示をブラウザ側＝フロントエンドであれこれしてくれてますね。そんなJavaScriptをサーバーサイド≒PC側で動かして便利に使うぜ！というJavaScriptアプリケーションがNode.jsです。
で、そのアプリケーションパッケージの一つにStylusがあります（かいつまんだ説明）。
Stylusのインストールは、計2回行います。
グローバル・インストールと作業フォルダへのインストール。
1つ目のインストール
npm＝node package managerというNode.jsのパッケージ管理機能を使って、stylusをグローバル・インストールします。
グローバル・インストールすることで、WPSでどのフォルダにいてもstylusコマンドを呼び出せます。
WPSで使いたいプログラム名＝コマンド・オプション・対象を確認しつつ命令文を書きます。コピペでなく打ち込み推奨。

> npm intall –g stylus

-g オプションでグローバル・インストールになります。
インストール確認＆バージョン確認は

> stylus -V

グローバル・インストールは以上です。
次に、2つ目のインストール
作業フォルダへもインストール作業が必要です。
今回はユーザーフォルダのnew-projectで作業するとします。
project-folder.png

> cd ~/

> cd \new-project

cd ~/ で ユーザーのホームへ移動、私のPCならC:\Users\akiyaに移動する。ある程度ファイル名を入力したらTabキーで候補が出る。
new-projectフォルダでnpm install を実行、この時は -g を付けない。

> npm install stylus

npm-install-2.png
ログにWARN何とかが出ているかもしれませんが警告なので、一応問題はない。
Errorの場合はインストールが止まるはずです。
インストールが終わったらnew-projectフォルダにnode_moduleフォルダが増えます。
この中にJavaScriptライブラリやモジュールが沢山入っていて、コンパイル処理で呼び出されます。
node-modules-explore.png
もちろん、どこにnew-projectフォルダを置いてもいいし、作業フォルダの名前も好きに決められます。フォルダを作ったら作業フォルダへのインストールを忘れずに。

.stylファイルを書いてコンパイル

style.styl を次のように書いていたとして、CSSファイルをコンパイル（ソースコードから生成）してみます。

bright-h = #257bcc
.menu-item
    color bright-h
    display block
    padding 0.2rem 1rem
    border-left solid 3px #fff
    &:hover
        border-left solid 3px bright-h
    & a:hover
        text-decoration none

WPSからコンパイルを実行します。使いたいプログラム名と対象ファイルを指定して実行。

> stylus style.styl

成功すれば、たった1行 compiled style.cssと表示されます。あっさり。
compiled
コンパイル済みCSSはstyle.cssとして、同じフォルダに保存されます。この辺は実行時オプションで指定フォルダへ出力など可能です。
あえて、Stylusファイルをタイポ（ミスタイプ）してコンパイル・エラーを発生させてみます。
compile-error
「パースエラー 6行目24文字目 ：があったんじゃない？」
とのことですが、5行目に { があるために、パース＝構文解析の辻褄が合わなくてコンパイルが中断されました。
その後にエラーを出したモジュールがズラズラっと表示されます。
style.stylファイルを修正しましょう。Node.js、Stylus双方ともに何も変更されませんし、問題もありません。
生成されたCSSファイルの中身は下記の通り。

.menu-item {
    color: #257bcc;
    display: block;
    padding: 0.2rem 1rem;
    border-left: solid 3px #fff;
}
.menu-item:hover {
    border-left: solid 3px #257bcc;
}
.menu-item a:hover {
    text-decoration: none;
}

例えば、stylファイルではbright-h = #257bcc と16進数を色名に格納しておきます。
Styleファイルの4行目11行目ではcolor+色名で指定しておくと、コンパイル後のCSSでは16進数に展開されています。
diff-styl-css.png
実は、このコードはサイトのトップページのCSSの一部です。
グローバルメニューのリンクは、ホバーの時に文字色と同じ色の3pxの左ボーダーを表示する、という指定です。
2016-06-12_15h34_32.png
このようにShirohanadaテーマはStylファイルからstyle.cssを生成しています。
Stylusは単体アプリケーションとしても機能が豊富です。
Styleファイルへの変更を検知して自動でコンパイルしたり、
ベンダープレフィックスを付けるライブラリを使ったり、
ブラウザのインスペクタ（要素を調査）からStylファイルの何行目のスタイルが当たってるか分かったり…
素敵な機能が備わりまくりですが、実は私も使い切れてません。
この記事を書くために、改めてコマンドライン=CLIからStylusを使ってみた感触では、Node.js+Stylusだけでテーマ用のstyle.cssの作成はできそう。
なので、次回「StylusをCLIで使う」へ続く！

参考にしたサイト
Stylusを使ってみる | アカベコマイリ
SASSよりもStylusが優れている6つのポイント | Qiita

bright-h = #257bcc 
.menu-item color bright-h display block padding 0.2rem 1rem border-left solid 3px #fff &:hover border-left solid 3px bright-h & a:hover text-decoration none

カテゴリー：

最終更新：