8

我想在 Django 中使用 gulp-liveReload ,可以吗?我读过 Grunt 有一个替代方案,但我更喜欢使用 Gulp,这对我来说更容易。

谢谢,

4

6 回答 6

5

我在最近的一篇博客文章中写了如何做到这一点:

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 或任何你真正想要的东西上触发它。

于 2015-01-15T22:46:45.807 回答
1

你试过这个django-livereload吗?

于 2014-09-30T07:22:32.087 回答
1

我也一直在努力寻找如何启动 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
    });
});
于 2016-06-18T20:35:14.707 回答
0

您必须包括:

<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']);
于 2017-08-11T08:57:43.167 回答
0

我假设你在谈论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
})    
于 2015-09-21T13:24:27.910 回答
0

我尝试了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);
    });
});
于 2015-11-20T01:52:19.310 回答