Front-End Ops

"Front-End Ops is the bridge between an application’s intent and an application’s reality." - Alex Sexton

Goals

• Integrate front-end build processes including versioning, caching, and deployment
• Easy serving and hosting front-end resources for development, stagging, and production
• Integrated performance monitoring and tuning tools
• Facilitate greater quality control and integration with the quality assurance team
• Monitor client-side errors and error reporting
• Faciliate easy application migrations and upgrades
• Easily maintain and update internal and external depenedencies keeping them updated, secure, and stable.

Features

• Integration with Yeoman
• Support for Sass and Compass
• Support for Livereload
• Package management using Bower
• Support for Grunt and modular Gruntfiles using load-grunt-config
• Intellegant build processes
• Robust testing support

===

Grunt Tasks

Default Tasks

• grunt - run all the default grunt tasks

  • Reload assets live in the browser when a watched file is changed Grunt-contrib-watch
  • Compile Compass to CSS using Grunt-contrib-compass
  • Replace references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views) using Grunt-usemin
  • Output CLI bar graph of time to complete tasks using Time-Grunt
  • Display OSX notifications about failed Grunt tasks to desktop using Grunt-Notify
  • Only run Grunt tasks with those source files modificed since last successful run using Grunt-Newer
  • Add a specified banner comment to processed files using Grunt-Banner

===

Utility Tasks

• grunt tasks - List available Grunt tasks using Grunt-Available-Tasks

===

Testing Tasks

• grunt test - Run all testing tasks

JavaScript Testing Tasks

• grunt test-js - run only JS testing tasks

  • grunt jshint - Validate JS files with JSHint using Grunt-contrib-jshint

Markup Testing Tasks

• grunt test-html - Validate HTML files with HTML Inspector using HTML inspector via Grunt-html-inspector

Stylesheet Testing Tasks

• grunt test-css - run all stylesheet testing tasks

  • grunt scsslint - Lint SCSS files to a specific coding standard using scss lint via Grunt-Shell
  • grunt csslint - Lints CSS files using csslint via Grunt css lint
  • grunt csscss - Analyzes CSS files for redundancy and identifies duplicate CSS slectors and rule-sets using CSSCSS via Grunt-csscss
  • grunt uncss - Identifies and removes unused CSS using Grunt-uncss

===

Style Guide Driven Tests

• grunt styleguide - Re-generate style guide and run all style guide tests

  • grunt dexy - Re-generate style guide with Dexy via Grunt-Shell and Grunt-contrib-copy
  • grunt hardy - run style guide compliance tests with Hardy via Grunt-Shell
  • grunt wraith - run visual regression tests with Wraith via Grunt-Shell

===

CSS Stats

• grunt css-metrics - Analyze CSS files and log simple metrics using Grunt-css-metrics
• grunt css-stats - Analyze CSS files and log simple stats using css-stats-ack.sh via Grunt-Shell

===

Browser Testing

• grunt browserstack - Start a BrowserStack tunnel using Comming Soon, see: issue 55

===

Build Tasks

• grunt build - run all build tasks

  • Clear files and folders using Grunt-contrib-clean
  • Replace references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views) using Grunt-htmlmin
  • Concatenate files using Grunt-contrib-concat
  • Minify files with UglifyJS using Grunt-contrib-uglify
  • Compress CSS files using Grunt-contrib-cssmin
  • Minify PNG and JPEG images using Grunt-contrib-imagemin
  • Minify SVG using Grunt-svgmin
  • Zip and unzip files via a grunt plugin using Grunt-Zip
  • Run grunt tasks concurrently using Grunt-concurent
  • Rev static assets using Grunt-rev with usemin for cache busting.
  • grunt cmq - Combine matching media queries using Grunt-combine-media-queries

===

Performance Testing Tasks

• grunt throttle - Run bandwidth throttled performance tests using Grunt-Throttle
• grunt yslow - Run performance test with the YSlow Library using Grunt-Yslow
• grunt page-speed - Run performance test with google page-speed insights using Grunt-pagespeed

Performance Analytics Tasks

• grunt byte-size - Output the file size and gzip size of files using Grunt-Bytesize
• grunt phantomas - Output PhantomJS-based web performance metrics using Phantomas

===

Additional Resources and Tools

Additional resources and alternative modules/tools that didn't fit into my current workflow, but may be useful down the road or are worth keeping an eye on. If I've left something out that you feel would be a value add, please file an issue or PR.

• Build Utilities
• Stylesheet Testing
• Markup Testing
• JavaScript Testing
• Deployment
• Package Management
• Performance

License

© Kwale Design - Original source code dual licensed under MIT license / GPL2 license. Open-sourced projects used within this project retain their original licenses.