Как настроить компилятор gulp-sass для использования dart-sass в gulpfile.babel.js?

Question

Как установить свойство sass.compiler для использования Dart Sass вместо Node Sass, когда вы используете gulpfile.babel.js файл конфигурации вместо стандартного gulpfile.js?

В последней документации gulp-sass говорится:
«Вы можете выбрать, использовать ли Dart Sass или Node Sass, установив свойство sass. Compiler.»

Чтобы использовать 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');

Когда я сравнил разницу между созданными сжатыми файлами CSS с помощью "Ruby Sass 3.7.3" и "gulp-sass 4.0.2", оказалось, что разница в размерах файлов довольно велика.

Это связано с некоторыми различиями во время компиляции, такими как:

Рубиновый преобразует .1em в: 0.1em
в то время как
глоток один держит 0.1em

и

Ruby преобразует коды, такие как \f008 в 
в то время как
глоток сохраняет эти коды, как они

плюс некоторые другие биты и бобы ... в общем, я хотел бы использовать преобразования ruby ​​через gulp. Я надеюсь, что использование 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

последний дартс-сасс можно найти здесь: 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 без необходимости микроуправления, какие преобразования синтаксиса (и, необязательно, браузерные полифиллы) необходимы вашей целевой среде (ам) , Это облегчит вашу жизнь и уменьшит объем 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 КБ (169 215 байт)
gulp-sass 4.0.2 с компилятором node-sass 4.11.0: 170,4 кБ (170,382 байта)
gulp-sass 4.0.2 с компилятором dart-sass 1.17.2: 168,9 кБ (168 898 байтов)

ПожалуйстаПримечание: ваши потребности могут отличаться, и вы должны учитывать соответственно