/FrontEndBuildTemplate

An experiment with a front-end build system and development environment.
  1. JavaScript 92.2%
  2. CSS 7.8%
JavaScript CSS
Switch branches/tags
Nothing to show
Find file
Clone or download

Clone with HTTPS

Use Git or checkout with SVN using the web URL.

Download ZIP

Launching GitHub Desktop...

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop...

If nothing happens, download GitHub Desktop and try again.

Launching Xcode...

If nothing happens, download Xcode and try again.

Launching Visual Studio...

If nothing happens, download the GitHub extension for Visual Studio and try again.

Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
index.html
todo.css
todo.js

README.md

A Front-End Build Template

An experiment with a front-end build system and development environment.

I'm learning about how to make front-end development less painful. Feel free to follow along on http://thedustytome.com.

Disclaimer: The starting sample application has been blatently stolen, er, borrowed from the main page of Angular's site. They deserve the credit, and many thanks for such a helpful framework.

Goals

  • Become familiar with common front-end dev practices and tools, including:
    • bower
    • gulp.js
    • jslint/jshint
    • Sass/Less
    • JavaScript testing
  • Learn how to apply automated build/validation/testing to front-end work.
  • Translate what I learn into blog posts so others have the "getting started overview" that I'm missing.

Outline of activities:

  1. Intro and working simple app
    • Get baseline Angular example up and running, with a simple .html, .css, and .js file involved. No build system, just a working example.
  2. Build for vendor JavaScript
    • Add a gulpfile and wire up to compile vendor.js. Move Angular source from CDN to bower dependency. Document all steps, including installation dependencies (Node) and commands (install bower and gulp, etc).
  3. Build for application JavaScript
    • Compile app.js and minify/uglify it.
    • Apply jshint checking. Learn about that.
  4. Build for vendor/app CSS
    • Add CSS processing to build script. Possibly including sass/less processing. Definitely including minification. Probably need vendor/app distinction just like for JavaScript.
  5. JavaScript testing
    • Add execution of javascript unit tests to build script. Learn about testem and how to run JS tests during development. Read up on basic patterns/practices for front-end JS tests (any quirks of testing interaction with DOM, etc).
  6. .NET integration
    • Assess how to integrate front-end build into .NET build script (ex. psake) and web dev workflow. Can build for server-side code execute front-end build as a dependant task? What support does or will VS have for running gulp/grunt during VS build before launching the site from VS?