[GRUNT 0.4.x] Gruntfile.js

///// GRUNT (그런트)

///// Gruntfile.js 기본 구조

module.exports = function(grunt) { 

// 불러온 플러그인을 설정

grunt.initConfig({

pkg: grunt.file.readJSON('test.jquery.json'),

jshint: {

files: ['src/**/*.js']

},

csslint: {

files: ['src/**/*.css']

}

});

  

// 사용할 플러그인을 불름

grunt.loadNpmTasks('grunt-contrib-jshint');

grunt.loadNpmTasks('grunt-contrib-csslint');

// 일련의 작업을 정의

grunt.registerTask('default', ['jshint', 'csslint']);

grunt.registerTask('hahaha', ['csslint']);

};

///// Gruntfile.js 실행

!필수! node설치, grunt-cli 글로벌설치, grunt지역설치, grunt플러그인들 지역설치

1. 해당 프로젝트로 이동

cd 프로젝트명

2. 명령 실행

- 특정 플러그인만 실행

grunt jshint    * src폴더 안에 있는 모든 JS파일 검사결과가 출력된다.

grunt csslint   * src폴더 안에 있는 모든 CSS파일 검사결과가 출력된다.

- 특정 작업 실행

grunt          * default로 정의된 작업. jshint와 csslint가 실행된다.

grunt hahaha  * hahaha로 정의된 작업, csslint가 실행된다.

///// 플러그인 추가하기 패턴

1. 해당 프로젝트로 이동

cd 프로젝트명

2. 플러그인 설치

npm install --save-dev grunt-contrib-플러그인명

3. Gruntfile.js 스크립트파일 설정 

vi Gruntfile.js

grunt.initConfig({ 

플러그인명: { 옵션 }

});

grunt.loadNpmTasks('grunt-contrib-플러그인명');

4. 명령 실행

grunt 플러그인명

///// 유용한 플러그인 (기능: 플러그인명)

HTML 불러오기: grunt-includes

HTML검사: grunt-htmlhint

CSS 검사: grunt-contrib-csslint

JS 검사: grunt-contrib-jshint

CSS 압축(.min.css): grunt-contrib-cssmin

JS 압축(.min.js): grunt-contrib-uglify

이미지 압축: grunt-contrib-imagemin

파일 합치기: grunt-contrib-concat

파일 삭제: grunt-contrib-clean

파일 복사: grunt-contrib-copy

최근 수정 파일만 Task수행: grunt-newer

변경된 파일 감시: grunt-contrib-watch

웹서버 가동: grunt-contrib-connect

Grunt 플러그인 자동로드: load-grunt-Tasks

///// 참고

★★★ demun님의 문서 가이드: https://github.com/demun/demun.github.com/wiki/01_00_grunt_guide

grunt-contrib-connect: http://blog.outsider.ne.kr/1048

플러그인 로드: http://tmondev.blog.me/220435888138