kickstart

Kickstart - Buildsystem and Boilerplate for Frontend Development

Prerequisites

1. Install the npm dependencies and the global gulp 4.0 module:

  npm install or yarn install
  npm install gulpjs/gulp#4.0 -g

2. Now's the time to set your options. You can find them under gulp/options.js. Be sure to set destination and webroot variables to your liking, these are the most important.

3. Run gulp stage to build the dist folder initially:

  gulp stage

Your development files are stored at `/source`. The built assets will be stored at `/dist` by default.

4. Run gulp to start developing (equal to npm run gulp):

  gulp

5. Run gulp stage to bundle, minify etc. everything in a build (equal to npm run build --production):

  gulp stage

Including

Useful structures, markup, mixins, functions and more needed in almost every project.

Buildsystem Features

• gulp / npm run gulp
  • Build all files once, watch files for changes and start local dev server (port and other info is logged to the console)
• gulp build / npm run build
  • Build all files once (fast build, not minified)
• gulp stage / npm run build --production
  • Build and minify all files
• gulp sass / npm run sass
  • SCSS to CSS
  • Autoprefixer
  • Sourcemaps
  • Add --production flag for minified CSS
• gulp webpack / npm run webpack
  • JavaScript bundles with webpack
  • ES6 with Babel transpiler presets
  • multiple bundles
  • sourcemaps
  • minified
  • CommonJS
  • Add --production flag for minified JS
• gulp pug / npm run pug
  • Pug to HTML
• gulp svg-sprite / npm run svg-sprite
  • Build a svg-sprite
  • Create a Scss with dimension info
  • A HTML page displaying all available icons
• gulp static / npm run static
  • Task to copy static files to the destination folder, e.g. fonts or images
• gulp serve / npm run serve
  • Build and serve all files without watchers
• BrowserSync
  • Livereload on save
  • Mind the settings at localhost:3001 for input syncing and weinre remote debugger
• Error logging with system notifications and in the console

If you work on windows and run into node-gyp rebuild errors, this pages might help resolve the issue. It can have many causes, here are a few listed with resources to help you resolve these issues:

• python not installed or set in PATH (nodejs/node-v0.x-archive#4047)
• wrong Visual Studio version configured in node (http://stackoverflow.com/questions/14278417/cannot-install-node-modules-that-require-compilation-on-windows-7-x64-vs2012)

This Frontend Setup is heavily inspired by Tuelsch