ruby - 根本无法让 gulp-ruby-sass 或 gulp-sass 工作

Question

我正在尝试使用 gulp-ruby-sass 和/或 gulp-sass，但它们都不适合我，我认为我已经正确设置了所有内容。我已经查看了很多其他 SO 帖子，但目前还没有对我有用。

我有另一个 gulp 任务，它递归地将 Assets 目录和 index.html 从 src 复制到 dist，这每次都有效。

为了测试 sass 设置是否正确，我运行了一个普通的 sass 编译，然后运行 ​​gulp； sass 更改工作并通过递归副本呈现。这是该 sass 测试的命令:

$ sass ./sass/main.scss ./src/assets/css/main.css
$ gulp

忘记 Vanilla sass 测试，回到这里的 gulp sass 问题 - 在我的 gulpfile 中，我在运行递归复制任务之前运行 gulp sass 任务，所以如果它有效，那么应该应用和复制 sass 更改。至少我是这么想的。

这是显示相关文件的目录结构:

    ├── src
    │    ├── index.html
    │    └── assets
    │           ├── css
    │           │    └── main.css
    │           ├── js
    │           │    └── app.js
    │           └── img
    │                └── etc.jpg
    │   
    ├── dist
    │    └── index.html ( from ./src via recursive copy)
    │    └── assets
    │           └── (same as ./src/assets via recursive copy)
    │   
    ├── sass
    │    ├── main.scss
    │    ├── _partial1.scss
    │    ├── _partial2.scss
    │    └── etc ...
    │
    ├── gulpfile.js
    │
    ├── node_modules
    │    └── etc ...
    │
    └── bower_components
         └── etc ...

在 gulpfile.js 中有几个文件映射对象，它们可以很好地用于 src/assets/的递归副本。但是为了测试 gulp-ruby-sass 任务，我对 sass/css 路径进行了硬编码，以消除文件映射错误的可能性。

郑重声明，我在 OSX Maverics 10.9.5 上运行，我认为我的环境设置正确:

$ ruby -v
ruby 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin13]
$ sass -v
Sass 3.4.9 (Selective Steve)

这是我的 gulpfile.js，显示了我迄今为止尝试过的方法，其中 gulp-sass 相关任务被注释掉了:

    var gulp = require('gulp');
    var watch = require('gulp-watch');
    var gsass = require('gulp-ruby-sass');
    // var gsass = require('gulp-sass');
    var gutil = require('gulp-util');

    // Base paths:
    var basePaths = {
        srcRoot: './src/',
        distRoot: './dist/',
        bowerRoot: './bower_components/'
    };

    // File paths:
    var filePaths = {
        sassRoot: basePaths.srcRoot + 'sass/',
        assetsBuildRoot: basePaths.srcRoot + 'assets/',
        jqMin: basePaths.bowerRoot + 'jquery/dist/jquery.min.js',
        html: basePaths.srcRoot + 'index.html'
    };

    // With gulp-ruby-sass
    gulp.task('compile-sass', function() {
            gulp.src('./sass/main.scss')
            .pipe(gsass({sourcemap: true, sourcemapPath: './sass/'}))
            .on('error', function (err) { console.log(err.message); })
            .pipe(gulp.dest('./src/assets/css'));
    });

    // With gulp-sass
    // gulp.task('gsass', function () {
    //  gulp.src('./sass/*.scss')
    //      .pipe(gsass())
    //      .pipe(gulp.dest('./src/assets/css'));
    // });

    // Assets directory copied recursively from /src to /dist:
    gulp.src(filePaths.assetsBuildRoot + '**/*.*', {base : basePaths.srcRoot})
        .pipe(gulp.dest(basePaths.distRoot));

    // Copy index.html from /src to /dist:
    gulp.src(filePaths.html)
        .pipe(gulp.dest(basePaths.distRoot));

    gulp.task('default', function() {

        // With gulp-ruby-sass
        // return gulp.src('./sass/main.scss')
        //  .pipe(gsass({sourcemap: true, sourcemapPath: './sass/'}))
        //  .on('error', function (err) { console.log(err.message); })
        //  .pipe(gulp.dest('./src/assets/css'));

        // gulp.watch('compile-sass');

        console.log('You reached the finishing line');
    });

我尝试了各种方法来修复错误，例如:删除所有 vanilla sass 编译的 .css 文件并运行 gulp 编译，但没有生成 .css。还尝试删除由 vanilla sass 编译生成的所有 *.map 文件，然后运行 ​​gulp 但没有骰子。

有谁能清楚地看到任何明显错误的东西吗？

提前致谢。

Answer 1

如果您使用的是 Sass >= 3.4，则需要安装 gulp-ruby-sass 版本 1.0.0-alpha:

npm install --save-dev gulp-ruby-sass@1.0.0-alpha

在这个新版本中，gulp-ruby-sass 是一个 gulp 源适配器，语法略有变化。而不是:

gulp.task('compile-sass', function() {
        gulp.src('./sass/main.scss')
        task code here
});

新语法是:

gulp.task('compile-sass', function() {
       return sass('./sass/main.scss')
        task code here
});

您可以在新版本文档中找到更多信息，包括源映射的新语法。 https://github.com/sindresorhus/gulp-ruby-sass/tree/rw/1.0