是否可以爲Django配置Gulp Livereload？

Question

我想用gulp-liveReload與Django，有可能嗎？我已經讀過Grunt有一個選擇，但我更喜歡Gulp的工作，對我來說更容易。

謝謝，

Answer 1

我寫了如何做到這一點在最近的一篇博客在這裏：

http://www.revsys.com/blog/2014/oct/21/ultimate-front-end-development-setup/

基本上你只需要編寫一個看你要觸發livereloads哪些文件一飲而盡任務，所以對我來說這是模板：

/* Trigger a live reload on any Django template changes */ 
gulp.watch('**/templates/**').on('change', livereload.changed); 

但是你也可以在models.py，views.py或其他任何你想要的東西上觸發它。

Answer 2

你試試這個django-livereload？

Answer 3

我假設你正在談論django項目中的靜態資產（static下的東西）。

關鍵的一步是要通過python manage.py runserver服務的頁面注意從livereload server變化（通常由tiny-lr實現）的

一個簡單的方法這樣做是爲了下面的代碼注入到您的base.html（假設它在django項目的HTML模板其餘父模板）

# views.py 
from django.conf import settings 
# other imports ... 
def index(request): 
    ctx = {'debug': settings.DEBUG, } 
    # other context setup... 
    return render(request, 'index.html', ctx) 

# other views' definitions... 

<!-- base.html --> 
{% if debug %} 
    <!-- 
     assuming your livereload server runs at localhost:35729 
             (default host:port for livereload) 
    --> 
    <script src="//localhost:35729/livereload.js"></script> 
{% endif %} 

// gulpfile.js 
var gulp = require('gulp'), 
    gutil = require('gulp-util'), 
    coffee = require('gulp-coffee'), 
    livereload = require('gulp-livereload'), 
    debug = require('gulp-debug'), 
    watch = require('gulp-watch'); 

// other tasks definitions... 

gulp.task('watch', function(){ 
    livereload.listen(); // starts a tiny-lr server, 
          // default livereload server port is 35729 
    gulp.src('static/src/**/*.coffee') 
     .pipe(watch('static/src/**/*.coffee')) 
     .pipe(coffee()) 
     .pipe(gulp.dest('static/dist')) 
     .pipe(livereload()); // send a signal to tiny-lr server 
          // to make the page with livereload.js 
          // to perform a reload action 
})  

Answer 4

我試過Frank Wile's answer，但我是有它的問題。使用模板的唯一方法是我保存了.py文件，然後對模板進行了更改。

我延長弗蘭克的做法與基本touch調用livereload.changed()以前上課一個.py文件中的函數：

function touchPy() { 
    gulp.src(appName + '/__init__.py') 
     .pipe(gulp.dest(appName)); 
} 

gulp.task('watch', function() { 
    livereload.listen(); 

    // Changes to .css files works fine w/ Frank's approach 
    gulp.watch(paths.static).on('change', livereload.changed); 

    // Changes to .html files don't trigger a runserver refresh w/o touching a .py file 
    gulp.watch(paths.templates).on('change', function(file) { 
     touchPy(); 
     livereload.changed(file); 
    }); 
}); 

Answer 5

我也掙扎着找到答案HOWTO啓動Django的服務器，並獲得瀏覽器的重加載工作在同一時間，但事實證明，這是容易實現（在Windows和Linux工作跨平臺的，即使）：

//jshint node:true 
'use strict'; 

var gulp   = require('gulp'), 
    .... 
    gutil   = require('gulp-util'); 

var browserSync = require('browser-sync').create(); 

var serverUrl = 'localhost:8000'; 

var exec = require('child_process').exec; 

var isProd = gutil.env.type === 'prod'; 

.... 
gulp.task('sass', function() { 
    return sass(sources.sass, { 
    compass: true, 
    sourcemap: true, 
    style: isProd ? 'compressed': 'expanded', 
    }) 
    .... 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest(targets.css)) 
    .pipe(browserSync.stream()); 
}); 
.... 

gulp.task('watch', function() { 
    gulp.watch(sources.sass, ['sass']); 
    gulp.watch(sources.pug, ['html']) 
    .on('change', browserSync.reload); 
    gulp.watch(sources.ts, ['typescript']) 
    .on('change', browserSync.reload); 

    // update browser on python change 
    gulp.watch('website/**/*.py') 
    .on('change', browserSync.reload); 
}); 


// start django server 
gulp.task('webserver', function() { 
    var isWin = /^win/.test(process.platform); 
    var cmd = '. venv/bin/activate && PYTHONUNBUFFERED=1 '; 

    if (isWin) { //for Windows 
    cmd = 'venv\\Scripts\\activate.bat && set PYTHONUNBUFFERED=1 && '; 
    } 

    var proc = exec(cmd + 'python manage.py runserver ' + serverUrl); 
    proc.stderr.on('data', function(data) { 
    process.stdout.write(data); 
    }); 

    proc.stdout.on('data', function(data) { 
    process.stdout.write(data); 
    }); 
}); 


// start livereload 
gulp.task('browser-sync', ['typescript', 'html', 'sass', 'webserver'], function() { 
    browserSync.init({ 
     proxy: serverUrl, 
     port: 8080, 
     reloadDelay: 300, 
     reloadDebounce: 500 
    }); 
}); 

Answer 6

您必須包括：

<script type="text/javascript" src="http://127.0.0.1:32700/livereload.js" /> 

to django main template。見http://argskwargs.io/blog/javascript/django-typescript-gulp-part-three/。這是js和css文件的示例：

var gulp = require('gulp'); 
var watch = require('gulp-watch'); 
var livereload = require('gulp-livereload'); 

var gzip_options = { 
    threshold: '1kb', 
    gzipOptions: { 
     level: 9 
    } 
}; 

gulp.task('css', function() { 
    return gulp.src('static/css/*.css') 
     .pipe(livereload()); 
}); 

gulp.task('js', function() { 
    return gulp.src('static/js/*.js') 
     .pipe(livereload()); 
}); 

/* Watch Files For Changes */ 
gulp.task('watch', function() { 
    livereload.listen(32700); 
    gulp.watch('static/css/*.css', ['css']); 
    gulp.watch('static/js/*.js', ['js']); 

    gulp.watch('static/css/*', 'static/js/*').on('change', livereload.changed); 
}); 

gulp.task('default', ['css', 'js', 'watch']);