turbin/frontend-starter-kit

A workflow for modern frontend development.

Features

Automation

• Gulp - Task Runner.
• Bower - Package Manager.
• Browsersync - Watch project changes and updates browsers.

HTML

• Assemble

CSS

• SASS
• Autoprefixer
• CSScomb
• CSSnano
• stylelint
• CSSLint
• SCSS-Lint

Javascript

• BabelJS - Javascript compiler.
• rollup.js - Javascript module bundler
• ESLint
• JSHint

Test

• Karma
• Mocha
• Chai
• Sinon

Visual regression testing

• PhantomCSS

Coverage

• Istanbul

HTML

• htmlhint
• w3cjs
• a11y

Assets

• assets-manager

Release

• release-it

Instalation

You will need to install NodeJS.

# Clone the repository.
$ git clone [email protected]:amazingSurge/frontend-starter-kit.git project
$ cd project

# Install Gulp, Bower and babel-cli, if you haven't already.
$ npm install -g gulp-cli babel-cli bower assemble

# Installs all the dependencies.
$ npm install

# gulp-scss-lint plugin requires Ruby and scss-lint
$ gem install scss_lint

# Installs all packages.
$ bower install

# Start a mini server to view the project and watch their changes on http://localhost:3000/
$ gulp

Available Tasks

• gulp or gulp watch Start watch for changes and server with Browsersync.
• gulp build Run all development tasks
• gulp serve Start server with Browsersync.
• gulp clean Clean output directories.
• gulp lint Lint everything.
• gulp pagespeed Run PageSpeed Insights.

Html

• gulp html Complie handlebar templates into html files.
• gulp htmlhint Lint html files using htmlhint.
• gulp w3cjs Lint html files using w3c.
• gulp a11y Lint html files using a11y.
• gulp clean:html Clean out distribution html files.

Javascript

• gulp bundler Bundle javasript modules.
• gulp scripts Concatenate and minify JavaScript.
• gulp eslint Lint ES6 files using eslint.
• gulp jshint Lint Javascript files using jshint.
• gulp clean:scripts Clean out distribution javascript files.

CSS

• gulp styles Compile and automatically prefix stylesheets.
• gulp csslint Lint css files using csslint.
• gulp scsslint Lint scss files using scsslint.
• gulp stylelint Lint css files using stylelint.
• gulp clean:styles Clean out distribution stylesheets files.

Assets

• gulp images Optimize all images.
• gulp svg Create svg sprites.
• gulp fonts Create fontface files.
• gulp favicons Create favicon images.
• gulp icons Create icons.
• gulp assets Copy assets to distribution directory.
• gulp assets:clean Clean out assets from distribution directory.

Tests

• gulp tdd Test for Test Driven Development purposes.
• gulp test Test for Continuous Integration purposes.

Visual regression testing

• gulp visual Run tests for visual regression.
• gulp clean:visual Clean out visual regression testing screenshots and results files.

Coverage

• gulp coverage Generate coverage report.

Release

• gulp release Bump version and release to npm and github.

Standalone file tasks

• gulp html --page=index.hbs
• gulp scripts --file=index.js
• gulp styles --file=styles.scss
• gulp svgs --folder=example
• gulp assets --package=jquery
• gulp assets:clean --package=jquery

Directories

• src/html - Source files for html.
• src/js - Source files for javascript.
• src/scss - Source files for css.
• src/svgs - Svg files for sprites.
• src/images - Source files for images.
• src/icons - Source files for icons.
• src/fonts - ttf fonts that will generated into fontface files.

Other directories:

• build - Intermediate files produced by the development server.
• dist - The output of gulp dist, which contains your distribution-ready app.

Main application files:

• src/js/index.js - The application's entry point
• src/scss/style.scss - Global styles for your application

Main build files:

• gulpfile.babel.js - Build scripts written with gulp