gulp-如果目标文件太大，sourcemaps 会失败

Question

在我的 gulpfile.js 我有这个：

// Sass configuration
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    cleanCSS = require('gulp-clean-css'),
    sourcemaps = require('gulp-sourcemaps'),
    concat = require('gulp-concat'),
    plumber = require('gulp-plumber');
    autoprefixer = require('autoprefixer');
    postcss      = require('gulp-postcss');

function handleError(err) {
    console.log(err.toString());
    this.emit('end');
}

gulp.task('sass', function() {
gulp.src([
    'kraater-web/src/app/css/admin/vars.scss',
    'kraater-web/src/app/css/admin/*.scss'])
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(concat('admin.scss'))
    .pipe(gulp.dest('kraater-web/src/app/css/'))
    .pipe(sass())
    .pipe(postcss([ autoprefixer() ]))
    .pipe(cleanCSS())
    .pipe(concat('admin.css'))
    .pipe(sourcemaps.write(''))
    .pipe(gulp.dest('kraater-web/src/app/css/'))
});

gulp.task('default', ['sass'], function() {
    gulp.watch('kraater-web/src/app/css/admin/*.scss', ['sass']).on('error', handleError);
})

我使用映射将我所有的 .scss 文件编译成一个大的 admin.css（虽然它甚至没有那么大），但是有一次，当我输入额外的参数来 scss gulp 文件失败并给我这个错误：

C:\wamp\www\site17\node_modules\source-map\lib\source-map-generator.js:289 
throw new Error('Invalid mapping: ' + JSON.stringify({
        ^

Error: Invalid mapping: {"generated":{"line":186,"column":9},"source":"admin.scss","original":{"line":381,"column":-6},"name":null}
    at SourceMapGenerator_validateMapping [as _validateMapping] (C:\wamp\www\site17\node_modules\source-map\lib\source-map-generator.js:289:13)
    at SourceMapGenerator_addMapping [as addMapping] (C:\wamp\www\site17\node_modules\source-map\lib\source-map-generator.js:101:12)
    at C:\wamp\www\site17\node_modules\source-map\lib\source-map-generator.js:72:17
    at Array.forEach (native)
    at SourceMapConsumer_eachMapping [as eachMapping] (C:\wamp\www\site17\node_modules\source-map\lib\source-map-consumer.js:155:14)
    at Function.SourceMapGenerator_fromSourceMap [as fromSourceMap] (C:\wamp\www\site17\node_modules\source-map\lib\source-map-generator.js:48:24)
    at applySourceMap (C:\wamp\www\site17\node_modules\vinyl-sourcemaps-apply\index.js:26:40)
    at filePush (C:\wamp\www\site17\node_modules\gulp-sass\index.js:105:9)
    at Object.callback (C:\wamp\www\site17\node_modules\gulp-sass\index.js:147:9)
    at options.success (C:\wamp\www\site17\node_modules\node-sass\lib\index.js:308:32)

Watching build tasks has finished.

我在 scss 中输入的新参数是有效的，因为如果我删除它之前的一些行，那么 gulp 可以再次编译。好像 scss 映射内存已满或无法编译。

有人以前见过这样的东西吗？

Answer 1

处理大文件：将选项largeFile: true传递给sourcemaps.init()。

Check out on NPM.

// Sass configuration
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    cleanCSS = require('gulp-clean-css'),
    sourcemaps = require('gulp-sourcemaps'),
    concat = require('gulp-concat'),
    plumber = require('gulp-plumber');
    autoprefixer = require('autoprefixer');
    postcss      = require('gulp-postcss');

function handleError(err) {
   console.log(err.toString());
   this.emit('end');
}

gulp.task('sass', function() {
gulp.src([
    'kraater-web/src/app/css/admin/vars.scss',
    'kraater-web/src/app/css/admin/*.scss'])
    .pipe(plumber())
    .pipe(sourcemaps.init({largeFile: true}))
    .pipe(concat('admin.scss'))
    .pipe(gulp.dest('kraater-web/src/app/css/'))
    .pipe(sass())
    .pipe(postcss([ autoprefixer() ]))
    .pipe(cleanCSS())
    .pipe(concat('admin.css'))
    .pipe(sourcemaps.write(''))
    .pipe(gulp.dest('kraater-web/src/app/css/'))
});


gulp.task('default', ['sass'], function() {
gulp.watch('kraater-web/src/app/css/admin/*.scss', ['sass']).on('error', handleError);

Answer 2

通过将 gulp-sass 回滚到旧版本来修复它。我只是运行.

npm install gulp-sass@2.3.2

进入cmd又开始编译了

此修复程序的原始发布者是用户 araphiel，来自此线程： https://github.com/nodejs/help/issues/429

gulp-如果目标文件太大，sourcemaps 会失败

gulp-sourcemaps fails if target file gets too large

gulp

maps

source-maps

gulp-sass

gulp-sourcemaps