/FrontendWebTemplate

A template project for frontend web development utilizing npm, bower and gulp; includes live reload inside the browser, automated css/js injection into index.html, etc.; makes use of angular's routes (for single page applications) and custom directives

Primary LanguageJavaScript

Project Template for Frontend Web Development

Makes use of:

  • npm ... package management
  • bower ... frontend library management
  • gulp ... task execution (custom build routines, Sass compiler and file watcher, live reload inside Chrome, js and css link injection, automated bower-install, ...)
  • AngularJS ... single page application development (routes) and html 'templates' (custom directives)
  • Sass ... css preprocessor providing variables, mixins and functions
  • Bootstrap
  • jQuery

How to:

Setup:

  1. Make sure Node.js is installed: https://nodejs.org/en/
  2. Execute 'npm install' inside the project folder to download all node packages (gulp, ...)
  3. Make sure bower is installed: 'npm install bower -g'
  4. Install bower-installer: 'npm install bower-installer -g'
  5. Done.

Development Routine:

  1. Execute 'gulp' inside the project folder to download the bower packages (angular, jquery,...), start the browser, live reload, sass compilation, etc.

See also: https://www.youtube.com/playlist?list=PLRk95HPmOM6PN-G1xyKj9q6ap_dc9Yckm

Important files:


bower.json

bower and bower-installer config file including the dependencies (e.g. Angular)

Add new dependencies:
  1. Execute 'bower install PACKAGENAME --save' inside the project directory (e.g.: 'bower install angular --save')
  2. Open bower.json, add the new dependency to "install" -> "sources" and define which are the important files that will be copied to the src-folder (e.g.: angular.js)
Install all dependencies:
  1. Make sure bower-installer is installed globally: 'npm install bower-installer -g'
  2. Execute 'bower-installer' inside the project directory. This will not only download the packages to the bower_packages-folder (which is what 'bower install' would do), but it will also copy the important files defined in the bower.json-file (under "install" -> "sources") to the src-folder

package.json

npm config file including the node.js dependencies (e.g. Gulp)

Add new dependencies:
  1. Navigate to project directory
  2. Type in e.g.: npm install gulp --save-dev
Install all dependencies:
  1. Navigate to project directory
  2. Type in: npm install

gulpfile.js

gulp file including all the gulp tasks
  • default ... Executes the build task
  • build ... Runs the full build routine; makes sure the tasks are executed in sequence
  • clean ... Deletes the build and src/lib/bower_components folders
  • bower-installer ... Executes 'bower-installer'
  • inject ... Injects js- and css-links into index.html
  • browser-sync ... Starts a local server for live reload while editing:
  • html ... HTML files
  • css ... CSS files
  • sass ... SASS files
  • scss ... SCSS files
  • js ... JavaScript files
  • lib ... Bower packages files
  • fonts ... Font files
  • img ... Image files
  • watch ... File watchers
  • htmlBuild, cssBuild, etc. ... Execute the file tasks and 'inject' in sequence
  • open ... opens the default browser automatically