ES6项目构建
基础架构
- 创建es6文件
mkdir es6
cd es6
必须先安装npm install -g express@3.5.0
然后再利用express
js架构
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', ()=>{
return gulp.src(['app/js/index.js'])
.pipe(plumber({
errorHandle:function(){
}
}))
.pipe(named())
.pipe(gulpWebpack({
module:{
loaders:[{
test:/\/js$/,
loader:'babel'
}]
}
}),null,(err,stats)=>{
log(`Finished '${colors.cyan('script')}'`,stats.toString({
chunks:false
}))
})
.pipe(gulp.dest('server/publick/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()))
})
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: 'min all scripts'
})
.option('verbose', {
boolean: true,
default: false,
describe: 'log'
})
.option('sourcemaps', {
describe: 'force the creation of sroucemaps'
})
.option('port', {
string: true,
default: 8080,
describe: 'server port'
})
.argv