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 maps内存已满或无法编译。

之前有人见过这样的事吗？

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会失败

2 个答案: