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

Question

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

最新的“狼吞虎咽”的文档指出：

“通过设置sass.编译器属性，您可以选择使用Dart Sass还是Node Sass。”

要使用节点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 3.7.3“和”gulp 4.0.2“生成的压缩CSS文件之间的差异时，发现文件大小之间存在很大的差异。

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

Ruby将.1em转换为：0.1em

而

狼吞虎咽的是0.1em

和

Ruby将\f008等代码转换为

而

狼吞虎咽的人保留着这些代码

再加上其他一些比特和鲍勃..。总的来说，我想使用红宝石转换通过吞咽。我希望用dart编译器可以更好地解决我目前的特殊需求。

Ruby 3.7.3可以在这里找到：https://rubygems.org/gems/sass/versions/3.7.3 最新的gulp可以在这里找到：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/预设-env是一种智能预置，它允许您使用最新的JavaScript，而无需微观管理目标环境需要哪些语法转换(以及可选的浏览器填充)。这既使您的生活更轻松，又使JavaScript包更小！

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

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