- Grunt is a task-based command line build tool for JavaScript projects.
- 자바스크립트 용 빌드 툴
- Node설치 필요
1. Grunt 설치
- Command Line Interface(CLI)를 설치 (옵션 -g global설치)
$ npm install -g grunt-cli
- 프로젝트 폴더의 root경로에서 grunt를 설치 (옵션 --save-dev package.json 파일과 연동)
$ npm install grunt --save-dev
- package.json 파일 생성
$ npm init
- Gruntfile.js 파일 생성
- package.json과 같은 위치(프로젝트 폴더의 root경로)에 Gruntfile.js 생성. (Grunt가 실행될 때, 이 파일을 보고 어떠한 동작을 할지 결정하는데 쓰인다.)
2. grunt-uisemin란
- js, css 파일 팩키징
- usemin에서 concat, uglify, cssmin, requirejs 플러그인 실치필요
- 설치
$ npm install grunt-usemin --save-dev
2. grunt-uisemin설정
-Gruntfile.js 파일 편집
- html 파일 편집
<!-- build:css ../../../FrontEnd/home.zeus/all_css.min.css -->
<link type="text/css" rel="stylesheet" href="/css/jquery-ui-1.12.1.min.css" />
<link type="text/css" rel="stylesheet" href="/css/a.css" />
<!-- endbuild -->
<!-- build:js ../../../FrontEnd/home.zeus/all_script.min.js -->
<script type="text/javascript" src="/common/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/common/js/jquery.signalR-2.2.2.min.js"></script>
<script type="text/javascript" src="/common/js/socket.io-1.7.3.min.js"></script>
<!-- endbuild -->
- cmd에서 루트 경로로 이동후 아래 명령어 실행
grunt useminPrepare concat uglify cssmin
3. jsmin란
- javascript를 min파일 형식으로 압축
- http://crockford.com/javascript/jsmin.html 이동하여 "zip file containing an MS-DOS.exe file" 링크로 다운로드
3. jsmin 사용
jsmin < ./common/js/home.default.js > ./common/js/home.default.min.js
jsmin < ./common/js/home.function.js > ./common/js/home.function.min.js