Grunt.js Review
-
Upload
han-jung-hyun -
Category
Technology
-
view
2.270 -
download
1
description
Transcript of Grunt.js Review
![Page 1: Grunt.js Review](https://reader033.fdocuments.net/reader033/viewer/2022061214/547d61adb4af9fac7b8b45b8/html5/thumbnails/1.jpg)
SK 플래닛한정현
SK PLANETHAN JUNG HYUN
GRUNT Review-The JavaScript Task Runner-
![Page 2: Grunt.js Review](https://reader033.fdocuments.net/reader033/viewer/2022061214/547d61adb4af9fac7b8b45b8/html5/thumbnails/2.jpg)
Grunt.js ?
JavaScript Build Tool Task 기반으로 이루어져 있으며 Command 를 통해 실행 가능 라이센스 MIT : 자유롭게 사용 가능 npm 사용 가능 javascript 가 태생인 build tool?
![Page 3: Grunt.js Review](https://reader033.fdocuments.net/reader033/viewer/2022061214/547d61adb4af9fac7b8b45b8/html5/thumbnails/3.jpg)
Grunt 의 장점들 -1
Grunt 는 방대한 생태계 보유지속적인 업데이트 ..
Config 및 Task 만 가져다 사용하면 개발자는 자동으로 여러가지 Task 들을 힘들이지 않고 수행 가능한다 . ( ? ) ( 대규모프로젝트의 경 직접 만들어사용해야함 )
![Page 5: Grunt.js Review](https://reader033.fdocuments.net/reader033/viewer/2022061214/547d61adb4af9fac7b8b45b8/html5/thumbnails/5.jpg)
Grunt : Github Project..
https://github.com/gruntjs/grunt Grunt 자체는 방대하지 않음 관련된 plug-in 들이 많음
https://github.com/gruntjs public Rep 50 개 / 업데이트 속도 빠름 ( 단점일수도 .)
https://npmjs.org/package/grunt-contrib grunt-contrib project 로 검증된 plug-in 개발
![Page 6: Grunt.js Review](https://reader033.fdocuments.net/reader033/viewer/2022061214/547d61adb4af9fac7b8b45b8/html5/thumbnails/6.jpg)
Grunt.js Release history
Grunt 0.4.0 released : 2013/2/180.4 버전의 grunt 사용방법
>> npm uninstall –g grunt ( 이전에 grunt 를 설치했었다면 )
>>npm install –g grunt-cli ( 필수 ) 0.3 버전과 api 가 많이 달라졌으므로 주의해서 사용 필요 !
![Page 7: Grunt.js Review](https://reader033.fdocuments.net/reader033/viewer/2022061214/547d61adb4af9fac7b8b45b8/html5/thumbnails/7.jpg)
Grunt Build 에 필요한것들
Grunt 를 사용하기 위해서는 다음 2 가지 파일이 필요 1.package.json
>npm init 위 코드로 기본적인 package.json 생성후 필요에 따라 확장 npm module 특성상 dependencies / devDependencies 에
필요한 모듈 추가 ( 차이점 : http://howtonode.org/managing-module-dependencies )
2.Gruntfile.js : v0.3 에서는 grunt.js 가 grunt 파일이 된다 .
![Page 8: Grunt.js Review](https://reader033.fdocuments.net/reader033/viewer/2022061214/547d61adb4af9fac7b8b45b8/html5/thumbnails/8.jpg)
Gruntfile.js Programming Guide-1
Wrapper function 안에 선언
Project configuration
Grunt Plugin Loading
![Page 9: Grunt.js Review](https://reader033.fdocuments.net/reader033/viewer/2022061214/547d61adb4af9fac7b8b45b8/html5/thumbnails/9.jpg)
Gruntfile.js Programming Guide-2
Grunt Task
![Page 10: Grunt.js Review](https://reader033.fdocuments.net/reader033/viewer/2022061214/547d61adb4af9fac7b8b45b8/html5/thumbnails/10.jpg)
Grunt sample code Strat Guide
Command 창에서 실행 >> git clone git://github.com/gruntjs/grunt.git >> cd grunt >> sudo npm install >> sudo npm install –g grunt-cli >> grunt
![Page 11: Grunt.js Review](https://reader033.fdocuments.net/reader033/viewer/2022061214/547d61adb4af9fac7b8b45b8/html5/thumbnails/11.jpg)
Gruntfile.js 제작 방법
![Page 12: Grunt.js Review](https://reader033.fdocuments.net/reader033/viewer/2022061214/547d61adb4af9fac7b8b45b8/html5/thumbnails/12.jpg)
Grunt 소스 분석
Node-inspector 로 분석 >> npm install –g node-inspector >> node –debug-brk grunt.js >> node inspector & ( 새창에서 ) http://127.0.0.1:8080/debug?port=5858
접속
![Page 13: Grunt.js Review](https://reader033.fdocuments.net/reader033/viewer/2022061214/547d61adb4af9fac7b8b45b8/html5/thumbnails/13.jpg)
감사합니다 .