gulp-sass-cdn

在gulp-sass插件的依赖上进行微小的改动，支持cdn的方式引用sass文件解析。

安装（Install）

npm install gulp-sass-cdn --save-dev

基础用法（Basic Usage）

你可以这样编译你的Sass文件：

'use strict';
 
var gulp = require('gulp');
var sass = require('gulp-sass-cdn');
 
sass.compiler = require('node-sass');
 
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});
 
gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

你也可以同步的这样编译你的Sass文件：

'use strict';
 
var gulp = require('gulp');
var sass = require('gulp-sass');
 
sass.compiler = require('node-sass');
 
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});
 
gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

您可以通过设置sass.compiler属性来选择是使用Dart Sass还是Node Sass。默认情况下将使用Node Sass，但强烈建议您显式地将其设置为转发兼容性，以防默认情况发生变化。

注意，在使用Dart Sass时，由于异步回调的开销，默认情况下同步编译的速度是异步编译的两倍。为了避免这种开销，可以使用fibers包从同步代码路径调用异步导入器。为此，请将Fiber类传递给Fiber选项:

'use strict';
 
var Fiber = require('fibers');
var gulp = require('gulp');
var sass = require('gulp-sass-cdn');
 
sass.compiler = require('sass');
 
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass({fiber: Fiber}).on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});
 
gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

如何使用带有cdn地址的sass文件

当Node Sass解析一个以cdn:为前缀的URL的@import时:它将尝试根据以下URL解析URL。这对于直接使用UNPKG或jsDelivr中的文件非常有用

@import "cdn:https://unpkg.com/[email protected]/normalize.css";

如果@import的URL的前缀是unpgk，这里是支持解析UNPKG的简写语法。

@import "unpkg:[email protected]/normalize.css";

注意： 如果cdn地址中的sass内容，同样引入了别的sass文件(@import 'xxx')，请保证当前引入的cdn地址中的sass文件中依赖的所有地址，均为如上规则；

参数（options）

你可以像使用Node Sass这样传入参数。除了gulp-sass-cdn内部所使用的data选项（以此来传递sass包内容）,使用file选项也不受支持，并且会导致未知的行为，这些行为可能莫名其妙的就改变了。

举个栗子：

gulp.task('sass', function () {
 return gulp.src('./sass/**/*.scss')
   .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
   .pipe(gulp.dest('./css'));
});

或者是同步的代码

gulp.task('sass', function () {
 return gulp.src('./sass/**/*.scss')
   .pipe(sass.sync({outputStyle: 'compressed'}).on('error', sass.logError))
   .pipe(gulp.dest('./css'));
});

Source Maps

gulp-sass can be used in tandem with gulp-sourcemaps to generate source maps for the Sass to CSS compilation. You will need to initialize gulp-sourcemaps prior to running gulp-sass and write the source maps after.

gulp-sass可以与gulp-sourcemaps一起使用，为Sass到CSS编译生成source Map。您需要在运行gulp-sass之前初始化gulp-sourcemaps，之后再编写souce Maps。