项目构建的目录—创建文件夹

1.文件夹

app 前端代码

        js

            class

            index.js 入口文件

        css

        views 前端模板

            error.ejs 错误模板

            index.ejs 入口模板

2.server 服务器代码

3.tasks 构建工具

        util 放置常见脚本

            args.js

4.package.json npm依赖包的配置文件 (用命令创建：npm init)

5. .babelrc babel进行编译时自动寻找的文件。名字不能更改，缺少则babel无法读取配置文件 (用命令创建：touch .babelrc)

6. gulpfile.babel.js  gulp配置文件，此处不使用gulpfiles.js，因为我们使用的是ES6语法。(用命令创建：touch gulpfile.babel.js)

（1）对创建命令行参数做处理（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' })

//强制生成sourcemap .option('sourcemaps',{ describe:'force the creation of sourcemap' })

//设置服务器端口 .option('port',{ string:true, default:8080, describe:'server port' })

//表示对输入的命令行内容以字符串进行解析

.argv

（2）创建构建脚本对js做处理（用命令行：touch tasks/scripts.js）

（安装包命令：npm install gulp gulp-if gulp-concat webpack webpack-stream vinyl-named gulp-livereload gulp-plumber gulp-rename gulp-uglify gulp-util yargs --save-dev

--save-dev 表示在package.json中写入创建安装包的一些依赖字段

import gulp from 'gulp';import gulpif from 'gulp-if';//用gulp语句中做if判断的

import concat from 'gulp-concat';//gulp中处理文件拼接的

import webpack from 'webpack';

import gulpWebpack from 'webpack-stream';//gulp处理的是文件流，对webpack的处理要结合webpackstream

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';//处理js css 压缩

import {log,colors} from 'gulp-util';//在命令行工具输出的包

import args from './util/args';//命令行参数进行解析

//创建脚本编译的一个任务

gulp.task('scripts',()=>{ return gulp.src([app/js/index.js])

//打开文件

.pipe(plumber({ errorHandler:function(){//处理错误逻辑 } }))

.pipe(named())//文件重命名

.pipe(gulpWebpack({//js编译 module:{ loaders:[{ test:/\.js&/, loader:'babel' }] } }),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()))})