[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에 접속하면 잘 적용 된 것을 볼 수 있다.