siromathics

gulp(v4)でstylusのコンパイル環境を作る

created:

gulpでStylusのコンパイル環境を構築します。 筆者の環境はnode v11.3.0、npm v6.3.0です。

下記コマンドでプロジェクトを初期化しておきます。

npm init -y

必要なパッケージのインストール

gulp本体とgulp-stylusを使うので、これらをインストールします。

npm install -D gulp gulp-stylus

gulpfile.jsを作成

パッケージをインストールしたら、プロジェクトのルートに下記の内容でgulpfile.jsを作成します。

const { src, dest } = require('gulp')
const stylus = require('gulp-stylus')

function css () {
  return src(['src/css/**/*.styl', '!src/css/**/_*.styl'])
    .pipe(stylus())
    .pipe(dest('dest/'))
}

exports.default = css

_から始まるファイルはコンパイルしないようにしています。

package.jsonにスクリプトも登録しておきましょう。

{
  ...
  "scripts": {
    "build": "gulp"
  }
  ...
}

Stylusのファイルを作成

今回はsrc/css/以下に作成します。

// src/css/style.styl

@import 'variables/*'

p
  color main-color
// src/css/variables/_color.styl

main-color = #fcc

コンパイル

Stylusファイルを作成したらコンパイルしてみます。

npm run build

プロジェクトのルートにdestディレクトリが作成され、style.cssが入っているかと思います。

参考

タグ一覧