ES6 项目

文章为本人总结，不完整不全面，会持续更新

项目下载          项目待完善

1. 创建根目录 es6

    创建3个并行的模块：
        app(放置前端代码)
        server(服务器目录)
        task(构建工具目录)
    第一步在app文件夹下:
        css目录
        js目录
            创建class类目录
                创建 test.js
            创建入口文件：index.js
        views目录
            初始化模块文件
                创建错误模版  error.ejs
                创建入口模版  index.ejs
                使用.ejs而不是.html是因为node的express框架,
                express框架所使用的模板引擎是.ejs,可以当做html使用
    第二步server文件夹下:
        需要使用express
        命令  express -e .
        命令  npm install
    第三步task文件夹下:
        创建util目录,存放常见的脚本
            初始化文件   args.js
    第四步初始化创建package.json
        命令  npm init
    第五步创建一个设置babel编译工具的配置文件
        文件夹名字固定为 .babelrc
        手动创建时需要写为 .babelrc. 文件夹名字会变成 .babel
    第六步创建一个gulp做构建工具
        文件名为 gulpfile.babel.js,名称是固定的
        因为使用ES6语法,如果不写gulpfile.babel.js而是gulpfile.js在执行脚本时会报错
2. 进入tasks中的args.js
        引入一个npm包来处理命令行参数
            import yargs from 'yargs';
        区分是测试环境还是生产环境
            const args=yars
                .option('production',{
                    boolean:true,
                    default:false,
                    describe:'first 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
    创建一个脚本对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 form 'vinyl-named';
            import livereload from 'gulp-livereload';
            import plumber from 'gulp-plumber';
            import rename from 'gulp-rename';
            import uglify from 'gulp-uglify';
            import {log,color} from 'gulp-util';
            import args from './util/args';
        用gulp.task创建一个任务
            gulp.task('scripts',()=>{
                return gulp.src(['app/js/index.js'])
                .pipe(plumber({
                    errorHandle:function(){

                    }
                }))
                .pipe(named())
                .pipe(gulpWebpack({
                    module:{
                        loaders:[{
                            test:/\.js$/,
                            loaders:'babel-loader'
                        }]
                    }
                }),null,(error,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()))
            })
    创建模版、服务任务脚本
        在tasks下新建一个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()))
            })
        在task下新建一个 css.js 文件
        引入包
            import gulp from 'gulp';
            import gulpif from 'gulp-if';
            import livereload 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,livereload()))
            })
        在task下新建一个 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(); // 启动服务器
            js ejs改变的监听
            gulp.watch(['server/public/**/*.js','server/view/**/*.ejs'],function(file){
                server.notify.apple(server,[file]);
            })
            需要重新服务器
            gulp.watch(['server/routes/**/*.js','server/app.js'],function(){
                server.start.bind(server())
            })
        })
3.文件自动监听
    在tasks中新建browser.js
    引入包
        import gulp from 'gulp';
        import gulpif from 'gulp-if';
        import gutil from 'gulp-util';
        import args from './util/args';
    创建任务
        gulp.task('browser',(cb)=>{
            if(!args.watch) return cb();
            gulp.watch('app/**/*.js',['scripts']);
            gulp.watch('app/**/*.ejs',['pages']);
            gulp.watch('app/**/*.css',['css']);
        })
    在tasks中新建一个clean.js
    引入包
        import gulp from 'gulp';
        import del from 'del';
        import args from './util/args';
    创建任务
        gulp.task('clean',()=>{
            return del(['server/public','server/views'])
        })
4.关联所有文件
    在tasks下新建 build.js 文件
    引入包
        import gulp from 'gulp';
        import gulpSequence from 'gulp-sequence';
    创建任务
        serve 一定要放到最后,处于同一级的用[]写在一起,需要注意先后顺序
        gulp.task('build',gulpSequence(
            'clean',
            'css',
            'pages',
            'scripts',
            ['browser','serve']
        ))
5.默认情况在命令行只输入 gulp 没有后任务时,所以需要
    在tasks创建 default.js 文件
    引入包
        import gulp from 'gulp';
    创建任务
        gulp.task('default',['build'])
6.编写 gulpfile.babel.js
    引入包
        import requireDir from 'require-dir';
    创建任务
        requireDir('./tasks');
7.编写 .babelrc
    {"presets":["es2015"]}
本项目需要安装的包一共有
    npm install
    gulp gulp-if gulp-concat webpack webpack-stream
    vinyl-named gulp-livereload gulp-plumber gulp-rename
    gulp-uglify gulp-util yargs gulp-live-server del gulp-util
    babel-loader babel-core babel-preset-env
    require-dir babel-preset-es2015 gulp-sequence

    --save-dev