浏览器同步、EJS、Gulp 和节点 - 开始设置答案

【问题标题】：Browser Sync, EJS, Gulp, and node - getting setup浏览器同步、EJS、Gulp 和节点 - 开始设置
【发布时间】：2016-08-21 01:11:27
【问题描述】：

我在 Node 环境中，为 SASS 运行 gulp，为模板运行 EJS，我想让 Browser Sync 也能正常工作。我无法配置我的 gulp 文件。如果我运行“node server.js”，我的应用程序会在浏览器中运行，并且 EJS 可以正常工作，但我的浏览器同步无法正常工作。如果我运行 gulp，我会在浏览器中看到“Cannot GET /”。

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

这是我的 gulpfile：

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

【问题讨论】：

标签： node.js express gulp ejs browser-sync

【解决方案1】：

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

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

【讨论】：