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

Gulp 2020.11.04

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

Tags: ,,,,

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

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

1件のコメント

  • はじめまして。
    独学でプログラミング勉強している者です。
    記事を参考に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制作の楽しさを感じておりますので、
    このまま挫折したくありません。
    お時間あるときにでも、」アドバイス頂けたら幸いです。

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?