与gulp-ruby-sass一起吞咽：错误：../ style.css.map：3：1：未知单词

使用基本的gulp / express构建手表获得奇怪的错误。

目录布局

project/ - sass/ - style.scss - gulpfile.js - index.html 

Gulpfile.js

 var gulp = require('gulp'), sass = require('gulp-ruby-sass'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), rename = require('gulp-rename'); gulp.task('express', function() { var express = require('express'); var app = express(); app.use(require('connect-livereload')({port: 4002})); app.use(express.static(__dirname)); app.listen(4000); }); var tinylr; gulp.task('livereload', function() { tinylr = require('tiny-lr')(); tinylr.listen(4002); }); function notifyLiveReload(event) { var fileName = require('path').relative(__dirname, event.path); tinylr.changed({ body: { files: [fileName] } }); } gulp.task('styles', function() { return gulp.src('sass/*.scss') .pipe(sass({ style: 'expanded', sourcemap: false })) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1')) .pipe(gulp.dest('css')) .pipe(rename({suffix: '.min'})) .pipe(minifycss()) .pipe(gulp.dest('css')); }); gulp.task('watch', function() { gulp.watch('sass/*.scss', ['styles']); gulp.watch('*.html', notifyLiveReload); gulp.watch('css/*.css', notifyLiveReload); }); gulp.task('default', ['styles', 'express', 'livereload', 'watch'], function() { }); 

Style.scss

 body { position: relative; } 

快速服务器/ livereload工作正常，但当它尝试编译样式表时，我收到此错误（即使使用sourcemap: false ）

 gulp-ruby-sass: write style.css.map events.js:72 throw er; // Unhandled 'error' event ^ Error: /style.css.map:3:1: Unknown word 

Answer 1

现在禁用源图是一种神秘感。 你必须这样做

 .pipe(sass({ "sourcemap=none": true })) 

资源

Answer 2

不完全确定为什么要修复它，但将autoprefixer管道更改为：

 .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false })) 

并将它放在sass管（顶部）之前，可以使它成功构建。

Answer 3

我修复了这个问题，保留了源映射并使用了gulp-filter ：

 var filter = require('gulp-filter') var filterCSS = filter('**/*.css'); gulp.task('styles', function() { return gulp.src('sass/*.scss') .pipe(sass({ style: 'expanded', sourcemap: true })) // Filters only css files before auto prefixing .pipe(filterCSS) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1')) .pipe(filterCSS.restore()) .pipe(gulp.dest('css')) .pipe(rename({suffix: '.min'})) .pipe(minifycss()) .pipe(gulp.dest('css')); }); 

Answer 4

我在gulp-ruby-sass插件中遇到了同样的问题。 我发现这篇博文解释说gulp-ruby-sass插件中存在一些关于源映射的错误。 他们都在一周前关闭了一个星期。 如果你升级到gulp-ruby-sass~1.0.0-alpha，这应该可以解决你对源地图的问题。

如果这不起作用，我上面链接的文章显示了如何使用没有源映射问题的gulp-sass插件。

Answer 5

尝试升级到gulp-ruby-sass 1.0.0-alpha。 它使用gulp-sourcemaps并且应该避免这个问题的所有迭代。