how to grunt.js
TRANSCRIPT
How to Gruntsunghyunzz
2014.12.12 @rainist
“dependencies”: { “npm”: “^2.1.11” }
*본 슬라이드에서는 npm에 대한 설명이 없습니다. npm에 대한 설명은 링크를 참고해주세요. (http://goo.gl/MR63Kc)
Grunt is a task-based command line build tool for JavaScript projects.
Grunt is a task-based command line build tool for JavaScript projects.
$ npm install -g grunt-cli
$ npm install grunt --save-dev
Gruntfile.js
Grunt가 처리할 수 있는 동작들을 정의한다. Grunt 사용을 위한 설정 파일.
$ vim Gruntfile.js
*프로젝트 폴더의 root 경로 (package.json과 같은 위치)에 Gruntfile.js를 생성해주세요.
module.exports = function(grunt) { // project에 대한 설정 (grunt task, package 설정 등) grunt.config.init({ }); };
module.exports = function(grunt) { // project에 대한 설정 (grunt task, package 설정 등) grunt.config.init({ // project의 meta data(name, version 등)를 읽는다. pkg: grunt.file.readJSON('package.json') }); };
$ npm install grunt-contrib-uglify --save-dev
* js를 uglify(compress, 압축) 하는 grunt task를 제공하는 플러그인
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']); };
$ grunt
*grunt [task]로 grunt를 실행시킨다. task를 따로 지정하지 않으면 default로 등록된 task가 실행된다.
/*! 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
$ npm install grunt-contrib-concat --save-dev
* 여러 js 파일들을 모두 하나로 모아주는 grunt task를 제공하는 플러그인
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']); };
$ npm install grunt-contrib-watch --save-dev
* 원하는 파일이 변경 되었을 때, 등록된 task를 자동으로 실행시키는 task를 제공하는 플러그인
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']); };
$ npm install grunt-contrib-jshint --save-dev
* js 코드 품질 관리를 도와주는 js hint를 실행시키는 task를 제공하는 플러그인
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']); };
$ npm install grunt-contrib-cssmin --save-dev
* 여러 css를 하나로 모은 후 uglify하는 task를 제공하는 플러그인
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']); };
$ npm install grunt-contrib-sass --save-dev
* sass, scss 파일을 css로 변환하는 작업(sass)을 하는 task를 제공하는 플러그인
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']); };
$ npm install grunt-uncss --save-dev
* 사용하지 않는 css selector는 모두 제외시켜 주는 task를 제공하는 플러그인 (python template류와 호환되지 않음)
지정한 html 파일에서 불러오는 모든 css와 실제로 사용되는 css selector를 비교하여 최적화에 도움을 준다.
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']); };
$ npm install grunt-contrib-imagemin —-save-dev $ npm install grunt-imageoptim --save-dev
* 두 플러그인 모두 이미지 사이즈를 줄여주는 task를 제공한다. imageoptim의 경우 OS X만 지원한다(Mac의 앱에 의존하기 때문이다). 둘의 비교는 http://goo.gl/jSX92Z를 참고하면 된다.
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']); };
$ npm install grunt-open --save-dev
* 지정한 url 혹은 파일을 브라우져에 여는 task를 제공하는 플러그인 (여러 task를 모두 마친 후, 자동으로 브라우져를 열기 때문에 은근 유용하다)
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']); };
$ npm install grunt-newer --save-dev
* 기존의 파일이 바꼈을 경우에만 실행되도록 설정할 수 있다. 따로 설정할 필요가 없다. (option을 이용하면 캐시도 가능)
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']); };
$ 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
그 외에 알아두면 좋은 플러그인들
