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」と呼ばれるモジュールも入れていきます。これを使うことでコンパイル速度が上がるとのことですので忘れずに追加しておきましょう。
公式でもNode SassではなくDart Sassの利用を推奨されているようになったため、これを機にリプレイスしてみるのもいいのではないでしょうか。Dart Sassにはより便利な機能も今後追加されていくということですし、移行コストもそんなに高くないと思いますので、是非試してみてはいかがでしょうか。
$ 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にはより便利な機能も今後追加されていくということですし、移行コストもそんなに高くないと思いますので、是非試してみてはいかがでしょうか。
sponserd
keyword search
categories
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
comments
とも