개발

Grunt 설치 및 셋팅

제이슨 제이슨을 하다 2016. 8. 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




반응형
저작자표시비영리변경금지

'개발' 카테고리의 다른 글

MEAN stack AWS 우분투 / Mac 설치 방법  (2) 2017.02.11
AWS 에서 Ubuntu (우분투) Linux 인스턴스 띄우기  (0) 2017.01.25
Grunt 설치 및 셋팅  (0) 2016.08.18
Node.js 설치 및 셋팅, npm 이란?  (0) 2016.08.18
웹개발, 웹디자인 방법  (0) 2016.08.12
웹개발 관련 툴 모음  (0) 2016.08.12
CSS 문법 정리  (0) 2016.08.11
CentOS 사용팁  (0) 2016.08.09
Apache MySql PHP 윈도우 설치 따라하기  (0) 2016.06.26
해쉬맵(hashmap) 설명 정리  (0) 2016.06.26

Tag

, , , , , ,

'개발'의 다른글

관련글

댓글 0
1 2 3 4 5 6 7 ··· 10
더보기

티스토리툴바