es6+webpack+express+gulp构建项目目录,无法打开localhost:3000

发布于 2022-09-06 04:05:52 字数 4706 浏览 13 评论 0

es6+webpack+express+gulp构建项目目录,gulp --watch命令行启动缺无法打开localhost:3000?这是为什么? 命令行运行也没出现报错

clipboard.png

clipboard.png

clipboard.png

clipboard.png

//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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

浪菊怪哟 2022-09-13 04:05:52

你有配置3000为你的测试端口吗,我看到了个8080,还有你这代码格式截的也是服气

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文