如何在 Django 中使用 Gulp Browsersync？答案

【问题标题】：How to use Gulp Browsersync with Django?如何在 Django 中使用 Gulp Browsersync？
【发布时间】：2016-02-21 01:46:58
【问题描述】：

第一次使用 Gulp，我正在学习一些似乎不太适合我的教程。我有一个真正的基础项目，我只想学习如何使用 Gulp 进行标准操作，例如 JavaScript/CSS 缩小、图像缩小和浏览器同步。

当我使用 Browsersync 运行我的监视任务时，它会转到 localhost:8000 的正确 URL，但它显示 Cannot GET / 而不是呈现我的页面。我该如何解决这个问题，以便我可以将 Browsersync 与 Django 一起使用？

文件目录：

gulpfile.js:

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

gulp.task('sass', function() {
  return gulp.src('polls/static/polls/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('polls/static/polls/css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

gulp.task('browserSync', function() {
  browserSync.init({
    server: "mysite",
    port: 8000
  });
});

gulp.task('watch', ['browserSync', 'sass'], function() {
  gulp.watch('polls/static/polls/scss/**/*.scss', ['sass']);
})

【问题讨论】：

标签： python django gulp browser-sync build-tools

【解决方案1】：

只需要创建另一个名为 runserver 的任务，该任务在 cmd python manage.py runserver 中运行。将任务作为Browsersync的依赖项之一，设置代理和端口，我就准备好了。

var exec = require('child_process').exec 不需要任何额外的npm install。我认为它是自动内置的。

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var exec = require('child_process').exec;

gulp.task('sass', function() {
  return gulp.src('polls/static/polls/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('polls/static/polls/css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

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

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

gulp.task('watch', ['browserSync', 'sass'], function() {
  gulp.watch('polls/static/polls/scss/**/*.scss', ['sass']);
  gulp.watch('polls/static/polls/scripts/**/*.js', browserSync.reload);
  gulp.watch('polls/templates/**/*.html', browserSync.reload);
})

【讨论】：

请注意此语法不再有效。 gulp.task 已被贬低，应该使用 gulp.series 或 gulp.parallel。

【解决方案2】：

使用 Gulp 4，这是我的代码的副本：

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const exec = require('child_process').exec;

gulp.task('runserver', function() {
    var proc = exec('python manage.py runserver');
    return new Promise(function(resolve, reject) {
        console.log("HTTP Server Started");
        resolve();
    });
})

gulp.task('browserSync', gulp.series('runserver'), function() {
     browserSync.init({
         notify: false,
         port: 8000,
         proxy: 'localhost:8000'
     });
});

gulp.task('watch', gulp.series('browserSync'), function() {
    gulp.watch('polls/static/polls/scripts/**/*.js', browserSync.reload);
    gulp.watch('polls/templates/**/*.html', browserSync.reload);
})

【讨论】：

【解决方案3】：

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

【讨论】：

仅代码的答案不好。请添加一些关于您的代码如何工作的解释。
我认为您缺少将 python manage.py runserver 作为子进程运行的 gulp 任务