Gulp stylus @import nib にハマる。

最近Glupに慣れようと頑張っています。
世間一般でCSSのプリプロセッサーははSCSSやCompassがやはり多いのでしょうか？僕は個人的にStylusが好きなので、今日は今までGruntでやっていたstylus+nibのコンパイルをGulpでしようとしてハマってしまったのメモです。

stylusをコンパイルするgulpのプラグイン

gulp-stylus をプロジェクトにインストールします。

$ npm install --save-dev gulp-stylus

stylusをコンパイルするタスクを書く

予めgulpとgulp-plumberをインストールしているものとします。

var gulp    = require('gulp'),
    plumber = require('gulp-plumber'),
    stylus  = require('gulp-stylus');

// stylus
gulp.task('stylus', function() {
  return gulp.src( 'dev/assets/stylus/*.styl' )
    .pipe( plumber() )
    .pipe( stylus({
      compress: true, // cssのmin化
      linenos: false   // line番号の出力
    }) )
    .pipe( gulp.dest('public/assets/css/') );
});

// watch
gulp.task('default', function() {
  gulp.watch(['dev/assets/stylus/*.styl'], ['stylus']);
});

gulpコマンドを実行してStylusのファイルの監視を始めます。

Stylusファイルを作る

@import 'nib'

#foo
  border-radius: 5px

Gruntでやっていた時のようにStylusファイルを作成して保存します。

エラーが出ました！

[16:05:39] Starting 'stylus'...
[16:05:39] Plumber found unhandled error:
Error in plugin 'gulp-stylus'
Message:
    /dev/stylus/main.styl:1:9
   1| @import 'nib'
--------------^
   2|
   3| #foo
   4|   border-radius 5px

failed to locate @import file nib.styl

nibは別途インストールして、Gulpタスクに書いてあげる必要があった。

gulp.js+webpack+stylusでフロントエンド開発環境をつくる | フリップフラップこちらの記事を見てみると、どうやらnibを別途インストールして、Gulpのtylusをコンパイルするところで stylus({use: [nib()]})としてあげないとダメなようです。

nibをインストールする

$ npm install --save-dev nib

gulpfile.jsを修正する

var gulp    = require('gulp'),
    plumber = require('gulp-plumber'),
    stylus  = require('gulp-stylus'),
    nib     = require('nib'); // nib を読み込む

// stylus
gulp.task('stylus', function() {
  return gulp.src( 'dev/assets/stylus/*.styl' )
    .pipe( plumber() )
    .pipe( stylus({
      use: [nib()], // nib を使う
      compress: true,
      linenos: false
    }) )
    .pipe( gulp.dest('public/assets/css/') );
});

// watch
gulp.task('default', function() {
  gulp.watch(['dev/assets/stylus/*.styl'], ['stylus']);
});

次のコマンドを叩いて、直接stylusをコンパイルするタスクを実行します。

$ gulp stylus
[16:15:00] Using gulpfile ~/gulpfile.js
[16:15:00] Starting 'stylus'...
[16:15:00] Finished 'stylus' after 312 ms

どうやら問題なくコンパイルできたようです！

#foo {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

※ Stylusファイルに `@import 'nib'`が無いとnibは使われないので注意！

Stylusに@import 'nib'を書き忘れていると、コンパイルエラーは出ないのですが、nibが使用されてない状態でコンパイルされてしまうので注意が必要です。

// @import 'nib' を書き忘れたstylusファイル
#foo
  border-radius: 5px

↓ コンパイル結果

#foo {
  border-radius: 5px;
}

Stylusファイルに @import 'nib' を書かなくても済む方法

調べていると、gulpファイルでnibをimportすればStylusにわざわざ@import 'nib'を書かなくても済む方法がありました。

gulpfile.jsを編集します。

// 略
// stylus
gulp.task('stylus', function() {
  return gulp.src( 'dev/assets/stylus/*.styl' )
    .pipe( plumber() )
    .pipe( stylus({
      import: ['nib'], // nib をインポート
      use: [nib()],
      compress: true,
      linenos: false
    }) )
    .pipe( gulp.dest('public/assets/css/') );
});
// 略

Stylusファイルの先頭に書いていた@import 'nib'を削除して、コンパイルするコマンドを実行します。

$ gulp stylus
[16:21:34] Using gulpfile ~/gulpfile.js
[16:21:34] Starting 'stylus'...
[16:21:35] Finished 'stylus' after 329 ms

コンパイルされたCSS

#foo {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

問題なくコンパイルされていました！
この方法はStylusファイルに@import 'nib'を書いてしまっていても特に問題なくコンパイルできるようです。　

感想

個人的にはgulpfileでnibをインポートしてしまっておく方法の方がimport書き忘れあってもnibが使えるし、メインのstylusでそれぞれのパーツをimportする方法でも、gulpfile.jsを使い回せば都度メインのstylusに@import 'nib'書かなくても済むので楽かなと思いました。　

[参考]