Gulp TypeError: Arguments to path.join must be strings

Question

我对 gulp-ruby-sass 有疑问。当我尝试 运行 watch 任务并更改一些 .sass 文件时，出现错误：

TypeError: Arguments to path.join must be strings 

这是我的 gulpfile.js

var gulp = require('gulp');
var jade = require('gulp-jade');
var sass = require('gulp-ruby-sass');
var watch = require('gulp-watch');

gulp.task('sass', function() {
    return gulp.src('sass/*.sass')
        .pipe(sass())
                .pipe(gulp.dest('./css'));

});
gulp.task('watch', function() {
    gulp.watch('./sass/*.sass', ['sass']);
})

我使用了 gulp-slash 但它不起作用。

Answer 1

gulp-ruby-sass 1.0.0 版中的语法更改。看到这个问题：

https://github.com/sindresorhus/gulp-ruby-sass/issues/191

当前有新文档：

https://github.com/sindresorhus/gulp-ruby-sass/tree/rw/1.0#gulp-ruby-sass-is-a-gulp-source-adapter

这应该编译指定目录中的 sass 个文件：

gulp.task('sass', function() {
    return sass('sass/')
        .pipe(gulp.dest('./css'));
});

Answer 2

随着 gulp-ruby-sass 中的 syntax changes 从 1.0.0-alpha 开始，您您将需要使用 gulp-ruby-sass() 而不是 gulp.src() 从文件或目录编译您的 Sass。

如果您尝试将原始语法与更新或最新版本一起使用，您可能会遇到以下错误：

TypeError: Arguments to path.join must be strings

例如，0.7.x 和更早版本中的原始语法使用 gulp.src()，现已弃用：

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');

// gulp-ruby-sass: 0.7.1
gulp.task('sass', function() {
    return gulp.src('path/to/scss')
        .pipe(sass({ style: 'expanded' }))
        .pipe(gulp.dest('path/to/css'));
});

1.x 中引入的新语法使用 gulp-ruby-sass() 作为 gulp 源适配器：

// gulp-ruby-sass: 1.x
gulp.task('sass', function() {
    return sass('path/to/scss', { style: 'expanded' })
        .pipe(gulp.dest('path/to/css'));
});

注意 return 语句第一行的区别。

另外请记住，在撰写本文时，使用 gulp-ruby-sass 1.0.0-alpha 时，还不支持 glob。

Answer 3

稍微偏离主题，但如果还想将 gulp-sourcemaps, the various documentation out there is somewhat outdated. To use rjb 的示例与 sourcemaps 一起使用，那么您可以去

// gulp-ruby-sass: 1.x
gulp.task('sass', function() {
    return sass('path/to/scss', { style: 'expanded', sourcemap: true })
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('path/to/css'));
});

请注意，sourcemaps 的目标 arg './' 将评估为下面一行中的文件夹 gulp.dest(...)，实际上，地图文件将在 'path/to/css' 中结束.

功劳归功于 http://www.devworkflows.com/posts/getting-scss-auto-prefixer-and-source-map-to-play-nice/。