- 安装
Express
应用程序生成器:npm install express-generator -g
- 创建目录名为
myapp
的Express
的应用程序:express --view=pug myapp
- 进入目录并安装依赖:
cd myapp
npm install
- 安装
gulp
:npm install --save-dev gulp
- 安装
gulp-nodemon
:npm install --save-dev gulp-nodemon
- 安装
browser-sync
:npm install --save-dev browser-sync
- 在项目根目录下新建
gulpfile.js
,代码如下:
// 添加引用
var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');
//这个可以让express启动
gulp.task("node", function () {
nodemon({
script: './bin/www',
ext: 'js html',
env: {
'NODE_ENV': 'development'
}
})
});
gulp.task('server', ["node"], function () {
var files = [
'views/**/*.html',
'views/**/*.ejs',
'views/**/*.jade',
'views/**/*.pug',
'routes/**/*js',
'public/**/*.*'
];
//gulp.run(["node"]);
browserSync.init(files, {
proxy: 'http://localhost:3000',
browser: 'chrome',
notify: false,
port: 4001 //这个是browserSync对http://localhost:3000实现的代理端口
});
gulp.watch(files).on("change", reload);
});
- 在项目根目录下输入命令:
./node_modules/.bin/gulp server
- 在浏览器中输入
localhost:4001
即可看到结果。
参考自: