如何使用Gulp Browsersync与Django?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用Gulp Browsersync与Django?相关的知识,希望对你有一定的参考价值。
第一次使用Gulp,我正在学习一些似乎不适合我的教程。我有一个真正的基础项目,我只想学习如何使用Gulp进行javascript / CSS缩小,图像缩小和浏览器同步等标准操作。
当我使用Browsersync运行我的监视任务时,它会转到localhost:8000
的正确URL,但它会显示Cannot GET /
而不是渲染我的页面。我如何解决这个问题,以便我可以使用Djserso的Browsersync?
文件目录:
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的依赖项之一,设置代理和端口,然后我就开始了。
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('browserSync', ['runserver'], function() {
browserSync.init({
notify: false,
proxy: 'localhost:8000'
})
});
以上是关于如何使用Gulp Browsersync与Django?的主要内容,如果未能解决你的问题,请参考以下文章
将 browsersync 与 gulp/nodemon 一起使用
Gulp Browsersync会在每次文件更改时导致多次重新加载