SlideShare a Scribd company logo
1 of 13
GRUNT Review
-The JavaScript Task Runner-

            SK플래닛
              한정현
           SK PLANET
         HAN JUNG HYUN
Grunt.js ?

 JavaScript Build Tool
   Task 기반으로 이루어져 있으며 Command 를 통해 실행 가능

   라이센스 MIT : 자유롭게 사용 가능

   npm 사용 가능

   javascript가 태생인 build tool?
Grunt의 장점들-1

       Config 및 Task만 가져다
       사용하면 개발자는 자동으로
       여러가지 Task들을 힘들이지
       않고 수행 가능한다. ( ? )
       ( 대규모프로젝트의 경 직접
       만들어사용해야함 )



       Grunt는 방대한 생태계 보유
       지속적인 업데이트 ..
Grunt 장점들-2

 다양한 Project 에서 사용중
 http://gruntjs.com/who-uses-grunt
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개발
Grunt.js Release history

 Grunt 0.4.0 released : 2013/2/18
 0.4버전의 grunt 사용방법
   >> npm uninstall –g grunt ( 이전에 grunt를 설치했었다면)

   >>npm install –g grunt-cli (필수)

 0.3버전과 api가 많이 달라졌으므로 주의해서 사용 필요!
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 파일이 된다.
Gruntfile.js Programming Guide-1

 Wrapper function 안에 선언




 Project configuration




 Grunt Plugin Loading
Gruntfile.js Programming Guide-2

 Grunt Task
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
Gruntfile.js 제작 방법
Grunt 소스 분석

 Node-inspector로 분석
 >> npm install –g node-inspector
 >> node –debug-brk grunt.js
 >> node inspector & (새창에서)
 http://127.0.0.1:8080/debug?port=5858 접속
감사합니다.

More Related Content

What's hot

What's hot (18)

Welcome to Android Studio
Welcome to Android StudioWelcome to Android Studio
Welcome to Android Studio
 
Python을 이용한 Linux Desktop Application
Python을 이용한 Linux Desktop ApplicationPython을 이용한 Linux Desktop Application
Python을 이용한 Linux Desktop Application
 
Git workflow
Git workflowGit workflow
Git workflow
 
알아두면 쓸모있는 깃허브 1
알아두면 쓸모있는 깃허브 1알아두면 쓸모있는 깃허브 1
알아두면 쓸모있는 깃허브 1
 
디자이너를위한Git #1/2
디자이너를위한Git #1/2디자이너를위한Git #1/2
디자이너를위한Git #1/2
 
PyCon 2017 예제로 살펴보는 PyQt
PyCon 2017 예제로 살펴보는 PyQtPyCon 2017 예제로 살펴보는 PyQt
PyCon 2017 예제로 살펴보는 PyQt
 
git-workflow
git-workflowgit-workflow
git-workflow
 
디자이너 버전관리
디자이너 버전관리디자이너 버전관리
디자이너 버전관리
 
오픈소스 개발을 위한 Git 사용법 실습
오픈소스 개발을 위한 Git 사용법 실습오픈소스 개발을 위한 Git 사용법 실습
오픈소스 개발을 위한 Git 사용법 실습
 
Overview of the Flatpak
Overview of the FlatpakOverview of the Flatpak
Overview of the Flatpak
 
Git 과 GitHub 를 이용한 버전관리와 협업 - 2주차B - 가지치기와 꼬리표 달기
Git 과 GitHub 를 이용한 버전관리와 협업 - 2주차B - 가지치기와 꼬리표 달기Git 과 GitHub 를 이용한 버전관리와 협업 - 2주차B - 가지치기와 꼬리표 달기
Git 과 GitHub 를 이용한 버전관리와 협업 - 2주차B - 가지치기와 꼬리표 달기
 
소셜 코딩 GitHub & branch & branch strategy
소셜 코딩 GitHub & branch & branch strategy소셜 코딩 GitHub & branch & branch strategy
소셜 코딩 GitHub & branch & branch strategy
 
Angular Library
Angular LibraryAngular Library
Angular Library
 
초보자를 위한 Git & GitHub
초보자를 위한 Git & GitHub초보자를 위한 Git & GitHub
초보자를 위한 Git & GitHub
 
팀 개발을 위한 GitHub 사용법
팀 개발을 위한 GitHub 사용법팀 개발을 위한 GitHub 사용법
팀 개발을 위한 GitHub 사용법
 
[2019] '깃'깔나는 Git 워크플로 알아보기
[2019] '깃'깔나는 Git 워크플로 알아보기[2019] '깃'깔나는 Git 워크플로 알아보기
[2019] '깃'깔나는 Git 워크플로 알아보기
 
강좌 개요
강좌 개요강좌 개요
강좌 개요
 
OROCABOY3 제작기
OROCABOY3 제작기OROCABOY3 제작기
OROCABOY3 제작기
 

Similar to Grunt.js Review

[231]나는서버를썰터이니너는개발만하여라 양지욱
[231]나는서버를썰터이니너는개발만하여라 양지욱[231]나는서버를썰터이니너는개발만하여라 양지욱
[231]나는서버를썰터이니너는개발만하여라 양지욱
NAVER D2
 
NDC13: DVCS와 코드리뷰 그리고 자동화를 통한 쾌속 개발
NDC13: DVCS와 코드리뷰 그리고 자동화를 통한 쾌속 개발NDC13: DVCS와 코드리뷰 그리고 자동화를 통한 쾌속 개발
NDC13: DVCS와 코드리뷰 그리고 자동화를 통한 쾌속 개발
Jinuk Kim
 
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman
Jae Sung Park
 
