babel5 --> babel6: modules property - ecmascript-6

i'm trying to figure out how to tell babel6 to generate a particular module syntax (amd, commonjs, etc)
this is how i used to specify the module: https://github.com/aurelia/metadata/blob/master/build/tasks/build.js#L48
gulp.task('build-commonjs', function () {
return gulp.src(paths.output + jsName)
.pipe(to5(assign({}, compilerOptions, {modules:'common'})))
.pipe(gulp.dest(paths.output + 'commonjs'));
});
gulp.task('build-amd', function () {
return gulp.src(paths.output + jsName)
.pipe(to5(assign({}, compilerOptions, {modules:'amd'})))
.pipe(gulp.dest(paths.output + 'amd'));
});
babel6 gives me the error: Unknow option: base.modules
appreciate any guidance !! :)
error:
events.js:141
throw er; // Unhandled 'error' event
^
ReferenceError: [BABEL] C:\a\au\metadata\dist\aurelia-metadata.js: Unknown option: base.modules
at Logger.error (C:\a\au\metadata\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
at OptionManager.mergeOptions (C:\a\au\metadata\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\file\options\option-manager.js:262:18)
at OptionManager.init (C:\a\au\metadata\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\file\options\option-manager.js:416:10)
at File.initOptions (C:\a\au\metadata\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\file\index.js:191:75)
at new File (C:\a\au\metadata\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\file\index.js:122:22)
at Pipeline.transform (C:\a\au\metadata\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\pipeline.js:42:16)
at DestroyableTransform._transform (C:\a\au\metadata\node_modules\gulp-babel\index.js:32:20)
at DestroyableTransform.Transform._read (C:\a\au\metadata\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:172:10)
at DestroyableTransform.Transform._write (C:\a\au\metadata\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:160:12)
at doWrite (C:\a\au\metadata\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:335:12)
at writeOrBuffer (C:\a\au\metadata\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:321:5)
at DestroyableTransform.Writable.write (C:\a\au\metadata\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:248:11)
at write (C:\a\au\metadata\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:623:24)
at flow (C:\a\au\metadata\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:632:7)
at DestroyableTransform.pipeOnReadable (C:\a\au\metadata\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:664:5)
at emitNone (events.js:67:13)

from #thedark1337 in babeljs slack:
For babel 6 you need to use plugins
https://babeljs.io/docs/plugins/transform-es2015-modules-amd
https://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/
https://babeljs.io/docs/plugins/transform-es2015-modules-systemjs/
also if you haven't, you'll need babel-preset-es2015 as well to transpile from ES2015 to ES5

Related

Invalid mapping while running gulp

im trying to run gulp in node console and I get an error like below. I was looking over the net for a solution, but nothing has work so far. Hope you can help me.
C:\xampp\htdocs\wicie\wp-content\themes\domki-wicie\node_modules\source-map\lib\source-map-generator.js:298
throw new Error('Invalid mapping: ' + JSON.stringify({
^
Error: Invalid mapping: {"generated":{"line":157,"column":3},"source":"../bower_components/bootstrap/scss/mixins/_hover.scss","original":{"line":12,"column":-19},"name":null}
at SourceMapGenerator_validateMapping [as _validateMapping] (C:\xampp\htdocs\wicie\wp-content\themes\domki-wicie\node_modules\source-map\lib\source-map-generator.js:298:13)
at SourceMapGenerator_addMapping [as addMapping] (C:\xampp\htdocs\wicie\wp-content\themes\domki-wicie\node_modules\source-map\lib\source-map-generator.js:110:12)
at C:\xampp\htdocs\wicie\wp-content\themes\domki-wicie\node_modules\concat-with-sourcemaps\index.js:60:28
at Array.forEach ()
at BasicSourceMapConsumer.SourceMapConsumer_eachMapping [as eachMapping] (C:\xampp\htdocs\wicie\wp-content\themes\domki-wicie\node_modules\source-map\lib\source-map-consumer.js:157:14)
at Concat.add (C:\xampp\htdocs\wicie\wp-content\themes\domki-wicie\node_modules\concat-with-sourcemaps\index.js:58:18)
at DestroyableTransform.bufferContents [as _transform] (C:\xampp\htdocs\wicie\wp-content\themes\domki-wicie\node_modules\gulp-concat\index.js:68:12)
at DestroyableTransform.Transform._read (C:\xampp\htdocs\wicie\wp-content\themes\domki-wicie\node_modules\readable-stream\lib\_stream_transform.js:182:10)
at DestroyableTransform.Transform._write (C:\xampp\htdocs\wicie\wp-content\themes\domki-wicie\node_modules\readable-stream\lib\_stream_transform.js:170:83)
at doWrite (C:\xampp\htdocs\wicie\wp-content\themes\domki-wicie\node_modules\readable-stream\lib\_stream_writable.js:406:64)
Node version - 8.9.4
npm version - 5.6.0
source-map version - 0.6.1

Error write after end on gulp.watch with gulp-connect

I have a simple watch on gulp that reloads all js files (using gulp-connect) when one of them has changes, but I'm getting the following error whenever the task asociated runs:
[15:14:35] Starting 'livereload:js'...
events.js:160
throw er; // Unhandled 'error' event
^
Error: write after end
at ServerResponse.OutgoingMessage.write (_http_outgoing.js:439:15)
at ServerResponse.res.inject.res.write (C:\dev\test-livereload\node_modules\connect-livereload\index.js:115:37)
at ReadStream.ondata (_stream_readable.js:555:20)
at emitOne (events.js:96:13)
at ReadStream.emit (events.js:188:7)
at readableAddChunk (_stream_readable.js:176:18)
at ReadStream.Readable.push (_stream_readable.js:134:10)
at onread (fs.js:1984:12)
at FSReqWrap.wrapper [as oncomplete] (fs.js:681:17)
Here's the code:
gulp.task('livereload:js', function() {
return gulp.src([paths.APP_ROOT + '/**/*.js'])
//.pipe(wait(2000)) // if I add a small wait it doesn't crash as often
.pipe(connect.reload());
});
gulp.task('run-watch', function() {
gulp.watch([paths.APP_ROOT + '/**/*.js'], ['livereload:js']);
});
I have a similar task that checks for changes in scss files and compiles them before reloading that works fine.
I found a workaround. Instead of gulp.watch I use the gulp-watch package to run connect.reload(), which can be used in a pipe.
I think there was a race condition that was triggering the reload before the files were ready.

Gulp TypeError: Path must be a string. Received undefined

I want to run build command but got the error message:
TypeError: Path must be a string. Received undefined.
Do you guys have any ideas? Thanks.
gulp.task('build', function () {
browserify("./src/components/source.js")
.transform("babelify", {presets: ["es2015", "react"]})
.bundle()
.pipe(gulp.dest(path.resolve(__dirname, './src/app.js')));
});
Below is the tracestack details:
TypeError: Path must be a string. Received undefined
at assertPath (path.js:8:11)
at Object.posix.resolve (path.js:426:5)
at DestroyableTransform.saveFile [as _transform] (/Users/yzzhou/Documents/ReleasePlanner/node_modules/gulp/node_modules/vinyl-fs/lib/dest/index.js:36:26)
at DestroyableTransform.Transform._read (/Users/yzzhou/Documents/ReleasePlanner/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)
at DestroyableTransform.Transform._write (/Users/yzzhou/Documents/ReleasePlanner/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:12)
at doWrite (/Users/yzzhou/Documents/ReleasePlanner/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:237:10)
at writeOrBuffer (/Users/yzzhou/Documents/ReleasePlanner/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:227:5)
at DestroyableTransform.Writable.write (/Users/yzzhou/Documents/ReleasePlanner/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:194:11)

gulp html minification error

in the gulp trying to perform html minification in the build
Code:
gulp.task('html',function(){
return gulp.src('app/**/*.html')
.pipe($.useref.assets({searchPath: '{.tmp,app}'}))
// Concatenate And Minify JavaScript
.pipe($.if('*.js', $.uglify({
preserveComments: 'some'
})))
// Concatenate And Minify Styles
.pipe($.if('*.css', $.csso()))
.pipe($.useref.restore())
.pipe($.useref())
// Update Production Style Guide Paths
.pipe($.replace('styles/main.css'))
// Minify Any HTML Output Files
.pipe(gulp.dest'dist'))
.pipe($.size({title: 'html'}));
});
Error:
TypeError: Uncaught, unspecified "error" event.
at TypeError (<anonymous>)
at Transform.emit (events.js:74:15)
at Transform.onerror (node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:558:12)
at Transform.emit (events.js:95:17)
at Transform.<anonymous> (index.js:80:42)
at Array.forEach (native)
at Transform.<anonymous> (index.js:68:35)
at Array.for Each (native)
at Transform.<anonymous> (index.js:46:36)
at Array.forEach (native)
has anyone came across this issue , please suggest how to fix this
Thanks
Sundar
upgrade gulp-useref:
npm remove gulp-useref && npm i gulp-useref --save-dev

How to get output from gulp-ruby-sass task seen by gulp-useref?

I have some CSS that is created by gulp-ruby-sass. The resultant CSS file is referenced in the html used by gulp-useref to get my assets for concatenation, minification, etc. The problem is (I think) that gulp-ruby-sass hasn't written the CSS file to disk yet and gulp-useref can't find the file to include it in the build. So this code:
gulp.task("compile-css", function () {
gulp.src(paths.css.appFiles)
.pipe(gutil.env.debug ? sass({ debugInfo : true }) : sass())
.pipe(gutil.env.debug ? gutil.noop() : cssmin())
.pipe(gulp.dest(paths.css.appDistDir));
});
gulp.task("concatenateAllTheThings", ["compile-css"], function () {
var assets = useref.assets(); // useref package does the magic
return gulp.src(["./index.html", "./login.html", "./reset.html", "./confirm.html"])
.pipe(assets)
.pipe(gulpif('*.js',ngAnnotate()))
.pipe(gulpif('*.js', uglify()))
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest(paths.output.destination));
});
throws this error:
[19:06:32] Starting 'compile-css'...
[19:06:32] Finished 'compile-css' after 13 ms
[19:06:32] Starting 'concatenateAllTheThings'...
[19:06:32] Starting Karma server...
events.js:72
throw er; // Unhandled 'error' event
^
Error: ENOENT, no such file or directory 'c....\webui\css\custom.css'
at Object.fs.openSync (fs.js:427:18)
at Object.fs.readFileSync (fs.js:284:15)
at DestroyableTransform.<anonymous> (C....\AppData\Roaming\npm\node_modules\gulp-useref\index.js:81:61)
at Array.forEach (native)
at DestroyableTransform.<anonymous> (C....g\AppData\Roaming\npm\node_modules\gulp-useref\index.js:70:35)
at Array.forEach (native)
at DestroyableTransform.<anonymous> (C....\AppData\Roaming\npm\node_modules\gulp-useref\index.js:46:36)
at Array.forEach (native)
at DestroyableTransform._transform (C....\AppData\Roaming\npm\node_modules\gulp-useref\index.js:43:15)
at DestroyableTransform.Transform._read (C....\AppData\Roaming\npm\node_modules\gulp-useref\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:184:10)
How can I get gulp-useref to see the CSS file from gulp-ruby-sass?
To let know gulp when a task is finished, you need to return the stream. This way, a task with a dependency on a task that you return will wait for it to finish.
So change compile-css to
gulp.task("compile-css", function () {
return gulp.src ...
});