如何在Django中使用Gulp Browsersync？ [英] How to use Gulp Browsersync with Django?

问题描述

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

First time using Gulp and I'm following a couple of tutorials that don't seem to be working quite right for me. I have a real basic project and I just want to learn how to use Gulp for standard things like JavaScript/CSS minification, image reduction, and browser sync.

当我运行时我的浏览器同步任务，它会转到 localhost：8000 的正确URL，但显示 Cannot GET / 呈现我的页面。如何解决此问题，以便可以将Browsersync与Django一起使用？

When I run my watch task with Browsersync, it goes to the right URL of localhost:8000, but it shows Cannot GET / instead of rendering my page. How do I fix this so I can use Browsersync with 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']);
})

推荐答案

只需执行另一个名为 runserver 的任务，该任务就可以在cmd python manage.py runserver 。将任务作为Browsersync的依赖项之一，设置代理和端口，然后就可以使用了。

Just had to make another task called runserver which runs in the cmd python manage.py runserver. Put the task as one of the dependencies for Browsersync, set the proxy and port, and I was set to go.

var exec = require（ 'child_process'）。exec 不需要任何额外的 npm安装。我认为它是自动内置的。

var exec = require('child_process').exec didn't require any extra npm install. I think it's automatically built in.

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);
})

这篇关于如何在Django中使用Gulp Browsersync？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！