I'm working on app with Backbone Marionette and i'm building my files with grunt-browserify 3.8.
Backbone, Marionette, underscore and jQuery are added with npm.
I'm compiling all my files in one single file.
Everything was working fine but the build was extremly slow (like 1.5mins) so i read about using external
config option in grunt-browserify.
Now the build is quite fast but when i access to the page i got:
Uncaught Error: Cannot find module 'underscore'
to the line when i first use my require function
I read everywhere but i cannot figured out the correct configuration for grunt-brwoserify.
Here is my GruntFile:
'use strict';
module.exports = function (grunt) {
require('grunt-config-dir')(grunt, {
configDir: require('path').resolve('tasks')
});
require('jit-grunt')(grunt);
// show elapsed time at the end
require('time-grunt')(grunt);
grunt.registerTask('i18n', [ 'clean', 'dustjs', 'clean:tmp' ] ); // not used for now
grunt.registerTask('build', ['i18n', 'less', 'cssmin', 'browserify', 'concurrent:build'] );
grunt.registerTask('serve', [ 'build', 'concurrent:server'] ); // Build & run the server locally, for development.
};
Here my Browserify task:
'use strict';
module.exports = function browserify(grunt) {
// Load task
grunt.loadNpmTasks('grunt-browserify');
// Options
return {
build: {
files: {
'.build/js/theme-smarty.js': ['public/js/assets/smarty-themeApp/plugin/jquery.min.js', 'public/js/assets/smarty-themeApp/**/*.js'],
'.build/js/app-bundled.js': ['public/js/app.js'],
'.build/js/landing-page.js': ['public/js/landing-page.js']
// '.build/js/app-admin-bundled.js': ['public/js/app-admin.js']
},
options: {
// activate watchify
watch: true,
watchifyOptions: {
spawn: false
},
include: [
'public/js/**/*.js'
],
transform: [['babelify', {'presets': 'es2015', 'compact': false}]],
external: [
'backbone',
'underscore',
'jquery',
'backbone.marionette'
]
}
}
};
};
And here my first views where i require libs:
'use strict';
const
_ = require('underscore'),
$ = require('jquery'),
Backbone = require('backbone'),
Marionette = require('backbone.marionette'),
MainRouter = require('./main-router'),
MainController = require('./main-controller');
Backbone.$ = $;
let View = Marionette.LayoutView.extend({
template: require('./main-page.dust'),
regions: {
mainContainer: '.main-container',
modalContainer: '.modal-container'
},
initialize: function () {
this.model = new Backbone.Model({
page: this.$el.data('page')
});
new MainRouter({
controller: new MainController({
mainContainer: this.mainContainer,
modalContainer: this.modalContainer
})
});
},
onRender: function () {
Backbone.history.start({pushState: true});
}
});
module.exports = View;
Look like libs are not even compiled in my app-bundled.js
files.
What's the best/correct way to compile them?
Is better to have two separate files? libs and app?
Is possible to do with just one file using libs from npm?