ES6项目构建

前端工程一般具有以下四个步骤：

• 基础构架（项目文件目录结构）
• 任务自动化（自动监听、检测、压缩、响应）
• 编译工具（babel、webpack）
• 代码实现
  

目录结构如下

• app(前端）
• server(服务器）
• tasks（构建工具）
-

step1：服务器端代码

在命令行输入：
express -e .(express脚手架工具，－e表示ejs模版引擎，.表示当前目录）npm install

step2：在tasks目录中创建任务js脚本，例如:编译、合并、文件更新

在命令行输入：
mkdir util
touch util/args.js

step3: 返回根目录，创建package.json文件（npm安装依赖包）

在命令行输入:
npm init(自动创建package.json文件）
touch .babelrc (创建babel编译配置文件）
touch gulpfic.babel.js(创建使用es6语法的gulp配置文件）
整个项目用到的依赖包为：
package.json文件：

{  "name": "es6",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC",  "devDependencies": {    "babel-core": "^6.24.1",    "babel-loader": "^7.0.0",    "babel-preset-env": "^1.5.1",    "babel-preset-es2015": "^6.24.1",    "del": "^2.2.2",    "gulp": "^3.9.1",    "gulp-concat": "^2.6.1",    "gulp-if": "^2.0.2",    "gulp-live-server": "0.0.30",    "gulp-livereload": "^3.8.1",    "gulp-plumber": "^1.1.0",    "gulp-rename": "^1.2.2",    "gulp-sequence": "^0.4.6",    "gulp-uglify": "^2.1.2",    "gulp-util": "^3.0.8",    "require-dir": "^0.3.2",    "vinyl-named": "^1.1.0",    "webpack": "^2.6.1",    "webpack-stream": "^3.2.0",    "yargs": "^8.0.1"  }}

step4： 在util/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 scripts'   })   //输出详细的命令行日志   .option('verbose', {    boolean: true,    default: false,    describe: 'log'   })   //强制生成sourcemaps   .option('sourcemaps', {    describe: 'force the creation of sroucemaps'   })   //设置服务器端监听的端口，默认为8080   .option('port', {    string: true,    default: '8080',    describe: 'server port'   })   .argv//表示输入命令行的内容以字符串的形式进行解析   export default args;

step5: 创建命令行编译js脚本

在命令行创建 touch tasks/script.js
在script.js头部引入依赖模块：

import gulp from 'gulp';import gulpif from 'gulp-if';//glup中处理if判断import concat from 'gulp-concat';//glup中处理文件拼接；import webpack from 'webpack';//webpack工具包；import gulpwebpack from 'webpack-stream';import named from 'vinyl-name';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';

在命令行安装所引入的依赖包：

npm install gulp gulp-if gulp-concat webpack-stream vinyl-name gulp-livereload gulp-plumber gulp-uglify gulp-util yargs

在script.js中，创建任务；

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('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()))})

step6: 创建模版、服务任务脚本

1、在命令行新建touch tasks/pages.js文件
在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’);//打开app目录下所有ejs文件
.pipe(gulp.dest(‘server’))
.pipe(gulpif(args.watch,livereload()))
})

2、在命令行查新建touch tasks/css.js文件
在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()))  })

3、创建服务器端任务脚本
在命令行查新建touch tasks/server.js文件
在server.js头部引入依赖包；

  import gulp from 'gulp';  import gulpif from 'gulp-if';  import liveserver from 'gulp-live-server';  import args from './util/args';//命令行参数

创建任务：

  gulp.task('server',()=>{    if(!args.watch) return cb();//如果不在监听状态，直接返回回调函数    var server = liveserver.new(['--harmony','server/bin/www'])//创建服务器    server.start();    //监听文件发生变化，    gulp.watch(['server/public/**/*.js','server/views/**/*.ejs'],function(file){        server.notify.apply(server,[file]);    })    //监听到以下文件改变时，重新启动服务器 gulp.watch(['server/routes/**/*.js','server/app.js'],function(){         server.start.bind(server)();    })  })

step7: 浏览器监听任务脚本

在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'])//如果app/**/*.js发生了改变，那么，会自动调用script.js这个脚本    gulp.watch('app/**/*.ejs',['pages'])    gulp.watch('app/**/*.css',['css'])})

step8: 创建清空脚本

清空public里面的内容：
在tasks下新建claen.js文件，写入下面代码：

import gulp from 'gulp';import del from 'del';import args from './util/args.js'gulp.task('clean',()=>{  return del(['server/public','server/views'])//clean这两个文件夹})

step9: 创建任务串联脚本

在tasks下新建bulid.js文件，写入下面代码：

import gulp from 'gulp';//保证任务之间关联关系和顺序的包import gulpSequence from 'gulp-sequence';//脚本任务执行的顺序为：clean->css->pages->scripts->[browser,server]gulp.task('bulid',gulpSequence('clean','css','pages','scripts',['browser','server']))

在tasks下新建default.js文件，写入下面代码：

import gulp from 'gulp';gulp.task('default',['bulid']);

step10: 编写.babelrc文件

{    "presets":["es2015"]}   

step11: 编写gulpfile.babel.js文件

import requireDir from 'require-dir';requireDir('./tasks');// 把tasks里面所有的文件加载进来运行；

step12: 运行检测

1、在命令行输入gulp
结果如下说明项目搭建成功：

2、当输入gulp –watch时，服务器处于监听状态，3000端口有效

在app下的index.ejs中写入

在浏览器访问localhost：3000时，

3、在服务端server的app.js中，加入热更新链接的包，并且npm install安装它：

npm install connect-livereload --save-dev

4、再次检测：
在app下的index.ejs中修改html，保存，查看浏览器，不刷新就能看到你修改的html内容；