End of support

The suppport of the kit ended in favor of webpack (+ npm scripts) based build which is similar to this but has more options and it's more convenient: https://github.com/ADCI/webpack-starter-kit

Gulp starter kit

Gulp-based build set-up for common needs.

Concepts

• divide source code from compiled
• separate production task
• modularity
• modern, future-proof technologies
• linting (code style / syntax errors checking)
• browsers live reload
• dependencies through node modules (you can install libraries through NPM and import them in your styles/scripts)

Content

Styles:

• Normalize.css
• PostCSS: CSSNext
• Sass + autoprefixer
• Sourcemaps
• Production: mqpacker, cssnano

Note You can choose only PostCSS or Sass (default is Sass): just change stylesType variable and delete unecessary folder (/src/postcss or /src/scss).

Scripts:

• Javascript: ES2015, ES2016
• Webpack 2.x (as module bundler)
• Sourcemaps
• Production: UglifyJS

Code style checking:

• (Styles) Stylelint: standard config + some sensible settings
• (Scripts) ESLint: recommended config + Airbnb config

Images:

• sprites generator (spritesmith)
• Production: imagemin

Fonts:

• generates TTF, WOFF, WOFF2 fonts from OTF, TTF

Browsers live reload:

• BrowserSync

Base structure

src/

PostCSS (postcss/) / Sass (scss/):

• main source file (main.css / main.scss)
• base/:
  • vars: variables
  • elements: base html elements styles
• objects/: OOCSS
• components/: BEM, Atomic Design
• tools/: mixins

JavaScript (js/):

• main source file (main.js)
• modules/: folder for javascript modules

Images (img/):

• img/ - source images
• img/sprite/ - source images for sprite

Fonts (fonts/) - source fonts

dist/

• css/main.css - output css
• js/main.js - output js
• img/ - output images
• img/sprite.png - output sprite
• fonts/ - output fonts

Requirements

• Node.js - latest v6.x LTS "Boron" is recommended
• (optional) Gulp globally - latest v3.9.x recommended if you want to use gulp commands directly

Installation

npm install

Usage

• gulp / npm run build - build project
• gulp watch / npm run watch - watch changes
• gulp serve / npm run serve - local server that watches your changes (Browsersync)
• gulp prod / npm run prod - build production-ready code

Also, you can see subtasks in gulpfile.

Browser support

• > 0.5%
• last 2 versions

Related links

• nvm, Node.js, NPM, Yarn
• Gulp
• CSS: Normalize.css, OOCSS, BEM, Atomic Design, CSS MQPacker, cssnano
• PostCSS: CSSNext
• Sass (SCSS)
• Sourcemaps
• JavaScript: ES2015, ES2016, JavaScript Modules, UglifyJS
• Module Bundling: Webpack
• Linters: Stylelint, ESLint
• Images: spritesmith, imagemin
• BrowserSync