Javascript gulp with 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() {

});

body { position: relative; }

Style.scss

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() {

});

body { position: relative; }

express服务器/livereload工作正常，但是当它试图编译样式表时，我得到了这个错误（即使使用

sourcemap:false

）

gulpruby-sass:write style.css.map
events.js:72
投掷者；//未处理的“错误”事件
^
错误：/style.css.map:3:1:未知单词

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

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

---

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

禁用sourcemaps现在是一个谜。你必须这样做

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

---

我修复了此问题，保留源地图并使用：

---

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

我在吞咽ruby sass插件时遇到了同样的问题。我发现了博客文章，其中解释了gulp ruby sass插件中关于源地图的一些bug。他们两个都在一个多星期前关门了。如果升级到gulp ruby sass~1.0.0-alpha，应该可以解决源地图的问题

---

如果这不起作用，我上面链接的文章将展示如何使用gulp sass插件，该插件没有源代码映射问题。

它非常清楚地告诉您style.css.map，第3行，char 1上有错误。是否检查了地图文件？地图文件不存在。它是在tmp中创建的，以前它是自动创建的，没有错误。我怀疑sass与此相关，但尚未找到解决方案。将管道移除到

gulp autoprefixer

可使其成功构建。嗯，得到同样的错误（没有明确说明）我下面提供的答案是否不能为您解决问题？这确实解决了问题。不知道为什么。在sass之前使用autoprefixer是否“保存”？对我来说似乎不太对这的确是个坏主意。标记为

/

的注释在进入autoprefixer之前不会被sass分条，这会导致更多错误。。。我需要在这里找到真正的问题拿着你的答案，移动到顶部，然后使用AutoRefixer工作！好发现！不是最好的解决方案（我真的想使用源地图），但比我的好，而且是我见过的最好的！伟大的芬达里德。一旦我找到了解决方案（或者bug得到修复），我们就可以使用sourcemaps，而不会出现

未知单词

错误，我会告诉你的。对于自动刷新器在mapfile问题上的糟糕表现，这是一个非常好的解决办法！谢谢。遗憾的是，这并不是真的，因为autoprefixer根本不能与ruby sass 1.0.x兼容。如果不能，请提交一个问题。当然应该。