首页 > express+gulp+browserSync配置问题

express+gulp+browserSync配置问题

首先简述下这个问题的意义:

搭建express+bs+gulp的目地是实现mock server

其次是想要达到的效果:

通过一行命令 gulp,实现mock server的启动和bs的监控

配置文件:

'use strict'

let gulp = require('gulp');
let sass = require('gulp-sass');
let jshint = require('gulp-jshint');
let minify = require("gulp-clean-css");
const browserSync = require("browser-sync").create();
let reload = browserSync.reload;
let ts = require("gulp-typescript");
let tsProject = ts.createProject("tsconfig.json");
let nodemon = require("gulp-nodemon");

let paths = ["src/*.html", "src/*/*.html", "src/*/*/*.html"];
let watchPaths = ["src/*", "src/*/*", "src/*/*"];

gulp.task("html", function() {
    return gulp.src(paths)
        .pipe(gulp.dest("dist"))
})

gulp.task("ts", function() {
    return tsProject.src()
        .pipe(ts(tsProject))
        .js.pipe(gulp.dest("dist/js"));
})

gulp.task("js", function() {
    return gulp.src("src/*.js")
        .pipe(jshint())
        .pipe(gulp.dest("dist"))
})

gulp.task("sass", function() {
    return gulp.src("src/sass/*.scss")
        .pipe(sass())
        .pipe(minify())
        .pipe(gulp.dest("dist/css"))
})

gulp.task("reload", function() {
    reload(['dist/*/*.*', 'dist/*', 'dist/*/*.*']);
})

gulp.task("server", function() {
    nodemon({
        script: 'app.js',
        ignore: ['.vscode', '.idea', 'node_modules'],
        env: {
            'NODE_ENV': 'development'
        }
    })
    .on('start', function() {
        browserSync.init({
            proxy: "localhost"
            // server: {
            //     baseDir: "localhost/router/dist",
            //     index: "index.html"
            // }
        })
    })
});

let tasks = ['html', 'js', 'sass','ts','reload'];

gulp.task("default", ["html", "js", "sass","ts", "server", "reload"], function() {
    gulp.watch(['src/*/*.*', 'src/*', 'src/*/*/*'], tasks);
})

过程中的问题:

terminal下输入gulp,浏览器自动打开localhost:3000,出现403Forbidden nginx/1.8.0

terminal输入后是这样的:

浏览器是这样显示的:

随便更改个地方会重启,提示报错

其它

目录结构通过express生成的,做了部分修改

app.js文件(改动处已标记)

package.json文件

【热门文章】
【热门文章】