web-dev-qa-db-ja.com

Gulp TypeError：path.joinへの引数は文字列でなければなりません

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スラッシュを使用しましたが、機能しません。

sassgulpgulp-watch
46
Andrew Gnilitskiy

1.0.0-alphaから始まるgulp-Ruby-sassの 構文の変更 を使用すると、ファイルまたはディレクトリからSassをコンパイルするには、gulp-Ruby-sass()の代わりにgulp.src()を使用する必要があります。

新しいバージョンまたは最新バージョンで元の構文を使用しようとすると、次のエラーが発生する場合があります。

TypeError: Arguments to path.join must be strings

たとえば、gulp.src（）を使用する0.7.x以前の元の構文は廃止されました。

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'));
});

Gulpソースアダプタとしてgulp-Ruby-sass（）を使用して1.xで導入された新しい構文：

// 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を使用している場合、グロブはまだサポートされていません。

82
rjb

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'));
});
6
Heikki

少しトピックから外れていますが、 gulp-sourcemaps も使用したい場合は、そこにあるさまざまなドキュメントはやや時代遅れです。 rjb の例をソースマップで使用するには、次のようにします。

// 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の宛先引数'./'は、下の行gulp.dest(...)のフォルダーに評価されることに注意してください。事実上、map-fileは'path/to/css'になります。

これの功績は http://www.devworkflows.com/posts/getting-scss-auto-prefixer-and-source-map-to-play-Nice/ にあります。

1
Frederik Struck-Schøning