Windows에서 go+eclipse 개발환경 구축
Windows에서 go+eclipse 개발환경 구축Windows에서 go+eclipse 개발환경 구축
Windows에서 go+eclipse 개발환경 구축
Jaehoon Kim
 

Similar to Grunt.js Review (20)

Grunt 사용법 간단정리
Grunt 사용법 간단정리Grunt 사용법 간단정리
Grunt 사용법 간단정리
 
NDC2018 안드로이드+유니티 네이티브 프로파일링 삽질기
NDC2018 안드로이드+유니티 네이티브 프로파일링 삽질기NDC2018 안드로이드+유니티 네이티브 프로파일링 삽질기
NDC2018 안드로이드+유니티 네이티브 프로파일링 삽질기
 
Single-page Application
Single-page ApplicationSingle-page Application
Single-page Application
 
AngularJS In Production
AngularJS In ProductionAngularJS In Production
AngularJS In Production
 
Introduction to node.js, npm and grunt
Introduction to node.js, npm and gruntIntroduction to node.js, npm and grunt
Introduction to node.js, npm and grunt
 
Nutch Homepage Search Engine
Nutch Homepage Search EngineNutch Homepage Search Engine
Nutch Homepage Search Engine
 
How to Grunt.js
How to Grunt.jsHow to Grunt.js
How to Grunt.js
 
flutter
flutterflutter
flutter
 
[231]나는서버를썰터이니너는개발만하여라 양지욱
[231]나는서버를썰터이니너는개발만하여라 양지욱[231]나는서버를썰터이니너는개발만하여라 양지욱
[231]나는서버를썰터이니너는개발만하여라 양지욱
 
NDC13: DVCS와 코드리뷰 그리고 자동화를 통한 쾌속 개발
NDC13: DVCS와 코드리뷰 그리고 자동화를 통한 쾌속 개발NDC13: DVCS와 코드리뷰 그리고 자동화를 통한 쾌속 개발
NDC13: DVCS와 코드리뷰 그리고 자동화를 통한 쾌속 개발
 
라즈베리파이로 슬랙 봇 개발하기
라즈베리파이로 슬랙 봇 개발하기라즈베리파이로 슬랙 봇 개발하기
라즈베리파이로 슬랙 봇 개발하기
 
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman
 
TestExplorer 소개 - Android application GUI testing tool
TestExplorer 소개 - Android application GUI testing toolTestExplorer 소개 - Android application GUI testing tool
TestExplorer 소개 - Android application GUI testing tool
 
TestExplorer 소개 - Android application GUI testing tool
TestExplorer 소개 - Android application GUI testing toolTestExplorer 소개 - Android application GUI testing tool
TestExplorer 소개 - Android application GUI testing tool
 
[오픈소스컨설팅]Gradle Basic - How to use Gradle in Java Project
[오픈소스컨설팅]Gradle Basic - How to use Gradle in Java Project[오픈소스컨설팅]Gradle Basic - How to use Gradle in Java Project
[오픈소스컨설팅]Gradle Basic - How to use Gradle in Java Project
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
 
Windows에서 go+eclipse 개발환경 구축
Windows에서 go+eclipse 개발환경 구축Windows에서 go+eclipse 개발환경 구축
Windows에서 go+eclipse 개발환경 구축
 
GDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's NoteGDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's Note
 
강분도 - 공개SW개발과 우분투 (2010Y10M05D)
강분도 - 공개SW개발과 우분투 (2010Y10M05D)강분도 - 공개SW개발과 우분투 (2010Y10M05D)
강분도 - 공개SW개발과 우분투 (2010Y10M05D)
 
안드로이드 플랫폼 설명
안드로이드 플랫폼 설명안드로이드 플랫폼 설명
안드로이드 플랫폼 설명
 

Grunt.js Review

  • 1. GRUNT Review -The JavaScript Task Runner- SK플래닛 한정현 SK PLANET HAN JUNG HYUN
  • 2. Grunt.js ?  JavaScript Build Tool  Task 기반으로 이루어져 있으며 Command 를 통해 실행 가능  라이센스 MIT : 자유롭게 사용 가능  npm 사용 가능  javascript가 태생인 build tool?
  • 3. Grunt의 장점들-1 Config 및 Task만 가져다 사용하면 개발자는 자동으로 여러가지 Task들을 힘들이지 않고 수행 가능한다. ( ? ) ( 대규모프로젝트의 경 직접 만들어사용해야함 ) Grunt는 방대한 생태계 보유 지속적인 업데이트 ..
  • 4. Grunt 장점들-2  다양한 Project 에서 사용중  http://gruntjs.com/who-uses-grunt
  • 5. 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개발
  • 6. Grunt.js Release history  Grunt 0.4.0 released : 2013/2/18  0.4버전의 grunt 사용방법  >> npm uninstall –g grunt ( 이전에 grunt를 설치했었다면)  >>npm install –g grunt-cli (필수)  0.3버전과 api가 많이 달라졌으므로 주의해서 사용 필요!
  • 7. 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 파일이 된다.
  • 8. Gruntfile.js Programming Guide-1  Wrapper function 안에 선언  Project configuration  Grunt Plugin Loading
  • 10. 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
  • 12. Grunt 소스 분석  Node-inspector로 분석  >> npm install –g node-inspector  >> node –debug-brk grunt.js  >> node inspector & (새창에서)  http://127.0.0.1:8080/debug?port=5858 접속