ES6的构建与支持基础

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