Browserify¶
Syntax¶
browserify(paths)
Description¶
Browserifies the specified paths.js
file and outputs to paths.build
.
If --production
is specified it also uglifies the output script.
Use a single js entry point with all requires.
If gulp watch
then the task also watches changes in the bundled requires.
Quick reference¶
Quick reference to browserifying common front-end packages.
Alternatively use the JS concatenate task.
Notation used below:
- npm package: Install the npm package
- index.js: Require the package in the entry js using the provided code
- gulpfile path: Additional paths to include in gulpfile build
jQuery¶
- npm package: jquery
- index.js:
$ = jQuery = require('jquery');
- Using browserify with jquery
- jQuery plugins (eg. scrollTo)
Bootstrap¶
- npm package: bootstrap
- index.js:
require('bootstrap');
- gulpfile assets path:
'node_modules/bootstrap/dist/*fonts/*'
- gulpfile css path:
'node_modules/bootstrap/dist/css/bootstrap*(|-theme).css'
- html5shiv: either ignore or leave as is
- Browserify with Bootstrap
Angular¶
- npm package: angular
- index.js:
require('angular');
- Angular with browserify
- Any angular plugins such as angular-sanitize: the same as Angular.
Lightbox2¶
- npm package: lightbox2
- index.js:
require('lightbox2');
- gulpfile css path:
'node_modules/lightbox2/dist/css/lightbox.css'
animate.css¶
- npm package: animate.css
- gulpfile css path:
'node_modules/animate.css/animate.css'
- No js file
wow.js¶
dependencies: animate.css
npm package: wow.js
-
package.json
:"browserify": {"transform": [ "browserify-shim" ]}, "browser": { "wow": "./node_modules/wow.js/dist/wow.js" }, "browserify-shim": { "wow": {"exports": "WOW"} }
index.js
:var WOW = require('wow'); new WOW().init();
Owl carousel¶
npm: owl.carousel
gulpfile css path:
'node_modules/owl.carousel/dist/assets/owl.carousel.css'
provide any additional owl plugins css rules
-
package.json
:"browserify": {"transform": ["browserify-shim"]}, "browser": { "owl.carousel": "./node_modules/owl.carousel/dist/owl.carousel.js" }, "browserify-shim": { "owl.carousel": "$" }
index.js
:$.fn.owlCarousel = require('owl.carousel');
Font awesome¶
- npm: font-awesome
- gulpfile assets path:
'node_modules/font-awesome/*fonts/*'
- gulpfile css path:
'node_modules/font-awesome/css/font-awesome.css'
- No js file
Normalize.css¶
- npm: normalize.css
- gulpfile css path:
'node_modules/normalize.css/normalize.css'
- No js file
Swiper¶
- npm: swiper
- js:
require('swiper');
- gulpfile css path:
'node_modules/swiper/dist/css/swiper.css'
Puse icons¶
- npm: puse-icons-feather
- gulpfile asset path:
'node_modules/puse-icons-feather/*fonts/*'
- No js file
Browserify-shim¶
Packages that are not CommonJS compatible require a relative entry in package.json
, as described above.
The following entry is also required:
"browserify": {
"transform": ["browserify-shim"]
},
The browserify-shim package is already included in gulpfile-ninecms dependencies.
Example¶
var paths = {
js: 'private/javascripts/index.js',
build: 'build/'
};
var gulp = require('gulp');
var taskMethods = require('gulpfile-ninecms');
var tasks = {
browserify: function () { return taskMethods.browserify(paths); }
};
gulp.task('browserify', [], tasks.browserify);