Nighttime Peanut Migrations

    gulp-es6-browserify-boilerplate

    1.0.1 • Public • Published

    gulp-es6-browserify-boilerplate

    Project tested with node v 6.2.2

    A very basic boilerplate to start your Javascript project with ES6 script and using Browserify module bundler and Less css preprocessor.

    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 Browserify and do the same for css style sheets.

    • Bundling done with simple commands using Gulp which is famous build system to automate build process.

    Install

    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

    Build

    Run this command to build and bundle the project.

    $ npm run build

    or simple run

    $ gulp

    To enable source mapping please run

    $ npm run build:dev

    inside your project folder

    Start Server

    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.

    DevTools

    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. Browserify will do the magic for bundling. Everything which Require in main.js or in util files will be appended into bundle.js after building the project. array-union.js using underscore.js to union some sets while get-mime-type.js using npm package called simple-mime to get mimetype of a file. As utilities files have ES6 code it will be compiled by babel js after that Browserify will append all dependencied into single bundle.js file... Yes even whole underscore.js can be found in bundle.js and of course whole simple-mime package and its dependencies as well.

    The LESS folder

    • Less folder contains .less files which will be compiled with gulp-less and concatenated into single file style.css, can be found in dist folder after building project.

    Install

    npm i gulp-es6-browserify-boilerplate

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    none

    Last publish

    Collaborators

    • mizmaar3