A story only I don't know

앞선 포스팅에서 Grunt 소개와 설치방법 를 소개했었습니다. 이번에는 Grunt의 주요 플러그인들을 소개 하고 간략한 설명을 포스팅 하겠습니다. 플러그인 Grunt.js 에서 말하는 플러그인과 Node.js 에서 말하는 패키지 는 동일한 것입니다. 그래서 Grunt에서 패키지를 설치하는 방법과 Node.js에서 패키지를 설치하는 방법이 동일합니다. 플러그인 찾기 대부분의 Grunt 플러그인들은 Grunt사이트의 Plugin 메뉴 에서 확인할 수 있습니다. 먼저 Grunt웹사이트의 플러그인 메뉴 로 이동합니다. 원하는 기능의 플러그인을 검색창을 이용하여 검색을 합니다. 검색결과의 플러그인 리스트중에 하나를 선택하여 설치방법을 확인합니다. 찾는 플러그인이 명확하지 않다면 검색결과 중 다운로드 수가 많은 것 이나 플러그인 명 앞에 별표( ★ )가 붙은 것을 선택해서 설치하세요. 별표( ★ )가 붙은 것은 Grunt팀 에서 만들었다는 의미이기 때문에 어느정도 공신력이 있다고 볼 수 있습니다. 플러그인 설치하기 검색된 플러그인의 제목을 클릭하면 상세페이지로 넘어 갑니다. Grunt의 플러그인은 Node.js 의 패키지이기때문에 NPM 페이지로 넘어 갑니다. 상세페이지를 보면 영어로 되어있긴 하지만 설치하는 방법과 옵션 설정 방법 등이 자세히 설명되어 있습니다. npm install grunt-contrib-copy --save-dev ▲ 설치는 위와 같이 NPM 을 통해 설치를 하면 됩니다. 설치를 하면 프로젝트 폴더에 node_modules 폴더가 생기고 그안에 플러그인들이 설치가 됩니다. --save-dev 설치옵션에 따라 package.json 의 devDependencies 항목에 해당 플러그인명이 기록 됩니다. 가장 뒤에 -dev 옵션은 개발 시에만 사용하는 플러그인이라는 것을 명시하는 것이고 실제서비스에 사용되는 플러그인이라면 -dev 옵션을 제거 한 --save 옵션만 적용합니다. 그러면 package.jso...

Gruntjs 를 사용한다고 하는것은 gruntfile.js 를 다룰 줄 안다고 하는 것과 마찬가지로 gruntfile.js 는 중요합니다. 중요하다고 해서 배우기가 어렵다는 말은 아닙니다. 개인의 차이는 있겠지만 보통 1~2일이면 개념을 이해 할 수 있고 1주일 정도면 구글링을 하면서 Gruntjs 를 사용할 수 있을 정도로 어렵지 않습니다. 이전 포스팅에서 Gruntjs의 소개와 설치법 을 작성했으니 완전 초보자이시면 이전 포스팅을 먼저 보는 것이 도움이 될것 같습니다. gruntfile.js의 구조와 사용법 gruntfile.js 의 가장 기본적인 구조는 아래와 같습니다. 1. 프로젝트의 구성 , 2. 사용한 플러그인 로딩 , 3. 실행 명령어 의 3개의 분류로 구성되어 있으며 각각 영역별로 설명을 하도록 하겠습니다. module.exports = function(grunt) { // 1. 프로젝트의 구성 grunt.initConfig({ // package.json의 정보를 불러옴 pkg: grunt.file.readJSON('package.json'), // uglify 플러그인(패키지)의 옵션을 정의 함 uglify: { build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); // 2. 사용한 플러그인 로딩(먼저 npm으로 설치를 해야 함) grunt.loadNpmTasks('grunt-contrib-uglify'); // 3. 실행 명령어 (명령창에서 grunt 명령으로 실행됨) grunt.registerTask('default', ['uglify']); }; gruntjs사이트에서 발췌 1. 프로젝트의 구성 프...

Node js 의 탄생으로 인해 javascript 진영이 비약적인 발전을 이루고 있으며 그러한 발전에 견인차 역활을 한 Grunt 라는 것이 있습니다. 이러한 프레임워크를 javascript Task기반 빌드 Tools 이라고 하는데 과연 이것이 무엇인지, 그리고 어떻게 설치하고 사용하는지에 대해 포스팅을 하려고 합니다. Gruntjs란 무엇인가. Grunt 또는 Gruntjs 라고 하며 인터넷을 검색하면 Task기반 빌드 툴 이라고 나옵니다. 풀어서 설명을 하면... Node js 를 기반으로 하고있는 무수한 패키지 들 중에 프로젝트에서 필요한 패키지들을 설치하고 그 패키지들을 미리 설정한 순서와 옵션에 맞게 자동으로 명령어를 실행시켜주는 Tool 이라고 보면 됩니다. 마치 Desktop컴퓨터의 .bat 배치파일과 동일한 역활을 합니다. Gruntjs 를 사용하기 위해서는 먼저 Node js 가 설치되어 있어야 하고 프로젝트가 지정되어 있어야 합니다. Node js 가 설치되면 npm(node package manager) 도 자동으로 설치가 되는데 이 npm 으로 gruntjs 를 설치하면 됩니다. 프로젝트 지정이란 그냥 프로젝트명의 폴더 생성 이라고 보면됩니다. Grunt 설치 Node js 설치 당연한 이야기겠지만 Node js 를 먼저 설치해야 합니다. Nodejs 는 한글버전도 있기 때문에 설치가 어렵지는 않습니다. Nodejs 는 Windows , macOS , Linux 등 대부분의 OS를 지원하며 설치방법은 해당 홈페이지를 참조하셔서 설치하시면 되고 여기서는 생략하도록 하겠습니다. Windows 사용자라면 그냥 홈페이지에서 설치파일을 다운로드 받아서 설치하면 됩니다. Node js Grunt-cli 설치 Nodejs 가 설치가 되었다면 그 다음으로 grunt-cli 를 설치해야 합니다. grunt-cli 는 grunt Command Line Interface 의 약자로 명령어 창...