5부 Grunt(그런트) 추가모듈(watch , connect , clean , copy , imagemin)
- 퍼블리셔/Grunt
- 2014. 12. 26. 17:41
추가적인 모듈
여기서 살펴볼 추가적인 모듈은 watch
, connect
, clean
, copy
, imagemin
입니다.
이 모듈들은 그런트로 환경구성하는데 있어 필요한 모듈들입니다.
하나 하나 살펴보겠습니다.
watch
와치는 아주 유명합니다. 실시간으로 코드와 브라우져를 동기화시켜주는 모듈입니다.
예를들어 에디터에서 코드를 수정하면 브라우져에서 수정한 코드를 바로 보여줍니다.
watch 는 livereload
를 이용합니다.
livereload 홈페이지 - http://livereload.com/
watch 저장소 - https://github.com/gruntjs/grunt-contrib-watch
watch 는 수정이 될 수 있는 파일과 모듈들을 연결시켜줍니다.
그래야 해당 파일들이 수정될때 해당 모듈들이 작동하는 방식입니다.
옵션을 보면, bower
, gruntfile
는 js 파일을,
js
는 자바스크립트 파일을,
less
는 less 파일을 css 로 빌드해주는 역활을 하고,
html
, jade
, 는 각각 html 로 빌드해주며,
img
는 이미지를 저장하면 자동으로 목적지폴더에 복사해줍니다.
이렇듯 각 모듈들을 연결해서 소스코드 폴더를 실시간으로 동기화를 시켜줍니다.
watch: {
bower: {
files: ['bower.json'],
tasks: ['wiredep']
},
gruntfile: {
files: ['Gruntfile.js'],
tasks: ['newer:jshint:grunt'],
options: {
livereload: true
}
},
js: {
files: [
'<%= config.app %>/js/**/*.js'
// '<%= config.app %>/js/common.js'
],
tasks: ['newer:jshint:docs', 'concat:docs', 'uglify:docs'],
options: {
livereload: true
}
},
less: {
files: ['<%= config.app %>/less/**/*.less'],
tasks: ['less', 'autoprefixer', 'csscomb', 'csslint', 'cssmin']
},
html: {
files: ['<%= config.app %>/html/**/*.html'],
tasks: ['includes'],
options: {
livereload: true,
}
},
jade: {
files: ['<%= config.app %>/jade/**/*.jade'],
tasks: ['jade'],
options: {
livereload: true,
}
},
img: {
files: ['<%= config.app %>/images/**/*.{gif,jpeg,jpg,png}'],
tasks: ['newer:imagemin'],
options: {
livereload: true,
}
}
}
connect
connect
는 서버를 구성해주는 모듈입니다.
connect 저장소 - https://github.com/gruntjs/grunt-contrib-connect
옵션을 보면 포트와, 호스트네임을 로컬호스트로하고 라이브리로드를 이용한다.
또한가지 open
을 이용해서 해당 html 파일을 자동으로 열수 있다.
이 html 이 아니더라도 일단 서버를 열게되면 모든 html 을 연결할수있고,
수정도 할 수있다. 이때 watch
와 같이 연결되면, 모든 파일을 실시간으로 수정할 수
있으며, 수정하면 바로 브라우져에서 로드되어 볼 수 있게 된다.
connect: {
server: {
options: {
port: 9000,
hostname: 'localhost',
livereload: 35729,
// keepalive: true,
base: '<%= config.dist %>',
open: 'http://<%= connect.server.options.hostname %>:<%= connect.server.options.port %>/test-html/index.html'
}
}
}
clean
clean
모듈은 필요없는 폴더와 파일을 삭제하는 모듈이다.
옵션을 보면 소스코드폴더의 css 폴더와 DevCode 폴더와 목적지폴더인 빌드폴더를 삭제한다
한가지 목적지폴더에서 images
,fonts
폴더는 삭제하지 않는다.
이것은 제가 사용해보니 clean
을 자주 사용하는데 구지 이미지와 폰트를
삭제할 필요가 없는것 같아 이렇게 설정했습니다.
clean: {
dist: {
files: [{
dot: true,
nonull: true,
src: [
'<%= config.app %>/css',
'<%= config.devcode %>/**/*.*',
'<%= config.dist %>/**/*.*',
'!<%= config.dist %>/images/**/*.*',
'!<%= config.dist %>/fonts/**/*.*'
]
}]
},
}
copy
copy
모듈은 폴더나 파일을 복사해주는 모듈이다.
copy 저장소 - https://github.com/gruntjs/grunt-contrib-copy
옵션을 보면 크게 build 와 dev 로 나뉜다.
build
는 차후 개발자들이 참고하라고 만든 DevCode 폴더를 만드는 과정이다.
이게 필요없다면 사용하지 않아도 무방하다.(개인적으로 필요하다 생각되서 추가한것임)
dev
를 보면 나눔고딕을 사용할때 사용하려고 만들어놓은 fonts
폴더와
bower
로 설치되었던 플러그인들을 목적지폴더에 plugins
폴더에 복사한다.
필요에 의해 bower
설치한 플러그인들은 여기서 복사를 해줘야 사용할 수 있다.
copy: {
build: {
files: [
{
expand: true,
// flatten: true,
// filter: 'isFile',
cwd: '<%= config.app %>',
src: ['**','!grunt/**','!less/**'],
dest: '<%= config.devcode %>'
}
]
},
dev: {
files: [
// fonts
{
expand: true,
cwd: '<%= config.bsless %>/fonts/',
src: '**',
dest: '<%= config.dist %>/fonts/'
},
// jquery
{
nonull: true,
src: '<%= config.bower %>/jquery/jquery.min.js',
dest: '<%= config.dist %>/js/lib/jquery.min.js'
},
.....
// bootstrap
{
expand: true,
cwd: '<%= config.bower %>/bootstrap/dist/',
src: ['**','!npm.js'],
dest: '<%= config.dist %>/plugins/bootstrap/'
}
]
},
}
imagemin
imagemin
는 이미지 최적화 모듈이다.
imagemin 저장소 - https://github.com/gruntjs/grunt-contrib-imagemin
옵션을 보면 빌드가 완료되면 메시지를 보낸다.
다른 옵션은 소스폴더의 이미지를 목적지폴더의 이미지폴더에 최적화해서 넣는다.
imagemin: {
options: {
title: '빌드완료', // optional
message: '<%= pkg.name %> 구축을 성공적으로 완료.' //required
},
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/images/',
src: ['**/*.{png,jpeg,jpg,gif}'],
dest: '<%= config.dist %>/images/'
}]
}
}
여기까지 watch
, connect
, clean
, copy
, imagemin
에 대해서 알아봤다
그런트 작업환경 구성하기
는 여기까지의 모듈로 충분이 사용가능하다.
나머지 모듈은 Grunt
를 좀더 최적화하거나 사용자가 본인의 환경에 맞게
수정하는 것이다.