gulp - 如果目标文件太大,gulp-sourcemaps 会失败
问题描述
在我的 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 映射内存已满或无法编译一样。
有人以前见过这样的东西吗?
解决方案
处理大文件:将选项传递largeFile: true
给sourcemaps.init()
.
// 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);
推荐阅读
- html - 在类中使用的某些背景颜色(如 #4f8a2ad4 或 #8a2a5fd4)在 div 和 img 元素中使用时具有不同的阴影
- git - git log --name-status 在重命名时显示单个文件的新名称
- javascript - 如何将道具发送到组件以响应条件?
- javascript - 如何在节点 REPL 中重新定义 const?
- git - 据说我的本地 git 在远程主机后面 - 这是一个错误还是?
- r - 默认情况下如何为 `renv` 导入已安装的包
- java - 如何打印使用 Composite 创建的整个数据结构?
- python - 带有结构类型的 Pathlib 的 Python TypeHint (PEP 544)
- c++ - C++ Win32 API GDI:矩形抗锯齿在透明背景下无法正常工作
- c - 计算两个浮点数时出错