Project tested with node v 6.2.2
Browserify lets you require('modules') in the browser by bundling up all of your dependencies.
The aim of this package is to start basic web project which usually have JS and css (less css) files, build them for release by compiling ES2015 code and concatenate multiple js and npm bundles into single file using
Browserifyand do the same for css style sheets.
Bundling done with simple commands using Gulp which is famous build system to automate build process.
First, clone the repo via git:
git clone https://github.com/mizmaar3/gulp-es6-browserify-boilerplate your-project-name
And then install dependencies.
$ cd your-project-name && npm install
Run this command to build and bundle the project.
$ npm run build
or simple run
To enable source mapping please run
$ npm run build:dev
inside your project folder
To start local server please run
$ npm run start
and goto http://127.0.0.1:9300 to test if code worked. You should get some text on the page.
Toggle Chrome DevTools
- OS X: Cmd Alt I or F12
- Linux: Ctrl Shift I or F12
- Windows: Ctrl Shift I or F12
Example Code Explanation
The JS folder
- So JS folder have three utility files and one main.js file which using utilities and showing some results in browser console.
Browserifywill do the magic for bundling. Everything which
Requirein main.js or in util files will be appended into bundle.js after building the project.
underscore.jsto union some sets while
get-mime-type.jsusing npm package called
simple-mimeto get mimetype of a file. As utilities files have ES6 code it will be compiled by
babel jsafter that
Browserifywill append all dependencied into single
bundle.jsfile... Yes even whole
underscore.jscan be found in
bundle.jsand of course whole
simple-mimepackage and its dependencies as well.
The LESS folder
- Less folder contains
.lessfiles which will be compiled with
gulp-lessand concatenated into single file
style.css, can be found in
distfolder after building project.