1.
How to Grunt
sunghyunzz
2014.12.12
@rainist

2.
“dependencies”: {
“npm”: “^2.1.11”
}
*본 슬라이드에서는 npm에 대한 설명이 없습니다.
npm에 대한 설명은 링크를 참고해주세요. (http://
goo.gl/MR63Kc)

3.
Grunt is a task-based
command line build tool for
JavaScript projects.

4.
Grunt is a task-based
command line build tool for
JavaScript projects.

5.
$ npm install -g grunt-cli

6.
$ npm install grunt --save-dev

7.
Gruntfile.js
Grunt가 처리할 수 있는 동작들을 정의한다. Grunt
사용을 위한 설정 파일.

8.
$ vim Gruntfile.js
*프로젝트 폴더의 root 경로 (package.json과 같은
위치)에 Gruntfile.js를 생성해주세요.

9.
module.exports = function(grunt) {
// project에 대한 설정 (grunt task, package 설정 등)
grunt.config.init({
});
};

10.
module.exports = function(grunt) {
// project에 대한 설정 (grunt task, package 설정 등)
grunt.config.init({
// project의 meta data(name, version 등)를 읽는다.
pkg: grunt.file.readJSON('package.json')
});
};

11.
$ npm install grunt-contrib-uglify --save-dev
* js를 uglify(compress, 압축) 하는 grunt task를
제공하는 플러그인

