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
而
一大口是保持0.1em

和

Ruby会将\f008等代码转换为
而
大吃一惊的是将这些代码保持原样

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

Ruby Sass 3.7.3 可在以下位置找到：https://rubygems.org/gems/sass/versions/3.7.3

最新口吃可以在这里找到：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字节）

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

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

2 个答案: