PostIT

[Grunt/Mac] 맥에 Grunt 설치하기 본문

Tool/Etc

[Grunt/Mac] 맥에 Grunt 설치하기

shun10114 2017. 3. 3. 10:21

# Mac Sierra에 Grunt Install


## 1. 배경

최근 채용사이트를 보니 퍼블리셔 요구사항에서 Grunt를 사용하고 있었습니다. 그러한 참에 Grunt가 뭔가 싶어서 알아보게 되었고 설치해서 테스트까지 해보는 것을 이번 목표로 잡았습니다. 그래서, 이번 장에서 그런트에 대해서 알아보며, 설치하는 과정을 적어놓겠습니다. 자세한 내용이나, 원리 등에 대한것은 차차 알아보도록 하겠습니다.


먼저 공식 홈페이지 : https://gruntjs.com/getting-started


## 2. 내용

### Grunt 란?
Github는 Grunt에 대해, ‘Grunt is a task-based command line build tool for JavaScript projects.’ 라고 설명하고 있다.
프로젝트에 사전정의된 task 단위로 실행되며 command line을 통해 동작하는 자바스크립트 용 빌드 툴이라는 뜻이다. Grunt는 수많은 기능의 플러그인을 제공하며 사용자가 원하는 작업들을 설정해놓기만 하면, ‘ Grunt’라는 command line하나로 설정해놓은 모든 작업을 알아서 실행해준다. 
 
Grunt의 가장 큰 장점은 관련 지식이나 경험이 없어도 쉽게 접근하고 사용할 수 있다는 점과 최소한의 노력으로 원하는 모든 것을 자동화 시킬 수 있다는 것이다. Grunt를 통해 할 수 있는 작업의 범위는 매우 크고, 끊임없이 자라나고 있기 때문에 우리는 그저 우리가 원하는 것을 골라 쓰기만 하면 된다. Grunt란 한마디로, ‘원하는 일을 자동화해서 작업 효율을 높이는 툴’ 이라고도 말할 수 있을 것이다.

 

### 왜 사용할까?
Grunt는 JavaScript Task Runner, JavaScript 프로젝트 관리를 위한 build-tool이다. Grunt 홈페이지에서 표현하고 있는 말을 인용하자면, grunt의 사용목적은 한마디로 ‘자동화’에 있다. Grunt를 사용함으로써 프로젝트 build시에 원하는 작업, 예를 들어 concatenating, minifying, validating 등을 편하게, 쉽게, 자동적으로 실행시킬 수 있다.

 


### 어떻게 쓰지?

환경설정

Grunt와 Grunt Plugin의 설치와 관리는 npm(package manager for Node.js)을 통해서 이루어지기 때문에, 우리는 Grunt를 사용하기 위해 Node설치가 필요하다.  




### Grunt Install 순서

1) Homebrew로 NodeJs설치하기

-brew install nodejs



2) Nodejs로 Grunt 설치하기.

$ npm install -g grunt-cli


Grunt 관련 Module 설치.(더 알아보기)

$ npm install grunt --save-dev
 : 
프로젝트 폴더의 root경로에서 grunt를 설치한다. --save-dev 로 설치를 진행하면 grunt 설치와 동시에 다음 단계에서 생성할 package.json 파일과 연동시켜주며, 파일 내부의 devDependencies항목에 설치 대상(여기서는 grunt)을 자동으로 추가해준다.

$ npm install grunt-contrib-sass --save-dev

(ruby와 sass가 설치되어있어야 한다. brew install ruby - gem install sass)


$ npm install grunt-contrib-watch --save-dev

$ npm install grunt-autoprefixer --save-dev

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

$ npm install grunt-contrib-uglify --save-dev
$ npm install jshint-stylish --save-dev


3) Grunt Folder 설치 및 시작

전 일단 로컬환경에서 바탕화면에 grunt라는 폴더에 테스트해보려고 합니다.


- mkdir ~/Desktop/grunt

- cd ~/Desktop/grunt

- npm init

