ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Grunt 설치 및 셋팅
    개발 2016.08.18 16:52


    Grunt는 무엇인가?

    Grunt는 JavaScript를 위한 task 기반의 command line 빌드 툴이다. 예를 들어서 JavaScript 프로젝트를 진행할 때, 만약 주기적으로 해야할 일이 있다면, grunt를 설치 후 다양한 작업을 할 수 있다.


    Grunt 설치

    1. Node.js & npm설치 확인

    기존에 Node.js가 설치 되어 있어야 함, npm을 통해서 설치해야 하기 때문에..

    만약 설치가 안되어 있다면 아래 링크로 이동해서 설치

    2016/08/18 - [개발] - Node.js 설치 및 셋팅, npm 이란?


    2. CLI (command line interface) 인스톨

    npm install -g grunt-cli 를 커맨드창에 입력

    C:\Users\Jason>npm install -g grunt-cli

    C:\Users\Jason\AppData\Roaming\npm\grunt -> C:\Users\Jason\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt

    C:\Users\Jason\AppData\Roaming\npm

    `-- grunt-cli@1.2.0

      +-- findup-sync@0.3.0

      | `-- glob@5.0.15

      |   +-- inflight@1.0.5

      |   | `-- wrappy@1.0.2

      |   +-- inherits@2.0.1

      |   +-- minimatch@3.0.3

      |   | `-- brace-expansion@1.1.6

      |   |   +-- balanced-match@0.4.2

      |   |   `-- concat-map@0.0.1

      |   +-- once@1.3.3

      |   `-- path-is-absolute@1.0.0

      +-- grunt-known-options@1.1.0

      +-- nopt@3.0.6

      | `-- abbrev@1.0.9

      `-- resolve@1.1.7

    C:\Users\Jason>

    참고로 cli는 향후 매번 grunt가 실행될 때, 로컬에 저장된 Grunt가 발견되면 CLI는 Grunt 의 라이브러리들과 Gruntfile로부터의 설정 정보를 가져와 요청한 task를 실행한다. (grunt-cli code )


    3. Grunt 프로젝트 시작하기

    3-1. package.json 생성


    필요한 grunt와 grunt 플러그인들의 정보를 가지고 있는 파일

    예제)

    {

      "name": "reponsive-images",

      "version": "0.1.0",

      "repository": {

        "type": "git",

        "url": "https://github.com/udacity/responsive-images.git"

      },

      "devDependencies": {

        "grunt": "^0.4.5",

        "grunt-contrib-clean": "~0.6.0",

        "grunt-contrib-copy": "~0.8.0",

        "grunt-contrib-jshint": "~0.10.0",

        "grunt-contrib-nodeunit": "~0.4.1",

        "grunt-contrib-uglify": "~0.5.0",

        "grunt-mkdir": "~0.1.2"

      },

      "dependencies": {

        "grunt-responsive-images": "^0.1.6"

      }

    }


    3-2. Gruntfile.js or Gruntfile.coffee 파일 생성

    이 파일은 task를 정의하거나 Grunt 플러그인들은 로드한다.
    예제)
    module.exports = function(grunt) {

      grunt.initConfig({
        responsive_images: {
          dev: {
            options: {
              engine: 'im',
              sizes: [{
                name: 'small',
                width: '30%',
                suffix: '_small',
                quality: 20
              },{
                name: 'large',
                width: '50%',
                suffix: '_large',
                quality: 40
              }]
            },

            /*
            You don't need to change this part if you don't change
            the directory structure.
            */
            files: [{
              expand: true,
              src: ['*.{gif,jpg,png}'],
              cwd: 'images_src/',
              dest: 'images/'
            }]
          }
        },

        /* Clear out the images directory if it exists */
        clean: {
          dev: {
            src: ['images'],
          },
        },

        /* Generate the images directory if it is missing */
        mkdir: {
          dev: {
            options: {
              create: ['images']
            },
          },
        },

        /* Copy the "fixed" images that don't go through processing into the images/directory */
        copy: {
          dev: {
            files: [{
              expand: true,
              src: 'images_src/fixed/*.{gif,jpg,png}',
              dest: 'images/'
            }]
          },
        },
      });

      grunt.loadNpmTasks('grunt-responsive-images');
      grunt.loadNpmTasks('grunt-contrib-clean');
      grunt.loadNpmTasks('grunt-contrib-copy');
      grunt.loadNpmTasks('grunt-mkdir');
      grunt.registerTask('default', ['clean', 'mkdir', 'copy', 'responsive_images']);

    };


    4. Grunt와 grunt 플러그인 설치

    예제)

    npm install grunt --save-dev <- grunt 의 최신버전을 설치

    npm install grunt-responsive-images --save-dev  <- grunt-responsive-images grunt의 반응형 이미지 플러그인 설치


    5. 커맨드창에 grunt를 입력하면 실행 됨


    참고)

    1. http://gruntjs.com/getting-started

    2. Udacity Front-End Web Developer Nanodegree




    댓글 0

© do Jason