Pro Yearly is on sale from $80 to $50! »

Modern Development Workflow with Grunt

4cf842e43a782a585d8707f2ba7f9a5c?s=47 Koji Ishimoto
November 30, 2013

Modern Development Workflow with Grunt

4cf842e43a782a585d8707f2ba7f9a5c?s=128

Koji Ishimoto

November 30, 2013
Tweet

Transcript

  1. Modern Development Workflow with Grunt HTML5 Conference JP 2013 Koji

    Ishimoto
  2. @t32k

  3. None
  4. - Why use Grunt? - How to use Grunt -

    Customize your Gruntfile! Agenda
  5. Target HTML Corder Web Designer or

  6. Why use Grunt?

  7. The JavaScript Task Runner Linting Compiling Minification Testing Conversion Documentation

    Deployment
  8. None
  9. Complexity

  10. GUI Apps

  11. None
  12. Paid Apps

  13. $$$

  14. Web Performance

  15. 2007

  16. None
  17. 14 Rules for Faster-Loading Web Sites

  18. 2013

  19. #perfmatters

  20. Network Render Compute

  21. )5.-ΧϯϑΝϨϯεɺϧʔϜ"ɺ ʰ8FCϑϩϯτΤϯυͷϨϯμϦϯάύϑΥʔϚϯεͱ࠷దԽ5JQTʱ

  22. How to use Grunt

  23. Install

  24. None
  25. $ npm install grunt-cli -g

  26. Structure

  27. Package.json Gruntfile.js .js or .coffee

  28. None
  29. None
  30. Package.json

  31. $ npm init

  32. { "name": "grunt-demo", "version": "0.0.1", "description": "This is demo.", "main":

    "Gruntfile.js", "scripts": { "test": "grunt test" }, "author": "Koji Ishimoto", "license": "BSD-2-Clause" }
  33. $ npm install grunt --save-dev $ npm install grunt-csso --save-dev

  34. { "name": "grunt-demo", "version": "0.0.1", "description": "This is demo.", "main":

    "Gruntfile.js", "scripts": { "test": "grunt test" }, "author": "Koji Ishimoto", "license": "BSD-2-Clause", "devDependencies": { "grunt": "~0.4.2", "grunt-csso": "~0.5.2" } }
  35. Package.json $ npm install A B

  36. Gruntfile.js

  37. $ npm install grunt-init -g $ git clone https://github.com/ gruntjs/grunt-init-gruntfile.git

    ~/.grunt-init/gruntfile $ grunt-init gruntfile
  38. module.exports = function(grunt) { // Project configuration. grunt.initConfig({ // Task

    configuration. csso: { files: { 'output.css': ['input.css'] } } }); // These plugins provide necessary tasks. grunt.loadNpmTasks('grunt-csso'); // Default task. grunt.registerTask('default', ['csso']); };
  39. None
  40. Load the task:

  41. grunt.loadNpmTasks('grunt-csso');

  42. Configure the task:

  43. grunt.initConfig({ csso: { dist: { files: { 'output.css': ['input.css'] }

    } } });
  44. Register the task:

  45. grunt.registerTask('default', [‘csso’]);

  46. $ grunt csso

  47. Customize your Gruntfile!

  48. None
  49. grunt-contrib-***

  50. None
  51. $ npm install grunt-init -g $ git clone https://github.com/ gruntjs/grunt-init-gruntplugin.git

    ~/.grunt-init/gruntplugin $ grunt-init gruntplugin
  52. Maple Realistic preprocessors-based CSS framework for mobile.

  53. None
  54. 95,000byte 100,000byte 105,000byte 110,000byte 115,000byte 120,000byte Byte 270 1 135

    67 202 Deploy times CSS file size as deploy
  55. grunt stylesheet ['sass', 'autoprefixer', 'csscomb', 'csslint']

  56. grunt typeset ['webfont', 'stylesheet']

  57. grunt publish ['stylesheet', 'kss']

  58. grunt build ['stylesheet', 'csso', 'imageoptim']

  59. Jet Start

  60. None
  61. None
  62. $ npm install yo -g $ npm install generator-maple -g

    $ mkdir your_proj && cd $_ $ yo maple $ grunt
  63. - Automation - Customization - Start of Terminal Summary

  64. Thanks! t32k @t32k koji.ishimoto

  65. - flickr.com/photos/bitterjug/7670055210 - flickr.com/photos/epsos/8474532085 - flickr.com/photos/viernest/3380560365 - flickr.com/photos/81583603@N00/4099146279 - flickr.com/photos/peasap/2261077597

    - flickr.com/photos/epsos/8097327748 Photo Credits