我想在 Django 中使用 gulp-liveReload ,可以吗?我读过 Grunt 有一个替代方案,但我更喜欢使用 Gulp,这对我来说更容易。
谢谢,
我想在 Django 中使用 gulp-liveReload ,可以吗?我读过 Grunt 有一个替代方案,但我更喜欢使用 Gulp,这对我来说更容易。
谢谢,
我在最近的一篇博客文章中写了如何做到这一点:
http://www.revsys.com/blog/2014/oct/21/ultimate-front-end-development-setup/
基本上你只需要编写 gulp 任务来观察你想要触发 livereloads 的文件,所以对我来说这是模板:
/* Trigger a live reload on any Django template changes */
gulp.watch('**/templates/**').on('change', livereload.changed);
但你也可以在 models.py、views.py 或任何你真正想要的东西上触发它。
你试过这个django-livereload吗?
我也一直在努力寻找如何启动 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
});
});
您必须包括:
<script type="text/javascript" src="http://127.0.0.1:32700/livereload.js" />
到 django 主模板。请参阅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']);
我假设你在谈论static
你的 django 项目中的静态资产(下面的东西)。
关键步骤是使所服务的页面python manage.py runserver
意识到来自livereload server
(通常由实现tiny-lr
)的更改
一种简单的方法是将以下代码注入您的base.html
(假设它是项目中其余 html 模板的父模板django
)
# 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
})
我尝试了Frank Wile 的回答,但我遇到了问题。它对我使用模板的唯一方法是,如果我保存了一个.py
文件,然后对模板进行了更改。
我用一个函数扩展了弗兰克的方法,该函数在调用之前基本上是touch
一个.py
文件livereload.changed()
:
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);
});
});