Es6 Jspm Gulp Boilerplate

screenshot of Es6 Jspm Gulp Boilerplate

Es6 Jspm Gulp Boilerplate

Boilerplate for ES6+ apps using JSPM & Gulp

Overview

The ES6 + JSPM + Gulp Boilerplate is a development boilerplate for building ES6+ apps using JSPM and Gulp. It provides a set of features and tools to make the development process easier and more efficient.

Features

  • Uses JSPM instead of Bower for package management
  • Transpiles ES6+ code using Babel via JSPM
  • Uses SystemJS to load modules via JSPM
  • Compiles SASS using LibSass and Autoprefixer
  • Provides a local development server with LiveReload using Gulp Connect
  • Supports testing using Karma with Mocha + Chai
  • Includes linting for JavaScript and SCSS using ESLint and SCSS-Lint
  • Automatically generates documentation using ESDoc and SassDoc.

Installation

To install the boilerplate, you can either clone the repository from GitHub or install it via npm.

If you choose to clone the repository, run the following command:

git clone https://github.com/alexweber/es6-jspm-gulp-boilerplate.git

If you prefer to install via npm, run the following command:

npm install es6-jspm-gulp-boilerplate

Both methods will install the required dependencies. Make sure you are in the root directory of the project.

To start the local development server, run either gulp or npm start command. If Gulp is not installed globally, you may need to run npm install -g gulp first.

To run tests, use the karma start or npm test command. To run tests continuously, use the npm run test:watch command.

To generate documentation for your JavaScript and SASS code, use the npm run docs command. The documentation will be generated in the docs folder.

To build the app for distribution, use the gulp build or npm run build command. The built app will be stored in the dist folder.

If you encounter any issues after updating the boilerplate, it is recommended to remove the node_modules folder, re-run npm install, and then try again.

Summary

The ES6 + JSPM + Gulp Boilerplate is a comprehensive development boilerplate for building modern JavaScript applications using ES6+, JSPM, and Gulp. It provides a set of features and tools to streamline the development process, including package management, transpilation, module loading, SASS compilation, local development server, testing, linting, and documentation generation. It is a valuable resource for developers looking to adopt a modern and efficient workflow for their JavaScript projects.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

gulp
Gulp

Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.