{

  "name": "classico",

  "version": "1.0.0",

  "description": "classico",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [

    "classico"

  ],

  "author": "shooney",

  "license": "ISC",

  "devDependencies": {

    "grunt": "^1.0.1",

    "grunt-autoprefixer": "^3.0.4",

    "grunt-contrib-clean": "^1.1.0",

    "grunt-contrib-compass": "^1.1.1",

    "grunt-contrib-concat": "^1.0.1",

    "grunt-contrib-jshint": "^1.1.0",

    "grunt-contrib-sass": "^1.0.0",

    "grunt-contrib-stylus": "^1.2.0",

    "grunt-contrib-uglify": "^3.0.1",

    "grunt-contrib-watch": "^1.0.0",

    "jshint-stylish": "^2.2.1"

  }

}


전 이렇게 입력했습니다. version은 Grunt버전 체크결과 1.2.0이 최신버전이라 최신버전으로 입력했습니다. 

위의 사항들을 설치하고나면 이렇게 입력되어나옵니다.

앞으로 테스트하면서 문제되는 것이나, 차차 알아가면서 적어보겠습니다.




4) Gruntfile.js 만들기

앞으로 테스트하면서 문제되는 것이나, 차차 알아가면서 적어보겠습니다. 


module.exports = function(grunt) {

    // Project configuration.

    grunt.initConfig({

        concat: {

            "options": { "separator": ";" },

            "build": {

                "src": ["js/file1.js", "js/file2.js"],

                "dest": "js/app.js"

            }

        },/* 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 결과 파일 설정 */

            }

        },

        /* sass설정 */

        sass: {

            options: {

                    sourceMap: true

                },

            dist: {

                files: {

                    'main.css': 'main.scss'

                }

            }

        },

        /* jsHint 설정 */

        jshint:{

            all: ['Gruntfile.js', 'src/main/webaoo/resources/js/**/*.js'],

            options:{

                reporter: require('jshint-stylish'),

                globals: {

                    jQuery: true,

                    console: true,

                    module: true,

                    document: true

                }

            }

        },

        /* watch 설정 */

        watch: {

            files: ['<%= jshint.files %>'],

            tasks: ['jshint']

        }

    });

    /* Load the plugin that provides the "uglify", "concat" tasks. */

    grunt.loadNpmTasks('grunt-contrib-concat');

    grunt.loadNpmTasks('grunt-contrib-jshint');

    grunt.loadNpmTasks('grunt-contrib-uglify');

    grunt.loadNpmTasks('grunt-contrib-sass');

    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.loadNpmTasks('grunt-autoprefixer');

    grunt.registerTask('test', ['jshint']);


    // Task definitions    

    grunt.registerTask('default', ['concat', 'uglify','jshint','sass','autoprefixer']); /* grunt 명령어로 실행할 작업 */

};


- sass설정에서 문제가 발생하는데 찾아봐야 할것 같다.



5) Grunt 실행

- grunt


File public/build/result.min.js created: 0 B → 16 B

>> 1 file created.




++) 플러그인 Example


플러그인 종류 : https://github.com/gruntjs/grunt-contrib

 

//Grunt.js example


module.exports = function(grunt) {


    /* Project configuration. */

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        

        jshint:{

            all: ['app.js', 'public/js/common/.js', 'public/js/ctrl/.js'],

            options:{

                reporter: require('jshint-stylish')

            }

        }

    });


    /* Load the plugin that provides the "jshint" task. */

    grunt.loadNpmTasks('grunt-contrib-jshint');


    /*  Default task(s). */

    grunt.registerTask('default', ['jshint']);

}; 



( jshint default output )

 


( jshint-stylish 적용 output)



참조


https://gruntjs.com/

http://nuli.navercorp.com/sharing/blog/post/1132682

https://coolestguidesontheplanet.com/install-gruntjs-osx/






'Tool > Etc' 카테고리의 다른 글

[Server/SVN] SVN 구축하기  (0) 2016.12.05
[jenkins/mac]homebrew jenkins 설치 - 퍼옴  (0) 2016.11.30
Comments