Frontendbyben NPM

Frontend Build

Frontend Build is a light-weight, no-bloat, front-end build framework. It's purpose is to give developers a jumpstart utilizing Gulp to automate repetitive tasks, a BEM CSS methodology for a standards-driven approach, pre-loaded with the Foundation front-end framework (easily add others or even your own!) and integrated with Babel allowing developers to use the next generation JavaScript.

If you're viewing this at https://github.com/bmarshall511/frontend, you're reading the documentation for the master branch. View documentation for the latest release.

Prerequisites

Direct Download

Download the script here and include it (unless you are packaging scripts somehow else).

Installation

Navigate to the frontend directory in Terminal and run the following commands:

$ bundle install To install gem dependencies
$ npm install To install dependencies
$ npm start Watch files & run appropriate tasks when needed

Development Usage

The following commands can be run in the frontend directory during development. An optional --prod flag can be appended to run for production environments, defaults to development.

$ gulp Runs the default tasks (delete, compass, htmlmin, js-transpile, kss)
$ gulp js-lint Lints JS files
$ gulp js-transpile Transpiles JS files
$ gulp scripts Lints and compiles JS files
$ gulp compass Compiles Sass files
$ gulp delete Deletes everything in the dist & styleguide directory
$ gulp copy-fonts Copies fonts to the dist directory
$ gulp images Minifies images
$ gulp kss Generates a styleguide
$ gulp scss-lint Lints SCSS files
$ gulp htmlmin Minifies HTML documents
$ gulp uncss Removes unused styles (needs configuration)
$ gulp style-lint Lints the compiled CSS files (needs configuration)

Styleguides

Another feature to using Frontend Build is it's ability to create a styleguide automatically using KSS. For more information, see the syntax documentation on how to utilize this feature.