일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
- Pattern
- framework
- Numpy
- db
- centos
- Python
- javascript
- DeepLearning
- Spring
- git
- Analysis
- error
- LIST
- Server
- Github
- 함수
- java
- interface
- Web
- data
- mariaDB
- SSH
- learning
- Linux
- ai
- 인공지능
- 자바
- mysql
- Deep
- Security
- Today
- Total
PostIT
[Grunt/Mac] 맥에 Grunt 설치하기 본문
# Mac Sierra에 Grunt Install
## 1. 배경
최근 채용사이트를 보니 퍼블리셔 요구사항에서 Grunt를 사용하고 있었습니다. 그러한 참에 Grunt가 뭔가 싶어서 알아보게 되었고 설치해서 테스트까지 해보는 것을 이번 목표로 잡았습니다. 그래서, 이번 장에서 그런트에 대해서 알아보며, 설치하는 과정을 적어놓겠습니다. 자세한 내용이나, 원리 등에 대한것은 차차 알아보도록 하겠습니다.
먼저 공식 홈페이지 : https://gruntjs.com/getting-started
## 2. 내용
### 어떻게 쓰지?
환경설정
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 )
참조
http://nuli.navercorp.com/sharing/blog/post/1132682
'Tool > Etc' 카테고리의 다른 글
[Server/SVN] SVN 구축하기 (0) | 2016.12.05 |
---|---|
[jenkins/mac]homebrew jenkins 설치 - 퍼옴 (0) | 2016.11.30 |