Menu
I am using Gulp with Browserify, and Babelify for ES6 and JSX-React transpiling. Despite numerous examples online, I can't figure out how to generate source-maps that point to the original pre-transpiled ES6/JSX files.
Here is my current gulp browserify task, which is based on this example:
gulp.task('browserify', function() {
browserify({ entries: './src/js/main.jsx', extensions: ['.jsx'], debug: true })
.transform(babelify, {presets: ["es2015", "react"]})
.bundle()
.pipe(source('main.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dist/js'));
});
All this does is create a main.js.map file that seems to have the exact same content as the bundled main.js file. In Chrome it looks like this:
But I want to debug the original source .jsx and .js (with ES6 syntax) files. They look like this in my IDE:
How can I do this?
841
The performance is not faster while comparing with other applications. But as this handles more applications within itself, it cannot keep the tasks in-memory. Gulp is used less, and the users do not prefer much the application. Webpack is preferred by the users and is older than Gulp.
Webpack is a bundler whereas Gulp is a task runner, so you'd expect to see these two tools commonly used together. Instead, there's a growing trend, especially among the React community, to use Webpack instead of Gulp.
For older projects and wordpress based projects I still use gulp. For newer ones, webpack. The reason why gulp is dissapering is because newwer js frameworks like react and vue need webpack to be effective. i use webpack with gulp, webpack helps with bundling, hmr, and code splitting.
Gulp purely uses the JavaScript code and helps to run front-end tasks and large-scale web applications. It builds system automated tasks like CSS and HTML minification, concatenating library files, and compiling the SASS files.
Add sourcemaps:true to babelify options
{presets: ["es2015", "react"],sourcemaps:true}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With