$30 off During Our Annual Pro Sale. View Details »

Modern Development Workflow with Grunt

Koji Ishimoto
November 30, 2013

Modern Development Workflow with Grunt

Koji Ishimoto

November 30, 2013
Tweet

More Decks by Koji Ishimoto

Other Decks in Design

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. 2007

    View Slide

  16. View Slide

  17. 14 Rules
    for Faster-Loading Web Sites

    View Slide

  18. 2013

    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