Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Grunt

338 views

Published on

Grunt에 대한 설명과 사용법에 대한 내용입니다. 개인적인 학습을 위해 정리하였습니다.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Grunt

  1. 1. Grunt 란?
  2. 2. 사전적의미 1. Grunt 란?
  3. 3. 자바스크립트 프로젝트를 위한 task 기반의 커맨드 라인 빌드 툴 1. Grunt 란? 1) task란 사용자가 정의한 모든 단위의 작업을 뜻함2) js 파일들 합치기, js 파일 압축하기, css 파일 압축하기, 이미지 최적화 시키기 등 ex) 포토샵의 action으로 생각하면 됩니다. 포토샵에서 반복작업(크기 변경->자르기->저장)등을 action에 지정하고 자동화 시키는 것과 같습니다. 3)
  4. 4. Grunt를 왜 사용하는가?
  5. 5. Grunt의 사용 목적은 자동화를 위해서 입니다. 우리가 해야할 반복 작업을 줄여줍니다. 2. Grunt를 왜 사용하는가? minification, compilation, unit testing, linting 등의 작업이 여기에 속합니다. 일단 설정을 하고 나면, Task Runner가 우리들의 작업을 대신 해줍니다.
  6. 6. Grunt 사용방법
  7. 7. 1) nodeJS 설치 3. Grunt 사용방법 http://nodejs.org
  8. 8. 2) Grunt CLI(Commend Line Interface) 설치 3. Grunt 사용방법 설치는 npm(Node Packaged Modules)을 통해서 할 수 있습니다. 다음과 같은 명령어를 입력합니다. 여기서 –g는 글로벌을 뜻하며 grunt-cli를 콘솔 어디서나 사용할 수 있습니다. > npm install -g grunt-cli 3) Grunt 설치 프로젝트 폴더의 root경로에서 grunt를 설치합니다. --save-dev로 설치 를 진행하면 grunt 설치와 동시에 다음단계에서 생성할 package.json 파일과 연동시켜주며, 파일 내부의 devDependencies항목에 설치 대상 (여기서는 grunt)을 자동으로 추가해 줍니다. > npm install grunt --save-dev
  9. 9. 4) package.json 생성 3. Grunt 사용방법 아래의 command line 을 통해 package.json 파일이 생성됨을 확인 합니다. 과 정중에 특별히 기재할 사항이 없다면 계속 enter를 쳐서 넘겨도 무방합니다. (자 동적으로 해당 프로젝트의 정보를 입력해줌) > npm init package.json { "name": "grunt", "version": "0.0.0", "main": "index.js", "dependencies": { "grunt": "^0.4.5", "grunt-contrib-concat": "^0.5.1", "grunt-contrib-uglify": "^0.8.0" }, "devDependencies": { "grunt-contrib-concat": "^0.5.1“ // grunt가 최신 버전으로 설치됨을 확인 }, "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "ISC" }
  10. 10. 5) Gruntfile.js 생성 3. Grunt 사용방법 package.json과 같은 위치(프로젝트 폴더의 root경로)에 Gruntfile.js를 생성합 니다. 이 파일에서 task를 관리 할 수 있습니다. module.exports = function(grunt) { grunt.initConfig({ }); grunt.registerTask(‘default', []); } 6) 실행 아래의 커맨드로 실행시켜 서 Done, without errors. 라는 문자열이 보이면 성 공 입니다. > grunt
  11. 11. 자주사용하는 플러그인
  12. 12. 1) grunt-contrib-concat 4. 자주사용하는 플러그인 grunt-contrib-concat은 여러 파일(js, css등)을 하나로 합쳐주는 모듈입니다. > npm install grunt-contrib-concat --save Gruntfile.js module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-concat'); grunt.initConfig({ concat: { dev: { src: ['js/src/*.js'], dest: 'js/application.js' } } }); grunt.registerTask(‘dev', ['concat:dev']); } > grunt dev
  13. 13. 2) Uglify 4. 자주사용하는 플러그인 grunt-contrib-uglify은 JS를 압축해주는 모듈입니다. > npm install grunt-contrib-uglify --save-dev Gruntfile.js module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.initConfig({ uglify:{ options: { mangle:true, // 변수명과 함수명의 변형을 막는다 compress:{ drop_console:false // 출력문 제거 }, beautify:false, // 코드의 syntax 유지 preserveComments : false // 모든 주석 제거 } dist: { src:'js/applications.js', dest:'asset/js/app.min.js' } } }); grunt.registerTask('default', ['uglify:dist']); }
  14. 14. 3) cssmin 4. 자주사용하는 플러그인 grunt-contrib-cssmin은 css를 압축해주는 모듈입니다. > npm install grunt-contrib-cssmin --save-dev Gruntfile.js module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-cssmin '); grunt.initConfig({ cssmin:{ minify: { expand:true, cwd:"css", // 압축할 파일이 들어있는 경로 src:['*.css'], // 압축할 파일들 dest:'asset/css', // 압축완료된 파일이 들어갈 경로 ext:'.min.css‘ // 압축완료된 파일의 확장자 } } }); grunt.registerTask('default', [‘cssmin']); }
  15. 15. 그 외의 플러그인
  16. 16. 5. 그 외의 플러그인 그 외에도 많이 사용하는 플러그인들은 아래와 같습니다. http://gruntjs.com/plugins contrib-watch : 실시간으로 코드와 브라우져를 동기화 시켜주는 모듈 contrib-clean : 필요없는 폴더와 파일을 삭제하는 모듈 contrib-sass : sass를 빌드해주는 모듈 contrib-less : less를 빌드해주는 모듈 contrib-imagemin : 이미지 최적화 모듈 contrib-jshint : 자바스크립트의 오류를 잡아주는 모듈 다른 플러그인들을 사용하고 싶다면 아래 주소에서 검색해서 필요한 플러그인을 사용하면 됩니다.

×