Go to the profile of Hugo Queirós
Hugo Queirós
Front-end Web developer

Gulp ECMA6 Boilerplate

What’s the fuss about?

This is a opinionated boilerplate, written in ECMA6, designed for web development. Employs Gulp to automate your everyday tasks live reloading development server, css compiling, image optimization, js, css and html minification and build/distribution website generation.

You can checkout the github repo hugofqueiros/gulp-es6-boilerplate, or clone it git@github.com:hugofqueiros/gulp-es6-boilerplate.git.

Demo @: http://gulp-es6-boilerplate.hugofqueiros.com/

Make sure you have at least Node v4.4.7 installed and npm 2.15.8.

I employ this build system base on my projects, adapting it to the project requirements. For example, if I am using react on my project, I would simply add the babel-preset-react to the project dependencies and .babelrc file.

Features

Gulp automated development, every task is written in ES6

  • Optimization
  • Minification
  • Watch changes
  • Build development and production environments

BrowserSync development

  • Live reloading on change
  • Inject CSS changes — won’t reload page

Styles

  • Less: CSS pre-processor (you can easily modify it to SASS, replacing the gulp less plugin for sass)
  • PostCSS: plugins autoprefixer and minify

Test

  • Basic Karma configuration

Structure

- gulp folder

All gulp tasks are written in a folder called tasks, where each tasks has it’s own file for better readability. These tasks are loaded from the file gulpfile.babel.js that you can find in the project root.

In the utils folder you can find helper functions like the handling of gulp errors and the vendor libs you wish to add to your production environment

Make sure you add all your dependencies that you want your application to have in libs array inside the vendor-libs.js file. This is very important!

- src folder

All source files for your project are in here, including, fonts, HTML markup, images, js scripts and styles (less files).

- test folder

Has of now it only has a initial karma file configuration. Add *.js test files in here to test your JavaScript code.

- project root

You can find all project configuration files.

  • README
  • package.json
  • CHANGELOG
  • LICENSE
  • gulpfile.babel.js
  • .travis.yml
  • .babelrc
  • .editorconfig

NPM Scripts

start

will start your development environment with a BrowserSync (www.browsersync.io) server.

test

Right now it launches the linting gulp task (eslint) and the gulp test task.

david

Checks for dependencies libraries updates. The script david:update updates the libraries automatically.

changelog

Generates the CHANGELOG.md file so you generate a changelog file everytime you release a new version of your project. I follow the angular convention changelog commits (check REAME file for more info), but you should use whatever you feel comfortable with.

release

There are 3 scripts that help you release a new version of your project to github:

  • release:patch — v0.0.1 -> v0.0.2
  • release:minor — v0.0.1 -> v0.1.0
  • release:major — v0.0.1 -> v1.0.0

TODO

1- I tend to always evolve and improve the projects I work in, and so with that purpose I am currently working on adding Docker (https://www.docker.com/) in an effort to use containers. I don’t think it is a necessary feature for most projects, but I have really good experiences using this technology, especially on company production ready applications.

2- I am also working on supporting node v6. Currently it’s not working properly.

3- Integrate karma testing.

4- Working on a way to serve locally, employing npm scripts, of different versions of the application, such as, develop, staging and production.

About me

To know more about me, take a look at my personal website: hugofqueiros.com.