Vulcan Project Kit

A frontend boilerplate with the following batteries:

• NPM - Node package manager
• Gulp - Task runner
• Babel - JavaScript ES2015 compiler
• Browserify - Modular JavaScript bundler
• SASS - CSS with superpowers
• Material Design Icons 1.6.50 - Extended version of Google Material Design icons
• jQuery - JavaScript general purpose library
• Foundation 6.2.3 - Responsive front-end framework
• Underscore - JavaScript functional library
• Backbone - Structure for JS applications
• Livereload & Chrome Plugin & Firefox Plugin - Refresh HTML, CSS, JS, images and other stuff as soon as they change
• Editorconfig - Define and maintain consistent coding styles between different editors and IDEs
• JSHint - Detect errors and potential problems in JavaScript code

The Foundation components and configuration and Material Design Icons are pre-installed with their respective versions commented.

An example of Foundation installation is the Foundation Sites Template.

Installation

First, it is necessary to install node.js (install node.js) and the node module gulp (install gulp).

You can either download the ZIP file and uncompress the folder files where you want to install your project or fork the git project. Once done, get in the terminal on the project folder and install the node dependencies:

npm install

The built assets are being ignored by git. They should be build in a continuous integration tool or simply by the server everytime there are new changes in the code base in the repository. This is an optional feature.

Anatomy

• views/ - A tentative folder to put the backend views
• src/ - Main frontend source code. The dummy code is an example of code structure
  • js/ - ES2015 code
  • scss/ - SASS code
• assets/ - Public assets folder
  • img/ - Images
  • fonts/ - Web fonts
  • js/ - JavaScript assets
  • css/ - CSS assets
• tasks/ - Gulp tasks
  • config.js - Global tasks configurations
  • sass.js - SASS task definition
  • browserify.js - Browserify task definition
  • views.js - Views watchers
  • watch.js - Project files watchers
• package.json - Node package info
• gulpfile.js - Gulp file for tasks
• .editorconfig - EditorConfig
• .jshintrc - JSHint config file
• .gitignore - Git ignore file
• app.js - optional express server (this is to test the server)

Automation

The tasks folder contains all gulp automated tasks. The tasks/config.js has all the configurations to run the tasks. Optionaly you can create an (git ignored) file called local.js inside the tasks folder which overwrites the global configuration to apply only in the local machine.

The main tasks are:

• gulp the default task. Watch over all configure files for changes and run the proper tasks when changes occurs.
• gulp build build all frontend assets configured.

The boolean variable _debug in the package.json file is used in all tasks to determine whether the tasks are to be run in a development or production environment. If the machine has the system variable NODE_ENV configured in PRODUCTION, the _debug variable is set to false regardless its value.

License

MIT