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

Question

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

最新的 gulp-sass 文档指出：
“您可以通过设置 sass、编译器属性来选择是使用 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 比较生成的压缩 CSS 文件之间的差异时4.0.2" 文件大小相差很大。

这是由于编译时的一些差异如：

Ruby 将 .1em 转换为：0.1em
而
gulp 一个保持 0.1em

和

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

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

Ruby Sass 3.7.3 can be found here: https://rubygems.org/gems/sass/versions/3.7.3

latest gulp-sass can be found here: https://github.com/dlmanning/gulp-sass

latest dart-sass can be found here: 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 字节）

Please note: your needs may be different and you should consider accordingly

Answer 2

顺便提一下，Babel 有两种并行的配置文件格式，可以一起使用，也可以独立使用。配置可以是 Project-wide 或 File-relative

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

重要的是要记住 .babelrc 文件，一旦开始一个较旧的项目。

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

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

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

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

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

Howto configure gulp-sass compiler to use dart-sass in gulpfile.babel.js?

rubygems

sass

gulp

gulp-sass

babeljs