吞下gulp-ruby-sass：錯誤：../ style.css.map：3：1：未知單詞

Question

使用基本的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: <LOCAL_PATH_HERE>/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並且應該避免這個問題的所有迭代。