鍍金池/ 問答/HTML/ es6+webpack+express+gulp構(gòu)建項(xiàng)目目錄,無法打開local

es6+webpack+express+gulp構(gòu)建項(xiàng)目目錄,無法打開localhost:3000

es6+webpack+express+gulp構(gòu)建項(xiàng)目目錄,gulp --watch命令行啟動缺無法打開localhost:3000?這是為什么? 命令行運(yùn)行也沒出現(xiàn)報(bào)錯

clipboard.png

clipboard.png

clipboard.png

clipboard.png

//server.js
import gulp from 'gulp'
import gulpif from 'gulp-if'
//啟動服務(wù)器
import liveserver from 'gulp-live-server';
//命令行參數(shù)
import args from './util/args';

gulp.task('serve',(cb)=>{

//判斷如果不是否在監(jiān)聽下
if (!args.watch) return cb();
//如果是,創(chuàng)建服務(wù)器
var server=liveserver.new(['--harmony','server/bin/www']);
server.start();

//文件監(jiān)聽
gulp.watch(['server/public/**/*.js','server/views/**/*.ejs'],function(file){
    //通知服務(wù)器文件發(fā)生改動
    server.notify.apply(server,[file]);
})

//監(jiān)聽需要重啟服務(wù)的文件
gulp.watch(['server/routes/**/*.js','server/app.js'],function(){
    //重啟服務(wù)器
    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'))
    //監(jiān)聽是否要熱更新
.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'))
//復(fù)制文件
.pipe(rename({
    basename:'cp',
    extname:'.min.js'
}))
//編譯壓縮
.pipe(uglify({
    compress:{properties:false},
    output:{'quote_keys':true}
}))
.pipe(gulp.dest('server/public/js'))
    //文件變化監(jiān)聽,自動刷新
.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第一參數(shù)是監(jiān)聽目錄,第二個參數(shù)是執(zhí)行的任務(wù)
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'
})
    //監(jiān)聽
.option('watch',{
    boolean:true,
    default:false,
    describe:'watch all files'
})
    //詳細(xì)輸出
.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'
})

//對命令行進(jìn)行解析
.argv




回答
編輯回答
六扇門

你有配置3000為你的測試端口嗎,我看到了個8080,還有你這代碼格式截的也是服氣

2017年2月7日 23:33