构建es6环境

2018-06-01

项目目录创建

1. 在es6项目问价下创建3个目录文件

app

server

tasks

2. 在app下创建

css

js

views

3. 在app/js下创建

index.js [入口文件]

创建class文件夹

app/class下创建test.js
4. 在app/views下创建

error.ejs
index.ejs [相当于html使用]
5. 在es6目录下创建设置babel编译工具配置文件.babelrc
6. 在es6下创建gulpfile.babel.js文件

## 命令行处理、创建js编译任务

1. 进入es6/server目录中
启动脚手架，表示启用ejs模板引擎

1
2
3

express -e

执行 npm install || cnpm install

2. 在es6/tasks目录下创建util文件
在es6/tasks/util文件下创建args.js文件
【注意】：在项目根目录中创建package.json依赖包文件（配置依赖），使用以下命令：

1	npm init \|\| cnpm init

3. 编写args.js命令行处理文件


import yargs from 'yargs'
   //对参数进行操作
   const args = yargs
   .option('production',{
       boolean:true,
       default:false,    //命令中没有production时，默认为开发环境，有就为线上环境
       describe:'min all script'
   })
   //设置要不要自动编译
   .option('watch',{
       boolean:true,
       default:false,
       describe:'watch all files'
   })
   //设置是否需要输出编译日志
   .option('verbose',{
       boolean:true,
       default:false,
       describe:'log'
   })
   //处理压缩
   .option('sourcemaps',{
       describe:'fource the creation of sourcemape'
   })
   //设置服务器端口
   .option('port',{
       string:true,
       default:8080,
       describe:'server port'
   })
   .argv   //以字符串形式解析
   export default args;

4. 在tasks目录下创建构建脚本script.js文件并编写script.js文件
① 使用以下命令安装该代码中需要导入的依赖【注：后面不在重复展示安装依赖的过程】

1 2	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

② 编写scripts代码


import gulp from 'gulp';  //整个的构建都是基于gulp
import gulpif from 'gulp-if'; //gulp语句中做if判断的
import concat from 'gulp-concat';  //gulp中处理文件拼接
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创建脚本任务
gulp.task('scripts',() => {
return gulp.src(['app/js/index.js'])
	
//处理异常
    .pipe(plumber({
        errorHandle:function(){
	
        }
    }))
    .pipe(named())
    .pipe(gulpWebpack({
        module:{
            loaders:[{
                test:/|.js$/,
                loader:'babel-loader'
            }]
        }
    }),null,(err,stats) => {
         log(`Finished '${colors,cyan("scripts")}'`,stats.toString({
             chunks:false
         }))
    })
		
    .pipe(gulp.dest('server/public/js'))  // 必须uolify放到server上才额能运行
    .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()))
 })

5. 在tasks目录下创建处理模板的脚本page.js文件


import gulp from 'gulp';  //整个的构建都是基于gulp
import gulpif from 'gulp-if'; //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()))   //监听热更新
})

6. 在tasks目录下创建处理css的脚本css.js

import gulp from 'gulp';  //整个的构建都是基于gulp
import gulpif from 'gulp-if'; //gulp语句中做if判断的
import livereload from 'gulp-livereload';//热中心，文件自动刷新
import args from './util/args';

gulp.task('css',() => {
    //打开文件，并复制到server/public下，**表示全部的，*表示.css文件，包括嵌套文件
    return gulp.src('app/**/*.css')
        .pipe(gulp.dest('server/public'))
})

7. 在tasks目录下创建处理服务器的脚本server.js

import gulp from 'gulp';  //整个的构建都是基于gulp
import gulpif from 'gulp-if'; //gulp语句中做if判断的
import liveserver from 'gulp-live-server'  //启动服务器的包
import args from './util/args';


//启动服务
gulp.task('server',(cb) => {
    //如果不在监听状态下，返回回调函数
    if(!args.watch)
        return cb();
    //在监听条件下，创建服务器
    var server = liveserver.new(['--harmony','server/bin/www']);
    server.start(); //启动服务器


    //监听server目录下的js、ejs改变时热更新
    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)();  //调用server的start的api
    });
	})

8. 在tasks目录下创建default.js文件

import gulp from 'gulp';  //整个的构建都是基于gulp
	
	
//如果gulp执行答default就去找build.js文件
gulp.task('default',['build']);

9. 编写gulpfile.babel.js文件

1
2
3

import requireDir from 'require-dir';

requireDir('./tasks');

10. 编写.babelrc文件【注：需要入住依赖babel-preset-es2015】


{
 "presets":["es2015"]
}

11. 运行gulp –watch
未报错，但是无法运行，运行命令结果如下图：

最终问题在server.js里面的一个重启服务的文件函数调错了，具体如下图：