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

Question

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

最新的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 4.0.2”比较生成的压缩CSS文件之间的差异时，结果显示文件大小之间存在很大差异。

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

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

和

Ruby将代码如\f008转换为 而 gulp one保持这些代码不变

加上其他一些比特和bobs ..总体而言我想通过gulp使用ruby转换。我希望使用带有dart-sass编译器的gulp-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

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

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

一旦参加较旧的项目，重要的是要记住.babelrc文件。

一个很棒的预设工具是：

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

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

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

Answer 2

不用担心，我有答案！

这在我的新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字节）

请注意：您的需求可能有所不同，因此您应该考虑