12.
module.exports = function(grunt) {
// project에 대한 설정 (grunt task, package 설정 등)
grunt.config.init({
// project의 meta data(name, version 등)를 읽는다.
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
// 결과(dest) 파일에 지정한 배너를 삽입한다. (상단의 주석이라 생각하면 된다)
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n'
},
build: {
// template을 통해 pkg의 정보를 활용할 수 있다.
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// uglify task를 지원하는 플러그인을 불러온다.
grunt.loadNpmTasks('grunt-contrib-uglify');
// grunt.config.init에서 설정한 uglify task를 기본 task로 등록한다.
grunt.registerTask('default', ['uglify']);
};

13.
$ grunt
*grunt [task]로 grunt를 실행시킨다. task를 따로
지정하지 않으면 default로 등록된 task가 실행된다.

14.
/*! rainist-grunt 2014-12-12 */
var a=10,b=20,c=a+b;console.log(a+b+c);
rainist-grunt/build/rainist-grunt.min.js

15.
$ npm install grunt-contrib-concat --save-dev
* 여러 js 파일들을 모두 하나로 모아주는 grunt task
를 제공하는 플러그인

16.
module.exports = function(grunt) {
// project에 대한 설정 (grunt task, package 설정 등)
grunt.config.init({
// project의 meta data(name, version 등)를 읽는다.
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/tttt.js', 'src/tttt2.js'],
dest: 'build/<%= pkg.name %>.js'
}
},
uglify: {
options: {
// 결과(dest) 파일에 지정한 배너를 삽입한다. (상단의 주석이라 생각하면 된다)
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n'
},
build: {
// template을 통해 pkg의 정보를 활용할 수 있다.
src: '<%= concat.dist.dest %>',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// uglify task를 지원하는 플러그인을 불러온다.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
// grunt.config.init에서 설정한 uglify task를 기본 task로 등록한다.
grunt.registerTask('default', ['concat', 'uglify']);
};

17.
$ npm install grunt-contrib-watch --save-dev
* 원하는 파일이 변경 되었을 때, 등록된 task를 자
동으로 실행시키는 task를 제공하는 플러그인

18.
module.exports = function(grunt) {
// project에 대한 설정 (grunt task, package 설정 등)
grunt.config.init({
// project의 meta data(name, version 등)를 읽는다.
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/*.js'],
dest: 'build/<%= pkg.name %>.js'
}
},
uglify: {
options: {
// 결과(dest) 파일에 지정한 배너를 삽입한다. (상단의 주석이라 생각하면 된다)
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n'
},
build: {
// template을 통해 pkg의 정보를 활용할 수 있다.
src: '<%= concat.dist.dest %>',
dest: 'build/<%= pkg.name %>.min.js'
}
},
watch: {
files: ['<%= concat.dist.src %>'],
tasks: ['concat', 'uglify']
}
});
// uglify task를 지원하는 플러그인을 불러온다.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
// grunt.config.init에서 설정한 uglify task를 기본 task로 등록한다.
grunt.registerTask('default', ['watch']);
};

19.
$ npm install grunt-contrib-jshint --save-dev
* js 코드 품질 관리를 도와주는 js hint를 실행시키
는 task를 제공하는 플러그인

20.
module.exports = function(grunt) {
grunt.config.init({
pkg: grunt.file.readJSON('package.json'),
jshint: {
files: ['Gruntfile.js', 'src/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default', ['watch']);
};

21.
$ npm install grunt-contrib-cssmin --save-dev
* 여러 css를 하나로 모은 후 uglify하는 task를 제공
하는 플러그인

22.
module.exports = function(grunt) {
grunt.config.init({
pkg: grunt.file.readJSON('package.json'),
cssmin: {
combine: {
files: {
'build/<%= pkg.name %>.min.css': ['css/*.css']
}
}
},
watch: {
files: ['css/*.css'],
tasks: ['cssmin']
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['watch']);
};

23.
$ npm install grunt-contrib-sass --save-dev
* sass, scss 파일을 css로 변환하는 작업(sass)을 하
는 task를 제공하는 플러그인

24.
module.exports = function(grunt) {
grunt.config.init({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
'css/style.css' : 'sass/style.sass',
'css/main.css' : 'sass/main.scss'
}
}
},
cssmin: {
combine: {
files: {
'build/<%= pkg.name %>.min.css': ['css/*.css']
}
}
},
watch: {
files: ['sass/*.sass', 'sass/*.scss'],
tasks: ['sass', 'cssmin']
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['watch']);
};

25.
$ npm install grunt-uncss --save-dev
* 사용하지 않는 css selector는 모두 제외시켜 주는
task를 제공하는 플러그인 (python template류와 호환되지 않음)

26.
지정한 html 파일에서 불러오는 모든 css와 실제로 사용되는
css selector를 비교하여 최적화에 도움을 준다.

27.
module.exports = function(grunt) {
grunt.config.init({
pkg: grunt.file.readJSON('package.json'),
uncss: {
dist: {
files: {
'build/result.css': [
'apps/templates/**/*.html',
‘apps/templates/*.html'
]
}
}
}
});
grunt.loadNpmTasks('grunt-uncss');
grunt.registerTask('default', ['uncss']);
};

28.
$ npm install grunt-contrib-imagemin —-save-dev
$ npm install grunt-imageoptim --save-dev
* 두 플러그인 모두 이미지 사이즈를 줄여주는 task를 제공한다.
imageoptim의 경우 OS X만 지원한다(Mac의 앱에 의존하기 때문이
다). 둘의 비교는 http://goo.gl/jSX92Z를 참고하면 된다.

29.
module.exports = function(grunt) {
grunt.config.init({
pkg: grunt.file.readJSON('package.json'),
imageoptim: {
dist: {
src: ['apps/static/images/**']
}
}
});
grunt.loadNpmTasks('grunt-imageoptim');
grunt.registerTask('image', ['imageoptim']);
};

30.
$ npm install grunt-open --save-dev
* 지정한 url 혹은 파일을 브라우져에 여는 task를
제공하는 플러그인 (여러 task를 모두 마친 후, 자동으로 브라우
져를 열기 때문에 은근 유용하다)

31.
module.exports = function(grunt) {
grunt.config.init({
pkg: grunt.file.readJSON('package.json'),
cssmin: {
combine: {
files: {
'apps/static/style.min.css': [
‘components/css/*.css',
‘components/js/woothemes-FlexSlider-06b12f8/*.css',
‘components/js/prettyPhoto_3.1.5/*.css'
]
}
}
},
open: {
dev: {
path: 'http://127.0.0.1:5000',
app: 'Google Chrome'
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-open');
grunt.registerTask('default', [‘cssmin:combine’, 'open']);
};

32.
$ npm install grunt-newer --save-dev
* 기존의 파일이 바꼈을 경우에만 실행되도록 설정
할 수 있다. 따로 설정할 필요가 없다. (option을 이
용하면 캐시도 가능)

33.
module.exports = function(grunt) {
grunt.config.init({
pkg: grunt.file.readJSON('package.json'),
cssmin: {
combine: {
files: {
'apps/static/style.min.css': [
‘components/css/*.css',
‘components/js/woothemes-FlexSlider-06b12f8/*.css',
‘components/js/prettyPhoto_3.1.5/*.css'
]
}
}
},
open: {
dev: {
path: 'http://127.0.0.1:5000',
app: 'Google Chrome'
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-open');
grunt.loadNpmTasks(‘grunt-newer');
grunt.registerTask('default', [‘newer:cssmin:combine’, 'open']);
};

34.
그 외에 알아두면 좋은 플러그인들
$ npm install grunt-requirejs --save-dev
$ npm install grunt-contrib-htmlmin --save-dev
$ npm install grunt-inline-css --save-dev
$ npm install grunt-react --save-dev
$ npm install grunt-ngmin --save-dev
$ npm install grunt-concurrent --save-dev

35.
Rainist, For Making a Better Decision
http://www.rainist.com