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:
- Make sure Node.js is installed: https://nodejs.org/en/
- Execute 'npm install' inside the project folder to download all node packages (gulp, ...)
- Make sure bower is installed: 'npm install bower -g'
- Install bower-installer: 'npm install bower-installer -g'
- Done.
Development Routine:
- 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 and bower-installer config file including the dependencies (e.g. Angular) bower.json
Add new dependencies:
- Execute 'bower install PACKAGENAME --save' inside the project directory (e.g.: 'bower install angular --save')
- 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)
- Make sure bower-installer is installed globally: 'npm install bower-installer -g'
- 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
npm config file including the node.js dependencies (e.g. Gulp) package.json
Add new dependencies:
- Navigate to project directory
- Type in e.g.: npm install gulp --save-dev
- Navigate to project directory
- Type in: npm install
gulp file including all the gulp tasks gulpfile.js
- 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