Django + Gulp = ❤

장고 웹 프레임워크에서는 프론트엔드 자동화 툴인 Gulp도 잘 실행됩니다. Gulp에 대한 자세한 소개는 CSS Tricks — Gulp for Beginners를 보시고 차근차근 따라해 보시길 바랍니다. 한국어로 번역된 Gulp에 대한 소개를 보셔도 좋을 것 같습니다.

Django 프로젝트에 Gulp 설치하기

장고 프로젝트 최상위 경로로 들어간 후, 가상환경을 켜고 아래 명령어를 입력해 Gulp를 설치합니다.

npm install gulp --save-dev

아래 명령어를 입력해 Gulp 프로젝트를 생성합니다.

$ npm init

npm init 명령어는 프로젝트 내 package.json 파일을 생성해, 프로젝트 정보, 설치된 Gulp 의존(dependencies) 라이브러리 패키지 정보를 담고 있습니다.

이미 사용 중인 gulp 파일이 있다면, 프로젝트 디렉토리에 gulpfile.js와 package.json 파일을 복사하고 npm install명령어를 실행하면 기존에 사용했던 패키지들이 모두 장고 프로젝트 내 설치 됩니다.

gulpfiles.js 코드 수정 하기

1. 파일 경로 수정하기

gulp task sass와 watch경로를 수정합니다.

2. gulp task 추가하기 — runserver

gulp 에서 장고 시스템 명령을 실행하도록 만들어야 합니다.

gulp task runserver를 추가해 python manage.py runserver 명령어 실행되도록 만듭니다. Node.js 프로세스에서 exec() 함수를 사용해 서브셸에서 시스템 명령을 실행할 수 있습니다.

var exec = require('child_process').exec;
gulp.task('runserver', function() {
  var proc = exec('python manage.py runserver')
})

3. browserSync 에 포트번호 수정하기

Django에서 포트번호는 8000를 사용하고 있고, gulp browser-sync 기본 포트번호는 3000을 사용하고 있습니다. 따라서 browserSync 패키지 내 프록시와 포트 설정을 장고와 맞춰서 설정해 주면 됩니다. browserSync수행 시 ['runserver']

가 작동하면 되겠죠

gulp.task('browserSync', ['runserver'], function() {
  browserSync.init({
    notify: false,
    port: 8000,
    proxy: 'https://127.0.0.1:8000/'
  })
});

종합해 보면 아래와 같은 코드가 완성될 수 있을 것 입니다.

Django + Gulp 서버 실행하기

이제 python manage.py runserver 명령어를 입력해 Django 개발 서버를 실행합니다.

(sujinvenv) Sujins-MacBook-Pro:sujin-web sujin$ python manage.py runserver

저의 경우, 개발 환경에서도 HTTPS를 사용하고 있어, python manage.py runsslserver를 입력했습니다.

콘솔 창을 하나 더 만들고 가상 환경을 실행 한 다음, gulp watch명령어를 입력해 서버를 실행합니다.

[16:07:51] Using gulpfile ~/Documents/sujin-web/gulpfile.js
[16:07:51] Starting 'runserver'...
[16:07:51] Finished 'runserver' after 5.59 ms
[16:07:51] Starting 'browserSync'...
[16:07:51] Finished 'browserSync' after 17 ms
[16:07:51] Starting 'sass'...
[BS] 1 file changed (style.css)
[16:07:51] Finished 'sass' after 51 ms
[16:07:51] Starting 'watch'...
[16:07:51] Finished 'watch' after 19 ms
[BS] Proxying: http://127.0.0.1:8000
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:8001
    External: http://10.67.69.97:8001
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://10.67.69.97:3001
 -------------------------------------

lcoalhost가 8000에서 8001로 바뀌었음을 알 수 있습니다.

브라우저에서 http://127.0.0.1:8001/ 또는 http://localhost:8001 을 확인해 보세요.