node-reset-scssを使ってgulpでreset cssを挿入する方法

node-reset-scssを使うと、gulpでSassをコンパイルする際に、自動的にreset cssを挿入することができます。
公式サイトを見ても今一つ使い方が分からなかったので、備忘録代わりにメモしておきます。

必要な環境

すでにnodeがインストール済みで、プロジェクトのディレクトリ内に以下のnpmパッケージがインストールされている前提とします。

• node.js
• gulp
• gulp-sass

インストール方法

プロジェクトのディレクトリで以下のコマンドを実行。

npm i node-reset-scss --save-dev

使い方

gulp-sassを使ってコンパイルする場合、gulpfile.jsに以下のように記述してオプションを追加。

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
 
gulp.task('sass', function () {
  gulp.src('path/to/input.scss')
    .pipe(sass({
      includePaths: require('node-reset-scss').includePath
    }))
    .pipe(gulp.dest('path/to/output.css'));
});

公式サイトの説明では、上記の設定しか書かれていないのですが、当然（？）というか、これだけではreset cssの挿入は行われません。

そもそもincludePathsとは、node-sassで @import 機能を使って読み込むためのパスを追加するオプションなので、Sassファイル側からも @import してあげる必要があります。

style.scss

@charset "utf-8";

（中略）

@import "_reset";

（中略）

上記のように記述した上でコンパイルすると、cssファイルの冒頭にreset cssを挿入することができます。

結論

実際にやっていることは、node-reset-scssのフォルダに入っている _reset.scss をインポートしているだけなので、果たしてこれをプラグインを使ってやる意味があるかという疑問は残ります。

自前で _reset.scss を設置してインポートさせても、手間的にはほとんど変わらないでしょう。ただ、予めよく使うpackage.jsonやgulpfile.jsに組み込んでしまえば、導入しやすいという利点はあるかもしれません。

また、gulp-sassでincludePathsオプションを活用すれば、外部のパスをインクルード先として定義できるので、複数プロジェクトで使い回せるmixinなどは、プロジェクト内ではなく、共通のフォルダにまとめておくと管理がしやすそうです。