Examples

Some third party libraries integration examples

jQuery

Works either for jQuery 1 or jQuery 2

package.json:

"dependencies": {
    "jquery": "1.11.1"
}

main.js:

// JQuery
var $ = require('jquery');

Bootstrap 3 - Sass

package.json:

"dependencies": {
    "bootstrap-sass": "3.3.1"
},
"browser": {
    "bootstrap.alert"      : "./node_modules/bootstrap-sass/assets/javascripts/bootstrap/alert.js",
    "bootstrap.collapse"   : "./node_modules/bootstrap-sass/assets/javascripts/bootstrap/collapse.js"
    ...
},
"browserify-shim": {
    "bootstrap.alert"      : {"depends": "jquery:jQuery"},
    "bootstrap.collapse"   : {"depends": "jquery:jQuery"}
    ...
}

gulpfile.js:

assets.config({
    assets: {
        fonts: {
            groups: {
                'bootstrap': {src: 'bootstrap-sass/assets/fonts/bootstrap/*'}
            }
        }
    }
});

main.js:

// JQuery
var $ = require('jquery');

// Bootstrap
require('bootstrap.alert');
require('bootstrap.collapse');
// ...

main.scss:

// Typography
$icon-font-path: '../fonts/';

// Core variables and mixins
@import 'bootstrap-sass/assets/stylesheets/bootstrap/variables';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/mixins';

// Reset and dependencies
@import 'bootstrap-sass/assets/stylesheets/bootstrap/normalize';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/print';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/glyphicons';

// Core CSS
@import 'bootstrap-sass/assets/stylesheets/bootstrap/scaffolding';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/type';
// ...

// Bootstrap - Components
@import 'bootstrap-sass/assets/stylesheets/bootstrap/component-animations';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/dropdowns';
// ...

Bootstrap 3 - Less

package.json:

"dependencies": {
    "bootstrap": "3.3.1"
},
"browser": {
    "bootstrap.alert"      : "./node_modules/bootstrap/js/alert.js",
    "bootstrap.collapse"   : "./node_modules/bootstrap/js/collapse.js"
    ...
},
"browserify-shim": {
    "bootstrap.alert"      : {"depends": "jquery:jQuery"},
    "bootstrap.collapse"   : {"depends": "jquery:jQuery"}
    ...
}

gulpfile.js:

assets.config({
    assets: {
        fonts: {
            groups: {
                'bootstrap': {src: 'bootstrap/fonts/*'}
            }
        }
    }
});

main.js:

// JQuery
var $ = require('jquery');

// Bootstrap
require('bootstrap.alert');
require('bootstrap.collapse');
// ...

main.less:

// Core variables and mixins
@import 'bootstrap/less/variables.less';
@import 'bootstrap/less/mixins.less';

// Reset and dependencies
@import 'bootstrap/less/normalize.less';
@import 'bootstrap/less/print.less';
@import 'bootstrap/less/glyphicons.less';

// Core CSS
@import 'bootstrap/less/scaffolding.less';
@import 'bootstrap/less/type.less';
// ...

// Bootstrap - Components
@import 'bootstrap/less/component-animations.less';
@import 'bootstrap/less/dropdowns.less';
// ...

Mustache

package.json:

"dependencies": {
    "mustache": "0.8.2"
}

main.js:

// Mustache
var mustache = require('mustache');

Lunr

package.json:

"dependencies": {
    "lunr": "0.5.6"
}

main.js:

// Lunr
var lunr = require('lunr');

Moment.js

package.json:

"dependencies": {
    "moment": "2.8.3"
}

main.js:

// Moment
var moment = require('moment');
require('moment/locale/fr');

Eonasdan Bootstrap Datetimepicker

package.json:

"dependencies": {
    "moment": "2.8.3",
    "eonasdan-bootstrap-datetimepicker": "3.1.3"
}

main.js:

// DateTime Picker
require('eonasdan-bootstrap-datetimepicker');
require('moment/locale/fr');