标签: gulp-ruby-sass

我正试图在Windows上运行gulp-ruby-sass.

我已经安装了Ruby和Sass: $ gem install sass

我的gulp.task看起来像这样:

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

当我进入我的项目的根目录并运行时$ gulp styles,我得到这个:

[22:54:52] Using gulpfile c:\wamp\www\wordpress\
wp-content\themes\bootscores\gulpfile.js
[22:54:52] Starting 'styles'...
[22:54:52] 'sass' is not recognized as an internal or external command,
operable program or batch file.
Error in plugin 'gulp-ruby-sass'
Message:
    Gem undefined is not installed.
[22:54:52] Finished 'styles' after 89 ms

我一直在寻找这个问题的解决方案大约两个小时了,现在还没找到一个可以帮助我的方法.

我正在尝试编译sass,gulp-ruby-sass但我得到了TypeError: glob pattern string required.

这就是我的gulpfile.js样子:

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

var paths = {
    sassSrcPath: ['Content/css/**/*.scss'],
    sassDestPath: ['build/css/'],
    sassImportsPath: ['Content/styleguide/']
};

// Styles Task
gulp.task('styles', function () {
    gulp.src(paths.sassSrcPath)
        .pipe(sass({
            style: 'compressed',
            loadPath: [paths.sassImportsPath]
        }))
        .pipe(gulp.dest(paths.sassDestPath));
});

// Watch Task
gulp.task('watch', function () {
    gulp.watch(paths.sassSrcPath, ['styles']);
});

gulp.task('default', ['styles', 'watch']);

这是我的文件夹结构:

??? Content
?   ??? css
?   ?   ??? partials
?   ?   ?   ??_icons.scss
?   ?   ??? main.css.scss
? …

我正在使用gulp-ruby-sass编译我的js和sass.

我首先遇到了这个错误TypeError: Arguments to path.join must be strings

找到了这个答案,这是因为我使用的是源代码和gulp -sass,建议使用gulp-ruby-sass代替.

接下来,我尝试使用以下语法编译所有SASS文件:

gulp.task('sass', function () {
    return sass('public/_sources/sass/**/*.scss', { style: 'compressed' })
        .pipe(sourcemaps.init())
        .pipe(concat('bitage_public.css'))
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('public/_assets/css'))
        .pipe(livereload());
});

哪个产生了这个错误: gulp-ruby-sass stderr: Errno::ENOENT: No such file or directory - public/_sources/sass/**/*.scss

然后我在答案中注意到我发现作者写道**尚未支持地球仪:

另外请记住,在撰写本文时,使用gulp-ruby-sass 1.0.0-alpha时,还不支持globs.

我做了更多的挖掘,并找到了一种方法来使用数组来指定我的SASS文件的路径,所以我尝试了以下内容:

gulp.task('sass', function () {
    return sass(['public/_sources/sass/*.scss',
             'public/_sources/sass/layouts/*.scss',
             'public/_sources/sass/modules/*.scss',
             'public/_sources/sass/vendors/*.scss'], { style: 'compressed' })
    // return sass('public/_sources/sass/**/*.scss', { style: 'compressed' })
    .pipe(sourcemaps.init())
    .pipe(concat('bitage_public.css'))
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('public/_assets/css'))
    .pipe(livereload());
});

但我仍然得到Errno::ENOENT: No such file …

gulp插件gulp-ruby-sass(https://github.com/sindresorhus/gulp-ruby-sass)给出不编译,终端中的错误信息就像这样

错误:必须提供模式

这是gulpfile.js的详细信息

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

    gulp.task('styles', function (argument) {
        gulp.src('sass/app.scss')
            .pipe(sass())
            .pipe(gulp.dest('css/'));
    });