Modern Development Workflow with Grunt

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