[Django]Grunt + LiveReload를 이용한 자동 테스크 환경 구축
[Django]Grunt + LiveReload를 이용한 자동 테스크 환경 구축
Grunt
를 이용하면 프론트 단계에서 필요한 다양한 테스크들을 자동화 시킬 수 있다. Grunt
중에서 grunt-contrib-connect
와 watch를 결합하면 css나 js 파일들의 변경 사항이 있을 경우, 화면을 자동으로 refresh 해준다. 하지만 grunt-contrib-connect
는 express로 local server를 띄우는 것이기 때문에 Django의 localserver와 같이 사용하기 힘들다.
따라서 Grunt
의 watch로 static 파일의 변경사항이 있을 경우, 자동으로 concat
을 시키고 Django에서 concat
를 watch를 시켜 static 파일들이 변동이 생겼을 때 자동으로 페이지를 reload 시켜주는 것을 해보고자 한다.
먼저 Grunt
를 설정해보자.(기본 npm, grunt 설치는 생략) Gruntfile.js
는 자신 입맛대로 변경하면 된다. 중요한 것은 Django가 watch 할 수 있는 static 파일만 제대로 만들어주면 된다.
$ npm install --save-dev grunt-contrib-sass grunt-contrib-concat grunt-contrib-cssmin grunt-contrib-watch grunt-contrib-uglify
// Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
sass: {
dist: {
files: {
...
}
}
},
concat: {
js: {
src: [
'static/app/js/**/*.js'
],
dest: 'public/js/app.js'
},
vendor_js: {
src: [
'static/vendor/js/**/*.js'
],
dest: 'public/js/vendor.js'
},
css: {
src: [
'static/app/css/**/*.css'
],
dest: 'public/css/styles.css'
},
vendor_css: {
src: [
'static/vendor/css/**/*.css'
],
dest: 'public/css/vendor.css'
}
},
uglify: {
target: {
files: [{
expand: true,
cwd: 'public/js',
src: ['*.js', '!*.min.js'],
dest: 'public/js',
ext: '.min.js'
}]
}
},
cssmin: {
target: {
files: [{
expand: true,
cwd: 'public/css',
src: ['*.css', '!*.min.css'],
dest: 'public/css',
ext: '.min.css'
}]
}
},
watch: {
sass: {
files: 'static/app/sass/**/*.scss',
tasks: ['sass:dist', 'concat:css', 'cssmin:target'],
options: {
interrupt: true
}
},
js: {
files: 'static/app/js/**/*.js',
tasks: ['concat:js', 'uglify:target'],
options: {
interrupt: true
}
}
}
}
)
;
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('s', ['watch:sass']);
grunt.registerTask('w', ['watch:js']);
};
이제 Django가 static 파일을 watch 할 수 있도록 라이브러리를 설치하자. Livereload
와 dj-static
를 사용할 것이다.
$ pip install dj-static
$ pip install livereload
이제 livereload
를 INSTALLED_APPS에 추가해주자.
# settings.py
INSTALLED_APPS = [
...
'livereload',
...
]
STATIC_ROOT = os.path.join(BASE_DIR, 'public')
STATIC_URL = '/static/'
그 다음 wsgi.py
에 추가하자.
import os
from django.conf import settings
from django.core.wsgi import get_wsgi_application
from dj_static import Cling
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "server.settings")
if settings.DEBUG:
application = Cling(get_wsgi_application())
else:
application = get_wsgi_application()
이제 livereload
를 시키자. live 시키기 전에 grunt watch 걸어주는 걸 잊지 말자.
$grunt w
$grunt s
$python manage.py livereload
localhost:8000
에 접속하면 잘 적용 된 것을 볼 수 있다.