处理 Gulp、Bundler、Ruby 和 Susy答案

【问题标题】：Dealing with Gulp, Bundler, Ruby and Susy处理 Gulp、Bundler、Ruby 和 Susy
【发布时间】：2017-09-22 04:21:09
【问题描述】：

根据this，可以使用 Gulp 从 Ruby 编译 susy install。但是由于性能和弃用，是否可以使用 gulp-sass 代替 gulp-compass 或 gulp-ruby-sass ？实际上我在我的 gulpfile.js 中使用了这个：

gulpfile

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 等。是否可以为 gems 提供全局路径？另一件事，尽管使用 gulp-load-plugins 我是否安装 gulp 插件？因为如果我不这样做，gulp 就找不到插件。

谢谢

【问题讨论】：

尝试将sasscompil 更改为plugins.sass.logError - 可以在下面留下答案。（我们将错误传递回node-sass，gulp-sass 使用它来输出错误）ref
以上工作有没有？
是的，换成plugins.sass.logError给我Error in plugin 'sass' Message: sass/application.scss Error: File to import not found or unreadable: sassy-buttons. Parent style sheet: /var/www/drupal-6/sites/all/themes/starter-susy2-nc-d6/sass/application.scss on line 33 of sass/application.scss
现在，我们需要关注其他点：gems path 和 gulp plugins
您在将/var/www/drupal-6/sites/all/themes/starter-susy2-nc-d6/sass/‌application.scss 导入到sass/application.scss 时出错我将提交答案，因为它解决了导入错误与scss 文件而不是@987654332 相关的问题/问题@

标签： sass gulp bundler susy

【解决方案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 文档：

像 node-sass 一样传入选项；它们将像您使用 node-sass 一样被传递。除了 gulp-sass 内部使用的 data 选项。也不支持使用 file 选项，这会导致未定义的行为，可能会在没有通知的情况下发生更改。

示例

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

【讨论】：