Modern Development Workflow with Grunt

http://t32k.me/mol/log/modern-development-workflow-with-grunt/

Transcript

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

   View Slide

2. @t32k
   

   View Slide

3. View Slide

4. - Why use Grunt?
   - How to use Grunt
   - Customize your Gruntfile!
   Agenda
   

   View Slide

5. Target
   HTML Corder Web Designer
   or
   

   View Slide

6. Why use Grunt?
   

   View Slide

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

   View Slide

8. View Slide

9. Complexity
   

   View Slide

10. GUI Apps
    

    View Slide

11. View Slide

12. Paid Apps
    

    View Slide

13. $$$
    

    View Slide

14. Web Performance
    

    View Slide

15. View Slide

16. View Slide

17. 14 Rules
    for Faster-Loading Web Sites
    

    View Slide

18. View Slide

19. #perfmatters
    

    View Slide

20. Network Render Compute
    

    View Slide

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

    View Slide

22. How to use Grunt
    

    View Slide

23. Install
    

    View Slide

24. View Slide

25. $ npm install grunt-cli -g
    

    View Slide

26. Structure
    

    View Slide

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

    View Slide

28. View Slide

29. View Slide

30. Package.json
    

    View Slide

31. $ npm init
    

    View Slide

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"
    }
    

    View Slide

33. $ npm install grunt --save-dev
    $ npm install grunt-csso --save-dev
    

    View Slide

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"
    }
    }
    

    View Slide

35. Package.json
    $ npm install
    A B
    

    View Slide

36. Gruntfile.js
    

    View Slide

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

    View Slide

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']);
    };
    

    View Slide

39. View Slide

40. Load the task:
    

    View Slide

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

    View Slide

42. Configure the task:
    

    View Slide

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

    View Slide

44. Register the task:
    

    View Slide

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

    View Slide

46. $ grunt csso
    

    View Slide

47. Customize your Gruntfile!
    

    View Slide

48. View Slide

49. grunt-contrib-***
    

    View Slide

50. View Slide

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

    View Slide

52. Maple
    Realistic preprocessors-based CSS framework for mobile.
    

    View Slide

53. View Slide

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
    

    View Slide

55. grunt stylesheet
    ['sass', 'autoprefixer', 'csscomb', 'csslint']
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

59. Jet Start
    

    View Slide

60. View Slide

61. View Slide

62. $ npm install yo -g
    $ npm install generator-maple -g
    $ mkdir your_proj && cd $_
    $ yo maple
    $ grunt
    

    View Slide

63. - Automation
    - Customization
    - Start of Terminal
    Summary
    

    View Slide

64. Thanks!
    t32k
    @t32k
    koji.ishimoto
    

    View Slide

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
    

    View Slide