如何配置 gulp-sass 编译器以在 gulpfile.babel.js 中使用 dart-sass？

Question

当您使用gulpfile.babel.js 配置文件而不是标准的gulpfile.js 时，如何设置sass.compiler 属性以使用Dart Sass 而不是Node Sass？

最新的 gulp-sass 文档指出：
“你可以通过设置 sass.compiler 属性来选择是使用 Dart Sass 还是 Node Sass。”

要使用 node-sass，我们需要为 gulpfile.js 声明：

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

sass.compiler = require('node-sass');

因此，要使用 dart-sass，我们需要将其声明为 gulpfile.js：

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

sass.compiler = require('dart-sass');

当我比较通过“Ruby Sass 3.7.3”和“gulp-sass 4.0.2”生成的压缩 CSS 文件之间的差异时，文件大小之间存在很大差异。

这是由于编译过程中的一些差异，例如：

Ruby 将.1em 转换为：0.1em
而
大口大口地保留0.1em

和

Ruby 一号将\f008 等代码转换为
而
gulp 将这些代码保持原样

加上其他一些零碎的东西。总的来说，我想通过 gulp 使用 ruby​​ 转换。我希望将 gulp-sass 与 dart-sass 编译器一起使用可能是满足我当前特定需求的更好解决方案。

Ruby Sass 3.7.3 可以在这里找到：https://rubygems.org/gems/sass/versions/3.7.3

最新的 gulp-sass 可以在这里找到：https://github.com/dlmanning/gulp-sass

最新的 dart-sass 可以在这里找到：https://github.com/sass/dart-sass

目前，我在我的gulpfile.babel.js 中使用它：

import gulp from 'gulp';
import print from 'gulp-print';
import concat from 'gulp-concat';
import sass from 'gulp-sass';
import uglify from 'gulp-uglify';
import notify from 'gulp-notify';
import size from 'gulp-size';
import fileSize from 'gulp-filesize';

Answer 1

别担心，我有答案！

这在我的新gulpfile.babel.js：

import gulp from 'gulp';
import print from 'gulp-print';
import concat from 'gulp-concat';
import sass from 'gulp-sass';
import uglify from 'gulp-uglify';
import notify from 'gulp-notify';
import size from 'gulp-size';
import fileSize from 'gulp-filesize';
import dartCompiler from 'dart-sass';
sass.compiler = dartCompiler;

对结果非常满意，这是一个合理的转换！由于 dart-sass，不得不进行一些与 SASS 相关的推荐改进，但最后，付出额外的努力是值得的：

Ruby Sass 3.7.3 生成的 CSS 文件大小：169.2 kB（169,215 字节）
gulp-sass 4.0.2 和 node-sass 4.11.0 编译器：170.4 kB（170,382 字节）
gulp-sass 4.0.2 和 dart-sass 1.17.2 编译器：168.9 kB（168,898 字节）

请注意：您的需求可能会有所不同，您应该相应地考虑

Answer 2

顺便提一下，Babel 有两种并行的配置文件格式，可以一起使用，也可以单独使用。配置可以是项目范围的或文件相关的

对于文件相关配置，请使用：
.babelrc（和 .babelrc.js）文件
package.json 带有 "babel" 键的文件

重要的是要记住 .babelrc 文件一旦采用较旧的项目。

一个很棒的预设实用程序是：

@babel/preset-env 是一个智能预设，允许您使用最新的 JavaScript，而无需微观管理目标环境需要哪些语法转换（以及可选的浏览器 polyfill）。这既让你的生活更轻松，也让 JavaScript 包更小！

要利用它，请将以下内容添加到您的 .babelrc 文件中：

{
  "presets": [ "@babel/preset-env" ]
}