es6+webpack+express+gulp构建项目目录,无法打开localhost:3000
es6+webpack+express+gulp构建项目目录,gulp --watch命令行启动缺无法打开localhost:3000?这是为什么? 命令行运行也没出现报错
//server.js
import gulp from 'gulp'
import gulpif from 'gulp-if'
//启动服务器
import liveserver from 'gulp-live-server';
//命令行参数
import args from './util/args';
gulp.task('serve',(cb)=>{
//判断如果不是否在监听下
if (!args.watch) return cb();
//如果是,创建服务器
var server=liveserver.new(['--harmony','server/bin/www']);
server.start();
//文件监听
gulp.watch(['server/public/**/*.js','server/views/**/*.ejs'],function(file){
//通知服务器文件发生改动
server.notify.apply(server,[file]);
})
//监听需要重启服务的文件
gulp.watch(['server/routes/**/*.js','server/app.js'],function(){
//重启服务器
server.start.bind(server)()
});
})
//pages.js
import gulp from 'gulp';
import gulpif from 'gulp-if';
import livereload from 'gulp-livereload';
import args from './util/args';
gulp.task('pages',()=>{
return gulp.src('app/**/*.ejs')
.pipe(gulp.dest('server'))
//监听是否要热更新
.pipe(gulpif(args.watch,livereload()))
})
//scripts.js
import gulp from 'gulp';
import gulpif from 'gulp-if';
import concat from 'gulp-concat';
import webpack from 'webpack';
import gulpWebpack from 'webpack-stream';
import named from 'vinyl-named';
import livereload from 'gulp-livereload';
import plumber from 'gulp-plumber';
import rename from 'gulp-rename';
import uglify from 'gulp-uglify';
import {log,colors} from 'gulp-util';
import args from './util/args';
gulp.task('scripts',()=>{
//打开index.js文件
return gulp.src(['app/js/index.js'])
.pipe(plumber({
errorHandler:function(){
}
}))
.pipe(named())
.pipe(gulpWebpack({
module:{
loaders:[{
test:/\.js$/,
loader:'babel-loader'
}]
}
}),null,(err,stats)=>{
log(`Finished '${colors.cyan('scripts')}'`,stats.toString({
chunks:false
}))
})
//编译好的文件存放的位置
.pipe(gulp.dest('server/public/js'))
//复制文件
.pipe(rename({
basename:'cp',
extname:'.min.js'
}))
//编译压缩
.pipe(uglify({
compress:{properties:false},
output:{'quote_keys':true}
}))
.pipe(gulp.dest('server/public/js'))
//文件变化监听,自动刷新
.pipe(gulpif(args.watch,livereload()))
});
//css.js
import gulp from 'gulp';
import gulpif from 'gulp-if';
import livereaload from 'gulp-livereload';
import args from './util/args';
gulp.task('css',()=>{
return gulp.src('app/**/*.css')
.pipe(gulp.dest('server/public'))
.pipe(gulpif(args.watch,livereaload()))
})
//clean.js
import gulp from 'gulp';
import del from 'del';
import args from './util/args';
gulp.task('clean',()=>{
//清空server/public和views的文件
return del(['server/public','server/views'])
})
//browser.js
import gulp from 'gulp';
import gulpif from 'gulp-if';
//gulp常用工具集合
import gulputil from 'gulp-util';
import args from './util/args';
gulp.task('browser',(cb)=>{
if(!args.watch) return cb();
//watch第一参数是监听目录,第二个参数是执行的任务
gulp.watch('app/**/*.js',['scripts']);
gulp.watch('app/**/*.ejs',['pages']);
gulp.watch('app/**/*.css',['css']);
})
//build.js
import gulp from 'gulp';
import gulpSequence from 'gulp-sequence';
gulp.task('build',gulpSequence('clean','css','pages','scripts',['browser','serve']));
//gulpfile.babel.js
import requireDir from 'require-dir';
requireDir('./tasks');
//args.js
import yargs from 'yargs';
const args=yargs
.option('production',{
boolean:true,
default:false,
describe:'min all scripts'
})
//监听
.option('watch',{
boolean:true,
default:false,
describe:'watch all files'
})
//详细输出
.option('verbose',{
boolean:true,
default:false,
describe:'log'
})
.option('sourcemaps',{
describe:'force the creation of sourcemaps'
})
.option('port',{
string:true,
default:8080,
describe:'server port'
})
//对命令行进行解析
.argv
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
你有配置3000为你的测试端口吗,我看到了个8080,还有你这代码格式截的也是服气