es6
1.项目构建
通过git命令创建项目文件：es6下包含app、server、tasks；app文件包含一个项目中的js、css和view文件；tasks文件夹下包含util文件夹；package.json(npm init创建)
app中的js=》入口文件index.js和class文件夹=》test.js
views=》错误模板文件error.ejs和其他index.ejs基本处理的入口文件
（初始化文件命令：touch ）
server下创建的文件夹需要提前安装express脚手架，它依赖于node所以要提前去node官网去安装下载安装包
安装命令：express -e .
注意：遇到了问题报express: command not found，解决方案参考：http://blog.csdn.net/dai_jing/article/details/38087443
执行 npm install 去自动安装服务器代码
构建目录tasts（处理文件的合并、目录的更新等）=》util（放置常见的脚本）=》args.js
npm init创建package.json
touch .babelrc(babel编译的时候要去读取配置)
touch gulpfile.babel.js（使用es6所以加babel）
2.args.js
import yargs from 'yargs'; //创建命令行参数 const args = yargs .option('production',{ boolean:true, default:false, description:'选择线上环境，不选默认开发环境 -production' }) .option('watch',{ boolean:true, default:false, description:'监听文件是否变动，是否需要自动编译' }) .option('verbose',{ boolean:true, default:false, description:'log' }) .option('sourcemaps',{ description:'强制生成sourcemaps' }) .option('port',{ string:true, default:8000, description:'设置服务器访问端口' }) .argv //设置的命令以字符创去解析
3.构建目录tasks下创建script.js(touch)
在文件中引入需要的包，然后在命令行安装 npm install yargs gulp gulp-if gulp-concat webpack webpack-stream vinyl-named gulp-livereload gulp-plumber gulp-rename gulp-uglify gulp-util --save-dev(安装慢、不成功、有问题，可以通过npm镜像解决问题例如淘宝镜像。。)
注意报错（
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail o n node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible . Use 'npm ls graceful-fs' to find it in the tree.
）：已是4.6.1，没处理 解决参考：https://segmentfault.com/q/1010000005749798
import gulp from 'gulp'; import gulpif from 'gulp-if'; //处理if判断 import concat from 'gulp-concat'; //处理字符创拼接 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.task('scripts',() => { return gulp.src(['app/js/index.js']) .pipe(plumber({ errorHandler:function () { } })) .pipe(named()) //js的编译 .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())) })
3.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())) })
4.tasks文件夹下创建处理模板的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())) })
5.tasks文件夹下创建服务器的脚本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(); gulp.watch(['server/public/**/*.js','server/views/**/*.ejs'],function () { server.notify.apply(server,[file]); }) //当路由。。发生变化需要重启才能监听服务器 gulp.watch(['server/routes/**/*.js','server/app.js'],function () { server.start.bind(server)(); }) })
6.tasks文件夹下创建脚本browser.js
import gulp from 'gulp'; import gulpif from 'gulp-if'; import gutil from 'gulp-util'; //gulp函数集合常用工具 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']); }); //当文件创建后需要重新编译入server的时候要将新的文件覆盖掉原来的，所以要清空指定的文件，所以要创建clean.js
7.下载新的依赖
npm install del gulp-util gulp-live-server --save-dev
8..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']) })
9..tasks文件夹下创建定义串起来的任务的先后顺序build.js
import gulp from 'gulp'; import gulpSequence from 'gulp-sequence'; //定义先后顺序的包 gulp.task('build',gulpSequence('clean','css','pages','scripts',['browser','serve']));
安装包 npm install gulp-sequence --save-dev
10..tasks文件夹下创建default.js
import gulp from 'gulp';
gulp.task('default',['build']);
11.执行gulp
注意报错：
dingqi@LAPTOP-SV6SV5RV MINGW64 ~/Desktop/es6
$ gulp
[23:13:45] Failed to load external module babel-register
[23:13:45] Failed to load external module babel-core/register
[23:13:45] Failed to load external module babel/register
[23:13:45] Using gulpfile ~\Desktop\es6\gulpfile.babel.js
[23:13:46] Task 'default' is not in your gulpfile
[23:13:46] Please check the documentation for proper gulpfile formatting
解决方案：
npm install babel-loader babel-core babel-preset-env --save-dev
gulpfile.babel.js编辑：
import requireDir from 'require-dir'; //引入文件的包 requireDir('./tasks'); //引入所以的文件
安装包 npm install require-dir --save-dev
bablerc编辑：
{ "presets": ["es2015"] }
安装包 npm install babel-preset-es2015 --save-dev
执行gulp可以成功
12.执行gulp --watch //加watch可以对文件监听，不会只执行一次
13.去浏览器打开localhost：3000
编辑app=》views=》index.ejs
!+tab回车快速创建页面模板
暂时手动刷新
14.在server下的入口app.js文件下加上
app.use(require('connect-livereload')()); //添加自动刷新
位置：
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(require('connet-livereload')());
app.use('/', index);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
终止服务 Ctrl+c
安装包 npm install connect-livereload --save-dev
15.测试
gulp --watch //执行
16.写入函数
进入app=》js=》index.js
编辑：
class Test{ constructor(){ this.a = 'hello world'; } } let test = new Test(); document.body.innerHTML = test.a;
在app=》views=》index.ejs页面引入
<script src="../js/index.js"></script>
17.打开浏览器已经更新
//构建工具部分完成！
