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内容；