[Node.js] Grunt 사용하기

12월 12, 2018

GRUNT 사용하기

웹페이지 : https://gruntjs.com/

참조 : https://gruntjs.com/

GRUNT는 플러그인 기능을 사용하여 자동화 효율을 높이는 툴이다.

자바스크립트 합치기, 최소화하기, 이미지 크기 최소화하기 등

한번 설정을 해두면 명령어 한번으로 자동화 해준다.

[사용방법]

1. Grunt Cli 설치

Grunt Command Line Interface(CLI)를 설치한다.

$ npm install -g grunt-cli

2. package.json 파일 생성

프로젝트를 생성한다.

$ npm init

3. Grunt 설치

프로젝트 폴더의 root경로에서 grunt를 설치한다. --save-dev 로 설치를 진행하여 package.json 파일에 연동시킨다.

// package.json
{
  "name": "grunt-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.3"
  }
}

4. Gruntfile.js 파일 생성

package.json 과 같은 위치 root 폴더에 생성한다. 아래는 예시

// Gruntfile.js 예시

const mozjpeg = require('imagemin-mozjpeg'); //이미지 압축을 위해 설치 npm install imagemin-mozjpeg --save-dev

module.exports = function(grunt) {
 //plugin 종류
 //grunt-contrib-cssmin : css파일을 압축
    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        //uglify 설정 자바스크립트를 압축해준다.
        uglify: {
            options: {
                banner: '/* <%= grunt.template.today("yyyy-mm-dd") %> / ' //파일의 맨처음 붙는 banner 설정
            },
            build: {
                src: 'public/build/result.js', //uglify할 대상 설정
                dest: 'public/build/result.min.js' //uglify 결과 파일 설정
            }
        },
        //concat 설정 자바스크립트를 합쳐준다.
        concat:{
            basic: {
                src: ['public/js/util.js', 'public/js/app.js'], //concat 타겟 설정(앞에서부터 순서대로 합쳐진다.)
                dest: 'public/build/result.js' //concat 결과 파일
            }
        },
  //imagemin 설정 이미지를 압축해준다.
  imagemin: {
   static: {
    options: {
     optimizationLevel: 3,
     svgoPlugins: [{removeViewBox: false}],
     use: [mozjpeg()] // Example plugin usage
    }
   },
   dynamic: {
    files: [{
     expand: true,
     cwd: 'public/images/',
     src: ['**/*.{png,jpg,gif}'],
     dest: 'public/build/images/'
    }]
   }
  }
  });
 
    // Load the plugin that provides the "uglify", "concat" tasks.
    grunt.loadNpmTasks('grunt-contrib-imagemin'); // 이미지를 옵션에 따라 압축함
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
 
    // Default task(s).
    grunt.registerTask('default', ['concat', 'uglify','imagemin']); //grunt 명령어로 실행할 작업
 
};

5. 사용을 원하는 Grunt Plugin 설치

여기서는 grunt-contrib-concat 플러그인 설치를 예로 든다.

$ npm install grunt-conrib-concat --save-dev

설치가 완료되면, package.json의 devDependencies를 확인한다.


{
  "name": "grunt-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.3",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-imagemin": "^3.1.0",
    "grunt-contrib-jshint": "^2.0.0",
    "grunt-contrib-uglify": "^4.0.0",
    "imagemin-mozjpeg": "^8.0.0"
  }
}

6. GRUNT 실행하기

grunt 명령어로 실행한다. 정의해놓은 복수 개의 플러그인을 동시에 실행시킬 수 있다. 개별 실행을 시키고 싶다면 ‘grunt 플러그인이름’으로 실행하면 된다. 예) grunt concat

$ grunt

 ##결과##
D:\nodeJS\grunt>grunt default
Running "concat:basic" (concat) task

Running "uglify:build" (uglify) task
>> 1 file created 47 B → 62 B

Running "imagemin:static" (imagemin) task
Minified 0 images

Running "imagemin:dynamic" (imagemin) task
Minified 3 images (saved 5.76 kB - 25.7%)

Done.

concat : public/js/util.js + public/js/app.js = public/build/result.js 로 합친다.

uglify : public/build/js/result.js 를 압축하여 result.min.js 로 생성한다.

imagemin : 옵션에 따라서 public/images 안에 있는 이미지 파일크기를 최소화 시킨다.

사용된 자바스크립트가 많을때, 최적화 작업이 필요할 때 사용하면 좋을듯하다.

이 블로그 검색

개발일지