处理 Gulp、Bundler、Ruby 和 Susy

Question

根据 this，可以使用 Gulp 从 Ruby 编译 susy 安装。但是否可以使用 gulp-sass 而不是 gulp-compass 或 gulp-ruby-sass 因为性能和弃用？实际上我在 gulpfile.js:

中使用了这个

gulp文件

var gulp = require('gulp');

// Include plugins
var plugins = require('gulp-load-plugins')();

// Variables de chemins
var source = './sass/**/*.scss'; // dossier de travail
var destination = './css/'; // dossier à livrer   

gulp.task('sasscompil', function () {
  return gulp.src(source)
  .pipe(plugins.sass({
      outputStyle: 'compressed',
      includePaths: ['/home/webmaster/vendor/bundle/gems/susy-2.2.2/sass']
  }).on('error', sasscompil.logError))
  .pipe(plugins.csscomb())
  .pipe(plugins.cssbeautify({indent: '  '}))
  .pipe(plugins.autoprefixer())
  .pipe(gulp.dest(destination + ''));
});

但是错误日志不起作用，因为 sasscompil 没有定义。然后我需要为所有前指南针提供路径，包括 susy、sassy-button 等。是否可以为宝石提供全球路径？另一件事，尽管使用 gulp-load-plugins 我是否安装了 gulp 插件？因为如果我不这样做，gulp 找不到插件。

谢谢

Answer 1

您需要将 sasscompil.logError 更改为 plugins.sass.logError

这样

gulpfile.js

gulp.task('sasscompil', function () {
  return gulp.src(source)
  .pipe(plugins.sass({
      outputStyle: 'compressed',
      includePaths: ['/home/webmaster/vendor/bundle/gems/susy-2.2.2/sass']
  }).on('error', plugins.sass.logError))
...
});

gulp-sass 文件：

Pass in options just like you would for node-sass; they will be passed along just as if you were using node-sass. Except for the data option which is used by gulp-sass internally. Using the file option is also unsupported and results in undefined behaviour that may change without notice.

例子

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

处理 Gulp、Bundler、Ruby 和 Susy

Dealing with Gulp, Bundler, Ruby and Susy

sass

gulp

bundler

susy