メタ言語の続きです。以前、こちらの記事でAltCSSとしてSass(SCSS)をコンパイルしたのですが、その後、Stylusも触ってみて便利に感じたので、Gulpでのコンパイルを体験したく。それではいきましょう！
【目次】
- Stylusとは
- フォルダ作成→移動→package.json作成→Gulpインストール
- パッケージ（gulp-stylus）をインストールする
- ファイルを作る
- gulpfile.jsにgulp.task()を記述
- htmlファイルを作成
- styleファイルを作成
- コンパイル実行
- 最後に
※参考：【CSS】Sass（SCSS）をGulpでコンパイルしてみる - クモのようにコツコツと
※参考：メタ言語（HTMLテンプレートエンジン、AltCSS、AltJS）まとめ
qiita.com
Stylusとは
Stylusは以前、AltCSSの記事でも紹介したように、
- 標準のCSS書式
- Sassっぽいブロックの波カッコ
{ }のない書き方 - stylus独自のさらに省略した書き方
が許容されるフレキシブルなAltCSS。
※参考：【LESS, SCSS, Sass, Stylus, PostCSS】 AltCSS 事始め - クモのようにコツコツと
メタ言語選定の記事でシェアを調べたときに、Sassに続いて2位だった。
※参考：フロントエンドのメタ言語のコンパイル環境を作る（言語選定編） - クモのようにコツコツと
実際に使ってみて結構便利だし、古いコードから移行するような仕事でも古いコードと共存できるのがいい。
フォルダ作成→移動→package.json作成→Gulpインストール
これまでのメタ言語と同様の流れでコンパイルできると思うのでやってみる。
node.jsとnpmは入っている前提（下記のコマンドでバージョン番号が出る）
node -v npm -v
コンパイルを実行したいフォルダを作成する。今回は「gulp_stylus」とする。
cdコマンドで移動する
cd /（フォルダ）/gulp_stylus
package.jsonを作成
npm init -y
ローカルにGulpインストール
npm install -D gulp
ここまでは一連の流れ。
パッケージ（gulp-stylus）をインストールする
ここから固有の流れ。こちらの記事が参考になりました。
※参考：gulpのインストール→Stylusのコンパイル - Qiita
Sassの時は「gulp-sass」というパッケージをインストールしたが、Stylusでは「gulp-stylus」というパッケージをインストールする。
npm install -D gulp-stylus
インストールに成功するとpackage.jsonに追記される。
"devDependencies": { "gulp": "^4.0.2", "gulp-stylus": "^2.7.0" }
ファイルを作る
このような構成。
gulp_stylus ├css │└common.styl ├index.html └gulpfile.js
Stylusの拡張子は.stylなんだ。
（上記の他にnode_modulesフォルダ、package-lock.json、package.jsonもある）
gulpfile.jsにgulp.task()を記述
先程の記事を参考に、以前Sassのときに書いたgulp.task()を打ち替えてみる。
※参考：gulpのインストール→Stylusのコンパイル - Qiita
const gulp = require('gulp'); const stylus = require('gulp-stylus'); gulp.task('stylus', () => { return gulp .src('css/common.styl') .pipe(stylus()) .pipe(gulp.dest('css')); });
- 変数
gulpでgulpを読み込む - 変数
stylusでgulp-stylusを読み込む gulp.task()メソッド実行。第一引数はstylus、第二引数は無名関数（引数はなし）- 無名関数の中は
gulp.src().pipe().pipe()とチェーンになっている src()の引数はcommon.stylのパス- 一つ目の
pipe()の引数はstylus()で、引数にオプションはなし - 二つ目の
pipe()の引数はgulp.dest()でcssフォルダに吐き出す
Sassの時とほぼ同じ構成でオプションはなしにしてみた。
※参考：【CSS】Sass（SCSS）をGulpでコンパイルしてみる - クモのようにコツコツと
htmlファイルを作成
以前、AltCSSの記事で書いた「Stylus」の内容を元に。
※参考：【LESS, SCSS, Sass, Stylus, PostCSS】 AltCSS 事始め - クモのようにコツコツと
こちちらが元になったCodePen
See the Pen Stylus practice 1 by イイダリョウ (@i_ryo) on CodePen.
まずindex.htmlを作成。
HTMLコード
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>初めてのSass(SCSS)コンパイル</title> <link rel="stylesheet" href="css/common.css"> </head> <body> <section id="stylus"> <h1>Stylus事始め</h1> <p class="lede">CodepenのSettingの旅CSS編第4回。今回はStylus。LESSとSASSのいいとこ取りと言われるそうな。</p> <section id="kihou"> <h2>Stylus記法</h2> <p>Stylusはフレキシブルで色々な書き方ができる。</p> <ul> <li>LESS、SCSSのような書き方</li> <li>Sassのような書き方</li> <li>さらに省略した書き方</li> </ui> <span class="bikou">そして、これらが混在しててもOK！！</span> </p> </section> <section id="less"> <h2>LESS、SCSSのような書き方</h2> <p>LESSはCSSと記法が近く、初めてメタ言語に手を出す人にとっては読みやすく手を出しやすい。<br> Rubyと似た書き方でスタイリッシュだったSASSもLESSの影響で、CSSに近いSCSS記法を後から作った。<br> Stylusも同様の書き方ができる。<br> <span class="bikou">この段落はその書き方で書いています。</span> </p> </section> <section id="sass"> <h2>Sassのような書き方</h2> <p>波括弧{}や行末セミコロン;を省略するなど、スタイリッシュな記法。その代わりにインデントは厳密に入れなければならない。<br> SassはRubyで動き、記法もRubyと似ているらしい。覚えるのに少し学習がいるが、ネクスが深い時に波括弧の数を気にしなくていいので、慣れればいいかもしれない。<br> そしてStylusも同様の書き方ができる。<br> <span class="bikou">この段落はその書き方で書いています。</span> </p> </section> <section id="stylus"> <h2>さらに省略した書き方</h2> <p>そしてこれは、Stylusのオリジナルな記法だが、プロパティのコロン:も省略ができる。<br> <span class="test1">テスト1. コロンもセミコロンも省略</span><br> <span class="test2">テスト 2. コロンだけ省略</span><br> <span class="test3">テスト３. セミコロンだけ省略</span><br> <span class="test4">テスト4. 何も省略しない</span><br> →結果. 全部効いた！フレキシブル！<br> <span class="bikou">この段落はその書き方で書いています。</span><br> <span class="bikou">親要素の参照は「&」。これはLESSもSassも一緒。</span><br> </p> </section> </section> </body> </html>
- CodePenのコードの外側にdoctype、htmlタグ、headタグ、bodyタグを追加。
headタグの中にCSSファイルのリンクを書いているが
<link rel="stylesheet" href="css/common.css">
まだcommon.cssが存在しないのでスタイルは当たっていない。
styleファイルを作成
HTMLと同様、「メタ言語」の記事の「Stylus」から。
common.stylを作成。
styleコード
/*CSS記法*/ #stylus h1 { font-size: 40px; } #kihou h2 { font-size: 30px; color: red; } #kihou .bikou { font-size: 0.8em; } #kihou .bikou:before { content: "※"; } /*LESS, SACC記法*/ #less { background: #eee; padding: 10px; margin: 0 0 10px; h2 { font-size: 30px; color: blue; } .bikou { font-size: 0.8em; &:before { content: "※"; } } } /*Sass記法*/ #sass background: #eee padding: 10px margin: 0 0 10px h2 font-size: 30px color: blue .bikou font-size: 0.8em &:before content: "※" /*Stylusオリジナル*/ #stylus background #eee padding 10px margin 0 0 10px h2 font-size 30px color blue .bikou font-size 0.8em &:before content "※" .test1 color red .test2 color red; .test3 color: red .test4 color: red;
いろんな書き方が混在できてていいね！最後の部分で書いているようなフレキシブルなコロンやセミコロンもコンパイルされるはず。
コンパイル実行
いよいよ実行！下記のコマンドでいけるはず！
npx gulp stylus
common.cssが追加された！
gulp_sass ├css │├common.styl │└common.css //追加された！ ├index.html └gulpfile.js
ブラウザをリロードすると…
スタイルが当たっている！
コンパイルされたCSSコード
/*CSS記法*/ #stylus h1 { font-size: 40px; } #kihou h2 { font-size: 30px; color: #f00; } #kihou .bikou { font-size: 0.8em; } #kihou .bikou:before { content: "※"; } /*LESS, SACC記法*/ #less { background: #eee; padding: 10px; margin: 0 0 10px; } #less h2 { font-size: 30px; color: #00f; } #less .bikou { font-size: 0.8em; } #less .bikou:before { content: "※"; } /*Sass記法*/ #sass { background: #eee; padding: 10px; margin: 0 0 10px; } #sass h2 { font-size: 30px; color: #00f; } #sass .bikou { font-size: 0.8em; } #sass .bikou:before { content: "※"; } /*Stylusオリジナル*/ #stylus { background: #eee; padding: 10px; margin: 0 0 10px; } #stylus h2 { font-size: 30px; color: #00f; } #stylus .bikou { font-size: 0.8em; } #stylus .bikou:before { content: "※"; } #stylus .test1 { color: #f00; } #stylus .test2 { color: #f00; } #stylus .test3 { color: #f00; } #stylus .test4 { color: #f00; }
ブロックの波カッコ{ }、コロン、セミコロンなどがキレイに揃った。標準だとスタイルとスタイルの間は改行なしになるっぽい。
最後に
StylusはSass(SCSS)以上の多機能で、フレキシブルさもあるのでネイティブCSSやSass(SCSS)からの移行もしやすいAltCSSです。知名度が高いのはSass(SCSS)ですが、コンパイルもほとんど同じ流れでできることがわかったので今後もフォローしていきたいと思います。それではまた！
※参考：メタ言語（HTMLテンプレートエンジン、AltCSS、AltJS）まとめ
qiita.com
