gulp 与 gulp-ruby-sass：错误：../style.css.map:3:1：未知单词

Posted 2023-03-06

【中文标题】gulp 与 gulp-ruby-sass：错误：../style.css.map:3:1：未知单词

【英文标题】：gulp with gulp-ruby-sass: Error: ../style.css.map:3:1: Unknown word

【发布时间】：2015-01-14 18:18:36

【问题描述】：

使用基本的 gulp/express build watch 时遇到一个奇怪的错误。

目录布局

 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: <LOCAL_PATH_HERE>/style.css.map:3:1: Unknown word

【问题讨论】：

很清楚地告诉你 style.css.map 第 3 行 char 1 有问题。你检查过你的地图文件吗？

地图文件不存在。它是在 tmp 中创建的，以前它是自动创建的，没有错误。我怀疑 this update 与 sass 相关，但尚未找到解决方案。

将管道移至gulp-autoprefixer 可以成功构建。嗯。

得到同样的错误（没有快递）

我在下面提供的答案不能为您解决吗？

【参考方案1】：

现在禁用源地图有点神秘。你必须这样做

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

Source

【讨论】：

不是最好的解决方案（我实际上想使用源地图），但比我的更好，而且是我见过的最好的！很棒的发现

同意。一旦我找到解决方案（或错误得到修复）并且我们可以使用源映射而不会出现Unknown word 错误，我会通知您。

【参考方案2】：

不完全确定为什么会修复它，但是将自动前缀管道更改为：

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

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

【讨论】：

确实修复了它。不知道为什么。在 sass 之前使用 autoprefixer 是否“保存”？我觉得不合适

好吧，这确实是个坏主意。标有// 的评论在进入 autoprefixer 之前不会被 sass 条带化，这会导致更多错误……我需要在这里找到真正的问题

把你的答案移到顶部，然后使用 autoprefixer 就可以了！很好的发现！

【参考方案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'));
);

【讨论】：

非常巧妙的解决方法，自动前缀解决了 mapfile 问题！谢谢。

【参考方案4】：

我在使用 gulp-ruby-sass 插件时遇到了同样的问题。我发现 this 博客文章解释了 gulp-ruby-sass 插件中有几个关于源映射的错误。他们都在一个多星期前关闭。如果您升级到 gulp-ruby-sass~1.0.0-alpha，这应该可以解决您在使用源地图时遇到的问题。

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

【参考方案5】：

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

【讨论】：

遗憾的是，它并没有真正起作用，因为 autoprefixer 根本不适用于 gulp-ruby-sass 1.0.x。

如果不是，请提交问题。当然应该。