on libs/index.jsx
all library were called using require
ex. require('jquery')...
and it generates a bundle with jquery in it
on app/index.jsx
I called the same thing on app.js but the whole jquery codes are still adding
to the bundle on the app.js
Can anyone help me how can I depend my app.js to the libs.js on the output files? Here's my code:
'use strict';
var gulp = require('gulp');
var notify = require('gulp-notify');
var rename = require('gulp-rename');
var browserify = require('browserify');
var babelify = require('babelify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var es = require('event-stream');
gulp.task('default', function() {
// we define our input files, which we want to have bundled:
var files = [
'build/js/app/index.jsx',
'build/js/libs/index.jsx'
];
var outputFiles = [
'app.js',
'libs.js'
];
// map them to our stream function
var tasks = files.map(function(entry, index) {
// browserify instance
var bundler = browserify({
entries: [entry]
});
// Watchify to watch source file changes
bundler.plugin(watchify, {
// ignore this folders
ignoreWatch: [
'**/node_modules/**',
'**/bower_components/**'
]
});
// Babel tranforms, transform .jsx files to native js
bundler.transform(babelify, {
presets: ['es2015', 'react']
});
// bundle the files
bundler.bundle()
.pipe(source(outputFiles[index]))
// rename them to have "bundle as postfix"
.pipe(rename({
extname: '.bundle.js'
}))
.pipe(gulp.dest('dist/js'))
.pipe(notify({
message: 'Generated file: ',
}));
return bundler;
});
});
the output files created in dist/js folder were libs.bundle.js and app.bundle.js. I want two separate files with one dependent to the other, which is the app.bundle.js. Can anyone help me, please?
