gulp-include icon indicating copy to clipboard operation
gulp-include copied to clipboard

sourcemap messed up

Open rkhat opened this issue 9 years ago • 14 comments

So basically the only way for a correct mapping is to have one include with no other code in js file. Adding anything gives an incorrect map for everything beyond the first include or first lines of code whichever comes first.

Here is an example of the issue. To build npm install and gulp (or gulp watch). And then open index.html in chrome. Check the lines referenced by the console in devtools.

As you can see in the photo, the mapping is wrong.

gulp-include-issue-photo

rkhat avatar May 03 '16 11:05 rkhat

+1

nicekiwi avatar May 22 '16 22:05 nicekiwi

+1

jbh avatar Jul 28 '16 14:07 jbh

+1

outaTiME avatar Sep 02 '16 14:09 outaTiME

+1

chrisdivina avatar Jan 05 '17 16:01 chrisdivina

+1

SnitchRUS66 avatar Jan 13 '17 06:01 SnitchRUS66

+100

gsouf avatar Feb 21 '17 10:02 gsouf

any update with this feature? thanks !!!

outaTiME avatar Mar 02 '17 16:03 outaTiME

+1

JoshuaSoileau avatar Dec 11 '17 19:12 JoshuaSoileau

+1

skeddles avatar Feb 20 '18 16:02 skeddles

Ran into this myself, and noticed that the line #s reported by the mapping was pretty much exactly 2x what it should be in the resulting post-include file.

Verdict: this is caused by the source file line endings being CRLF. As a result, every line # reference is counted twice.

Not sure how to fix this within gulp-include (@wiledal), but workarounds:

  • change all of your files to use LF instead of CRLF, and it'll work as expected
  • Use something to preprocess your sources, like gulp-line-ending-corrector (https://www.npmjs.com/package/gulp-line-ending-corrector)

Example of the second below.

var gulp = require('gulp'),
	include = require('gulp-include'),
	sourcemaps = require('gulp-sourcemaps'),
	lec = require("gulp-line-ending-corrector");

gulp.task('preprocess', function () {
	return gulp.src('src/*.js')
		.pipe(lec())
		.pipe(gulp.dest('.temp'));
});

gulp.task('js', ['preprocess'], function() {
	return gulp.src('.temp/app.js')
		.pipe(sourcemaps.init())
		.pipe(include())
		.pipe(sourcemaps.write())
		.pipe(gulp.dest('js'));
});

zlovatt avatar Jun 09 '18 19:06 zlovatt

+1

rejhgadellaa avatar Jan 24 '19 11:01 rejhgadellaa

Now I get an error on one of my tasks when I use sourcemapping:

TypeError: resultMap.eachMapping is not a function
    at processInclude (/home/lospec/htdocs/node_modules/gulp-include/index.js:206:39)
    at include (/home/lospec/htdocs/node_modules/gulp-include/index.js:58:26)
    at wrappedMapper (/home/lospec/htdocs/node_modules/map-stream/index.js:83:19)
    at Stream.stream.write (/home/lospec/htdocs/node_modules/map-stream/index.js:95:21)
    at DestroyableTransform.ondata (/home/lospec/htdocs/node_modules/readable-stream/lib/_stream_readable.js:619:20)
    at DestroyableTransform.emit (events.js:188:13)
    at DestroyableTransform.EventEmitter.emit (domain.js:459:23)
    at addChunk (/home/lospec/htdocs/node_modules/readable-stream/lib/_stream_readable.js:291:12)
    at readableAddChunk (/home/lospec/htdocs/node_modules/readable-stream/lib/_stream_readable.js:278:11)
    at DestroyableTransform.Readable.push (/home/lospec/htdocs/node_modules/readable-stream/lib/_stream_readable.js:245:10)
[18:56:53] The following tasks did not complete: js
[18:56:53] Did you forget to signal async completion?

The error goes away and it compiles file if I comment out the sourcemapping parts:


gulp.task("js", function() {
	return gulp.src('scripts/*.js')
		//srcmap
		//.pipe(sourcemaps.init())
		//include other files
		.pipe(include({
			includePaths: [
				'modules/js',
				'modules/frontend',
				'scripts',
			]
		}))
			.on('error', console.log)
		//compress
		.pipe(liveOnly(uglify({compress: {drop_console: true }})))
			.on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
		//srcmap
		//.pipe(sourcemaps.write('./maps'))
		//out
		.pipe(gulp.dest("public/javascripts"));
});

Perhaps it's because var resultMap = new SourceMapConsumer(result.map); seems to return a promise? I don't understand promises well enough to fix it unfortunately.

skeddles avatar Mar 27 '20 19:03 skeddles

@skeddles Did you ever figure out this issue? Been running into this two years later, over and over again. And like you, if I comment out sourcemaps, it goes away:

TypeError: resultMap.eachMapping is not a function
    at processInclude (/Users/stephen/Sites/templates/twig-site/node_modules/gulp-include/index.js:206:39)
    at include (/Users/stephen/Sites/templates/twig-site/node_modules/gulp-include/index.js:58:26)
    at wrappedMapper (/Users/stephen/Sites/templates/twig-site/node_modules/map-stream/index.js:83:19)
    at Stream.stream.write (/Users/stephen/Sites/templates/twig-site/node_modules/map-stream/index.js:95:21)
    at DestroyableTransform.ondata (/Users/stephen/Sites/templates/twig-site/node_modules/readable-stream/lib/_stream_readable.js:619:20)
    at DestroyableTransform.emit (node:events:527:28)
    at DestroyableTransform.emit (node:domain:537:15)
    at addChunk (/Users/stephen/Sites/templates/twig-site/node_modules/readable-stream/lib/_stream_readable.js:291:12)
    at readableAddChunk (/Users/stephen/Sites/templates/twig-site/node_modules/readable-stream/lib/_stream_readable.js:278:11)
    at DestroyableTransform.Readable.push (/Users/stephen/Sites/templates/twig-site/node_modules/readable-stream/lib/_stream_readable.js:245:10)
[09:29:30] Finished 'scss' after 819 ms
[09:29:40] The following tasks did not complete: watch, <series>, <parallel>, js
[09:29:40] Did you forget to signal async completion?
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

And yeah, I've wondered the same thing about promises, since it mentions issues with async completion.

Here's my current init code:

function js() {
	return gulp.src(globs.build.js)
		.pipe(sourcemaps.init())
		.pipe(include(config.js)).on('error', console.log)
		.pipe(rename({suffix: '.min'}))
		.pipe(sourcemaps.write('.'))
		.pipe(gulp.dest(dist.js))
		.pipe(tap(file => alert.success(file)))
		.pipe(browsersync.stream());
};

callaginn avatar Aug 05 '22 14:08 callaginn

unfortunately I resorted to just not using sourcemaps for js

skeddles avatar Aug 05 '22 19:08 skeddles