OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

Gulpで使っているSassをNode SassからDart Sassへ移行してみる

過去記事「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にはより便利な機能も今後追加されていくということですし、移行コストもそんなに高くないと思いますので、是非試してみてはいかがでしょうか。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

COMMENTS

  • とも

    2021.1.12
    はじめまして。 独学でプログラミング勉強している者です。 記事を参考にdart sassの移行、試みましたが上手くいきません。 エディタはv.s codeです。 一応 gulpfile.js貼り付けときます。 const gulp = require('gulp'); const sass = require('gulp-sass'); sass.compiler = require("sass"); const rename = require('gulp-rename'); const fibers = require('fibers'); function sassCompile(){ return ( gulp .pipe(sass({fiber: fibers})) .src('public/assets/scss/*.scss') .pipe(sass({outputStyle: 'expanded'})) .pipe(rename('style.css')) .pipe(gulp.dest('public/assets/css')) ) } // ▽▽▽ ここから追加 // "sassCompile"として使用する exports.sassCompile = sassCompile; function watch(){ gulp.watch('public/assets/scss/*.scss',sassCompile); } // "npx gulp"でwatchを実行する exports.default = watch; html,css,sass,jqueryと勉強してきて、web制作の楽しさを感じておりますので、 このまま挫折したくありません。 お時間あるときにでも、」アドバイス頂けたら幸いです。

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram