使用 GULP 编译 SASS 和 SUSY答案

【问题标题】：Compiling SASS and SUSY with GULP使用 GULP 编译 SASS 和 SUSY
【发布时间】：2014-09-14 21:58:47
【问题描述】：

我正在尝试让 gulp 编译我的 sass 并使用 susy 网格/框架。

我无法在网上找到有关此的任何信息。

我已包括：

"gulp-ruby-sass": "^0.7.1",

进入我的package.json 并安装所有东西。

我的 gulp sass gulp 任务喜欢这样：

gulp.task('sass', ['images'], function () {
  return gulp.src('src/sass/*.{sass, scss}')
    .pipe(sass({
      bundleExec: true,
      sourcemap: true,
      sourcemapPath: '../sass'
    }))
    .on('error', handleErrors)
    .pipe(gulp.dest('build'));
});

所以我一生都无法弄清楚如何包含susy，所以它符合使用gulp，我没有看过也似乎无法在网上找到任何与此相关的内容。

【问题讨论】：

标签： javascript sass gulp susy-sass

【解决方案1】：

你可以使用gulp-compass，你只需要在你的系统中安装compass并通过npm安装gulp-compass包，这里是一个示例代码：

var compass = require('gulp-compass');

gulp.task('compass', function() {
  return gulp.src('./src/*.scss')
  .pipe(compass({
    // Gulp-compass options and paths
    css: 'app/assets/css',
    sass: 'app/assets/sass',
    require: ['susy']
  }))
  .on('error', handleErrors)
  .pipe(gulp.dest('app/assets/temp'));
});

关于这个包的更多信息here

【讨论】：

宾果游戏好先生。但是我想在没有指南针的情况下包含它，所以我使用了gulp-sass 模块。但这并不重要。需求是关键。
gulp-compass 好像被gulp社区拒绝了！

【解决方案2】：

要从 Jamie 的回答中获得更多详细信息，以下是在没有指南针的情况下使用 susy 的方法。

从 github 下载 susy 的 .zip 包。解压包到 node_modules 目录。
就我而言，我将它放在 susy-master 文件夹中。

在 gulpfile.js 中，你可以有一些类似的东西来包含 susy 包。请注意，重要的是将正确的 includePath 值与 susy-master 文件夹的路径相同..

gulp.task('sass', function(){
  gulp.src('public/sass/styles.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
        outputStyle: 'compressed',
        includePaths: ['node_modules/susy-master/sass']
    }).on('error', sass.logError))

    .pipe(sourcemaps.write('maps'))
    .pipe(gulp.dest('public/css'))
});

在styles.scss中导入susy
```
@import "susy";
```

【讨论】：