gulp-es6-rollup-boilerplate

Project tested with node v 6.2.2

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

• 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 css files into single bundle.

• This boilerplate uses Rollup module bundler which makes bundler more efficient than browserify or webpack as it bundles minimal code and ignore unused modules to get bundled see Example Code Explanation at the end.

Normally if you require a module, you import the whole thing. ES2015 lets you just import the bits you need, without mucking around with custom builds. It's a revolution in how we use libraries in JavaScript, and it's happening right now.

• 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-rollup-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 get minified+uglified version of bundle.js please run

$ npm run release

inside your project folder

Start Server

To start local server please run

$ npm run start

and goto http://127.0.0.1:9800 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 basically JS folder contains three files. The main file is main.rollup.js and ´math.js & person.js´ are utility functions used in main files. Both util files have two utility functions each exported as modules. The main.rollup.js only using one module from each utility file and Rollup bundler will only include those two functions in bundler.js which are used by main.rollup.js and will ignore rest.

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.