Gulp + ES6 Web-App Generator

A Yeoman generator for powerful ES6 web apps.

Features

Modular high quality ES6 JavaScript.

Thanks to Browserify and the Babelify transform you can write modular JavaScript in full ES6 syntax.

• You can import other files and npm modules,
• ESLint and the ES6 StyleGuide by AirBnb preserve code quality and readability.

Less files in production.

In production you end up with few files saving HTTP requests, that means:

• Scripts get compiled and bundled to a single JS file.
• Stylesheets get compiled, auto-prefixed and bundled to a single CSS file.
• All SVG images get bundled to a single SVG sprite image + corresponding CSS file.

In development mode, sourcemaps are generated for easy debugging. In production mode, the bundles get additionally minified.

Clean separated directory structure.

Within these directories you are free to structure your files according to your own taste.

• src for your source files.

  • src/svg for SVG images.

  • src/js for JavaScript.

  • src/styl for Stylus and CSS.

• test for unit tests.

The directory dist will be created and contains the built files.

CSS with Stylus.

Stylus is a powerful, feature-rich, expressive CSS preprocessor that provides nice features like variables, mixins, color-functions and much more.

Live preview on changes.

During development, a local test server will be launched using BrowserSync to keep track of file changes and refresh the browser.

Unit tests.

Mocha is a powerful test runner. Start writing unit tests in ES6!

Installation

$ npm install -g generator-gulp-es6-webapp

Generating

$ yo gulp-es6-webapp

Usage

Build the assets in development mode, launches local webserver and watches for changes and rebuilds assets.

$ npm start

Lint scripts and run unit tests.

$ npm test

Build the assets for production and launch a local test web server for preview.

$ npm run build

License

MIT