Skip to content

Kickstart - Buildsystem and Boilerplate for Frontend Development

Notifications You must be signed in to change notification settings

kilianso/kickstart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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
  1. 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.

  2. 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.
  1. Run gulp to start developing (equal to npm run gulp):
  gulp
  1. 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
  • 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
  • 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:

This Frontend Setup is heavily inspired by Tuelsch

About

Kickstart - Buildsystem and Boilerplate for Frontend Development

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published