Grunt 8.최적화
- 퍼블리셔/Grunt
- 2015. 6. 30. 07:00
8.최적화
newer , concurrent , time-grunt , load-grunt-tasks 좀더 쉽고, 체계적으로 작업하기 위한 최적화 과정의 예제와 방법입니다.
newer
newer 모듈은 변경된 파일이나 부분만을 감지하는 모듈입니다.
감시하는 모듈인 watch 에 주로 사용하며, 변경된 부분만 다시 리로드할때 주로 사용합니다.
Gruntfile.js 에서 사용하는 예제는 아래와 같습니다.
watch: {
options: {livereload: true},
gruntfile: {
files: ['Gruntfile.js'],
tasks: ['newer:jshint:grunt']
},
}
- 설명
watch 에 사용된 예제로 Gruntfile.js 을 대상으로 jshint 작업에 grunt 작업부분을 변경된 부분만 감지합니다.
- 관련 문서를 참고세요.
concurrent
concurrent 모듈은 병렬로 작업을 실행하게끔 해줍니다.
그런트는 일반적으로 직렬로 작업을 처리합니다. 1번작업이 끝나면 2번작업을 하고, 2번 작업이 끝나면 3번 작업을 하는 식입니다.
하지만 concurrent 모듈은 관련성이 없는 작업을 동시에 실행하게끔 해줍니다.
Gruntfile.js 에서 사용하는 예제는 아래와 같습니다.
concurrent: {
options: {
logConcurrentOutput: true
},
dist: [
'html',
'css',
'js',
'newer:imagemin'
]
},
- 설명
여기서 사용된 예제는 모듈명이 아니라 작업명이 사용되었습니다.
예를들어 html 작업에는 htmlhint, includes 등 두개의 모듈 작업이 사용됩니다.
마찬가지로 css 작업도 여기서는 5개의 모듈이 실행이 됩니다.
이런 모듈을 병렬로 동시에 실행한다는 뜻입니다.
- 관련 문서를 참고세요.
time-grunt
time-grunt 모듈을 작업 시간이 얼마나 걸리는지 콘솔창에 보여줍니다.
작업시간을 체크함으로써 Gruntfile 파일을 좀더 수정하고 보완할 수 있습니다.
Gruntfile.js 에서 사용하는 예제는 아래와 같습니다.
// 작업시간 표시
require('time-grunt')(grunt);
- 설명
그런트 작업 모두 작업시간을 표시합니다.
- 관련 문서를 참고세요.
load-grunt-tasks
load-grunt-tasks 모듈은 자동으로 grunt 모듈을 로드합니다.
그런트는 기본적으로 아래처럼 모듈을 로드합니다. grunt-contrib-uglify 모듈 예제.
grunt.loadNpmTasks('grunt-contrib-uglify');
로드할 모듈이 많아지면 모듈이름을 모두 적어줘야 합니다. 그래서 실질적으로 아래처럼 됩니다.
grunt.loadNpmTasks('grunt-contrib-uglify');
...
...
...
...
grunt.loadNpmTasks('grunt-contrib-jshint');
하지만 load-grunt-tasks 모듈를 사용하면 간단하게 아래의 예제처럼 한줄만 사용하면 됩니다. 즉 추가적으로 모듈을 로드하지 않아도 됩니다.
Gruntfile.js 에서 사용하는 예제는 아래와 같습니다.
// 자동으로 grunt 태스크를 로드합니다. grunt.loadNpmTasks 를 생략한다.
require('load-grunt-tasks')(grunt);
- 설명
그런트에 사용되는 모든 모듈을 로드해줍니다.
- 관련 문서를 참고세요.