Vorrei utilizzare gulp-liveReload con Django, è possibile? Ho letto che esiste un'alternativa per Grunt, ma preferirei lavorare con Gulp, per me è più facile.È possibile configurare Gulp Livereload per Django?
Grazie,
Vorrei utilizzare gulp-liveReload con Django, è possibile? Ho letto che esiste un'alternativa per Grunt, ma preferirei lavorare con Gulp, per me è più facile.È possibile configurare Gulp Livereload per Django?
Grazie,
ho scritto come si fa in un recente post sul blog qui:
http://www.revsys.com/blog/2014/oct/21/ultimate-front-end-development-setup/
Fondamentalmente è solo bisogno di scrivere i compiti gulp che guardano quali file si desidera attivare livereloads, quindi per me questo è modelli :
/* Trigger a live reload on any Django template changes */
gulp.watch('**/templates/**').on('change', livereload.changed);
Ma si potrebbe anche innescare su models.py, views.py, o qualsiasi altra cosa si vuole veramente.
hanno provate questo django-livereload?
Immagino che tu stia parlando delle risorse statiche (roba sotto static
) nel tuo progetto django.
Il passo fondamentale è quello di rendere le pagine servite da python manage.py runserver
essere consapevoli dei cambiamenti dal livereload server
(di solito attuate da tiny-lr
)
Un modo semplice per farlo è quello di iniettare il seguente codice al base.html
(ammesso che come il modello principale per il resto del template HTML in django
progetto)
# 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
})
ho provato Frank Wile's answer, ma ho avuto problemi con esso. L'unico modo in cui ha funzionato con i modelli è se ho salvato un file .py
e poi ho apportato una modifica a un modello.
ho esteso l'approccio di Frank, con una funzione che essenzialmente touch
es un file .py
prima di chiamare 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);
});
});
Ho anche faticato per trovare un howto risposta ad avviare un server Django e ottenere il browser ricarica diretta di lavoro allo stesso tempo, però si è scoperto che è facile da raggiungere (anche quando si lavora multi-piattaforma su Windows e 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
});
});
Questo mi è stato molto utile. Grazie per la pubblicazione. – Paul
è necessario includere:
<script type="text/javascript" src="http://127.0.0.1:32700/livereload.js" />
al modello principale django. Vedi http://argskwargs.io/blog/javascript/django-typescript-gulp-part-three/. Questo è l'esempio per i file JS e 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']);
Lo sto utilizzando e funziona perfettamente per le modifiche ai file CSS, ecc., Ma non per i modelli. L'unico modo in cui funziona con i modelli è se tocchi o apporti modifiche a un file '.py' e poi cambi un modello. Hai incontrato questo problema o sta funzionando in qualche modo? –
Ciao Mike, mi scuso Ho avuto un errore di battitura in quanto sopra dovrebbe essere '**/templates/**' non quello che avevo in origine che è '**/templates/*'. Spero possa aiutare! –