Web Design
Automating Tasks with Grunt
Graphics, Web Hosting and Grunt Performance
Installing and Using Grunt

Graphics, Web Hosting and Grunt Performance

Course Number:
wd_atwg_a02_it_enus
Lesson Objectives

Graphics, Web Hosting and Grunt Performance

  • start the course
  • use imagemin to reduce the transmitted size of images in your web project
  • use Grunt to control a number of tools to enable responsive image sizing in your web project
  • use spritesmith in Grunt to optimize image loading times
  • use svgmin to minimize the size and load time of SVG images
  • use Grunt to manage SVG sprites and icon fonts and reduce page load requests
  • identify time-consuming tasks in Grunt
  • configure Grunt to use matchdep to load plugins automatically
  • configure Grunt to load plug-ins using load-grunt-tasks and defer plug-in loading
  • write custom plugins for Grunt
  • generate a Gruntfile with organized sections to reduce execution time
  • run multiple Grunt tasks simultaneously
  • configure Grunt to perform actions when files in your project are updated
  • use Travis CI and github to utilize continuous integration with your project
  • use Grunt to provide a development web server
  • use Grunt features to enable unit testing in your project
  • create unit tests for your web project
  • use Grunt facilities to automate accessibility testing
  • use ngrok to expose your local server to the external Internet
  • use Grunt to test the performance of your project
  • reduce the size of raster image assets, quantify Grunt performance, and enable a local web server

Overview/Description
In this course, you will learn how to use Grunt to minimize web image assets. You'll also learn to use Grunt to host a local development web server as well as quantify and improve Grunt performance.

Target Audience
Web developers looking to improve workflows and productivity by optimizing and automating development processes

Installing and Using Grunt

Course Number:
wd_atwg_a01_it_enus
Lesson Objectives

Installing and Using Grunt

  • start the course
  • identify the functions and capabilities of Grunt
  • install and update the software required by Grunt
  • use Node.js facilities to install Grunt and supporting modules
  • install Grunt using the npm Node package manager
  • add Grunt to your project
  • use Grunt to specify files in your project
  • use modern JavaScript frameworks and practices with Grunt
  • use additional modern JavaScript frameworks and practices with Grunt
  • use Grunt to employ templates in your JavaScript project
  • use JSHint to enforce quality standards on your JavaScript files
  • use Modernizr to optimize your pages for various browser capabilities
  • use Uglify to minify and obfuscate your JavaScript files
  • use grunt-jsdoc to generate documentation from JSDoc annotations in your JavaScript files
  • use Grunt with a simple HTML/CSS/JS application
  • use Bower to manage web development libraries
  • use RECESS to enforce standards on your CSS files
  • use autoprefixer to handle vendor-specific CSS prefixes
  • use CleanCSS and UnCSS to reduce the asset size of your CSS files
  • use Grunt to package your app for production use and update version numbers
  • install Grunt and use it to reduce the size of JS and CSS assets

Overview/Description
In this course, you will learn how to install and configure Grunt and its prerequisites on multiple platforms. You'll also learn to use Grunt minimize JavaScript and CSS web assets.

Target Audience
Web developers looking to improve workflows and productivity by optimizing and automating development processes

Close Chat Live