I have a situation where I have two .js files located in the same folder.
File app.js :
import {foo} from 'custom';
foo();
File custom.js :
function foo(){
$('.nav.navbar-nav > li').on('click', function(e) {
$('.nav.navbar-nav > li').removeClass('active');
$(this).addClass('active');
});
}
Now, my goal is to bundle these files together using gulpfile.js with Babel included in the process.
gulp.task('app-scripts', function() {
return gulp.src('src/js/app.js')
.pipe(babel({
presets: ["es2015"]
}))
.pipe(uglify())
.pipe(gulp.dest('build/js'));
});
I've been trying to implement Browserify into this task as well. I've read the documentation but I'm unsure how to apply it correctly in this specific scenario.
I also attempted the following code but it didn't work:
const gulp = require('gulp');
const babelify = require('babelify');
const browserify = require('browserify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const sourcemaps = require('gulp-sourcemaps');
var config = {
src: './src/js/app.js',
out: './build/js/app.js',
srcmaps: '/build/maps'
}
gulp.task('app-scripts', function() {
const bundler = browserify(config.src, {debug: true})
.transform('babelify', {presets: ['es2015']})
return bundler.bundle()
.pipe(source(config.out))
.pipe(buffer())
.pipe(sourcemaps.init())
.pipe(sourcemaps.write(config.srcmaps, {addComment: false}))
.pipe(gulp.dest('./build/js'));
});