過去記事「Ruby SassからDart SassへSassの環境を移行させるまでの流れ」で、ローカル開発用のSass環境をDart Sassに移行する方法をまとめていましたが、Sassを使う場合にはGulpといったタスクランナーと併用する場合が多いのではないでしょうか。その場合には、Node.jsのモジュールでこれまでよく使われてきたNode Sassも同じく移行する必要があります。今回はGulpでNode Sassを使っている場合にDart Sassへ移行する方法をまとめていきたいと思います。   まずはnpmで必要なモジュールをインストールしていきます。Dart Sassの場合には「sass」というモジュール名を指定します。合わせて「fibers」と呼ばれるモジュールも入れていきます。これを使うことでコンパイル速度が上がるとのことですので忘れずに追加しておきましょう。

$ npm install --save-dev sass fibers

  インストールが完了すると、package.jsonにモジュールが追加されているのが確認できます。これで準備が整いましたので続いてGulpでタスクを編集していきます。ちなみに「gulp-dart-sass」と呼ばれるDart Sass用のコンパイルができるモジュールもあるようですが、基本的にNode Sassで使っていた「gulp-sass」のモジュールをそのまま使えます。 【package.json】※一部抜粋

{
  .......
  "devDependencies": {
    "fibers": "^5.0.0",
    "sass": "^1.28.0",
    .......
  },
  .......
}

  続いて「gulpfile.js」で、Sassのコンパイル用のタスクを編集していきます。基本的にはNode Sassを使っていた時と同じ形で、一部編集するだけでそのまま使えます。先ほどのfibersのモジュールを読み込んでおきます。そして、「sass.compiler」の指定でDart Sassのモジュールを指定するように変更します。あとはSassのコンパイルを行うメソッドの中で、オプションとしてfibersを指定するようにしておくだけでOKです。 【gulpfile.js】

const { src, dest, watch } = require('gulp'),
  sass = require('gulp-sass'),
  fibers = require('fibers');

sass.compiler = require('sass');
const taskSass = () => 
  src('src/scss/**/*.scss')
  .pipe(sass(
    { fiber: fibers }
  ))
  .pipe(dest('dist/assets/css'));

// Wacth tasks
const taskWatch = (done) => {
  watch('src/scss/**/*.scss', taskSass);
  done();
}

// Task run
exports.default = taskWatch;

  GulpでのSassのコンパイルタスクについて詳しくはこちらの記事「Gulpでファイル更新監視とエラー検知・通知でSassのコンパイルを効率化する」で紹介していますのでご参考に。これで実際にコマンドを実行するとSassのコンパイルができるのが確認できますね。

$ npx gulp default

  基本的にNode SassからDart Sassへの移行の際には、下記のようにSassのコンパイラ指定を切り替えるだけでOKです。あまり必要ないかもしれませんが、Node Sassに戻す場合もこちらの指定を切り替える形になります。

// Node Sassの場合
sass.compiler = require('node-sass');

// Dart Sassの場合
sass.compiler = require('sass');

 

---

  公式でもNode SassではなくDart Sassの利用を推奨されているようになったため、これを機にリプレイスしてみるのもいいのではないでしょうか。Dart Sassにはより便利な機能も今後追加されていくということですし、移行コストもそんなに高くないと思いますので、是非試してみてはいかがでしょうか。