浏览器同步、EJS、Gulp 和节点 - 正在设置

Question

我在 Node 环境中，gulp 运行ning 用于 SASS，EJS 用于模板，我也想让浏览器同步工作。我在配置 gulp 文件时遇到问题。如果我运行 'node server.js' 我的应用程序运行在浏览器中，并且 EJS 工作，但我没有让浏览器同步工作。如果我运行 gulp 我在浏览器中得到 'Cannot GET /'。

请注意我是 Node 的新手，所以如果您能在您的回答中包含任何有助于我学习的解释，我们将不胜感激！

这是我的gulp文件：

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var runSequence = require('run-sequence');
var ejs = require("gulp-ejs");

gulp.task('default', function(callback) {
  runSequence(['browserSync', 'watch', 'ejs'], callback);
});

gulp.task('ejs', function(){
  return gulp.src('views/html/**/*.ejs')
   .pipe(ejs({}, {ext:'.html'}))
   .pipe(gulp.dest('dist/html/'));
});

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

gulp.task('watch', ['browserSync', 'ejs'], function() {
  gulp.watch('./scss/*.scss', ['sass']);
  gulp.watch('./views/html/**/*.html', browserSync.reload);
  gulp.watch('./views/html/**/*.ejs', browserSync.reload);
  gulp.watch('./public/js/**/*.js', browserSync.reload);
  gulp.watch('views/html/**/*.ejs', ['ejs']);
});

gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: './'
    },
  });
});

这里是server.js:

var express = require('express');
var app = express();
var gulp = require('gulp');

gulp.task('default', function(arg) {

});

// set the view engine to ejs
app.set('view engine', 'ejs');

// use res.render to load up an ejs view file

// index page
app.get('/', function(req, res) {
    res.render('index');
});


app.listen(3000);

Answer 1

尝试使用代理初始化进行测试

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "yourlocal.dev"
    });
});

浏览器同步、EJS、Gulp 和节点 - 正在设置

Browser Sync, EJS, Gulp, and node - getting setup

ejs

node.js

express

gulp

browser-sync