クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

【CSS】StylusをGulpでコンパイルしてみる

メタ言語の続きです。以前、こちらの記事でAltCSSとしてSass(SCSS)をコンパイルしたのですが、その後、Stylusも触ってみて便利に感じたので、Gulpでのコンパイルを体験したく。それではいきましょう!

【目次】

※参考:【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'));
});
  • 変数gulpgulpを読み込む
  • 変数stylusgulp-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">テスト3. セミコロンだけ省略</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が存在しないのでスタイルは当たっていない。

f:id:idr_zz:20200310053137j:plain

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

ブラウザをリロードすると…
f:id:idr_zz:20200310054007j:plain スタイルが当たっている!

コンパイルされた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