ES6学习笔记二－－构建工具脚本

安装依赖包：~/es6 $ 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

安装babel: ~/es6 $ npm install babel-loader babel-core babel-preset-env webpack --save-dev

安装：~/es6 $npm install gulp-live-server gulp-util del --save-dev

全局安装gulp: ~/es6　$npm install gulp -g

安装　~/es6$npm install connect-livereload --save-dev 　　　　  热更新的依赖

安装　~/es6$ npm install gulp-sequence --save-dev       　　　这是build.js里面用的处理关联顺序的依赖

安装　~/es6$ npm install require-dir --save-dev         这是gulpfile.babel.js为了引入目录下的文件的依赖包

运行 $gulp --watch 自动编译
实现热更新 在server/app.js 大概23行
在app.use(express.static(path.join(__dirname, 'public')));后添加
app.use(require('connect-livereload')());
ctrl+c停止服务

执行监听的命令：$gulp --watch 　，打开浏览器：localhost:8080查看页面

(不加--watch执行完一次就结束了，加上后是一直监听)

------------------------------------------------------------------------------------------------------

, gulp.task task(name[, deps], fn)

task()方法用于定义任务，传入名字、依赖任务数组、函数即可，gulp会先执行任务数组，结束后调用定义的函数，可以通过此手段控制任务的执行顺利。gulp.task创建任务方法：gulp.task('任务名',  ( )=>{   })    或者带回调函数的：gulp.task('任务名',  (cb)=>{   })   

gulp.src src(globs[, options])

src()方法输入一个glob或者glob数组，然后返回一个可以传递给插件的数据流

gulp.dest dest(path[, options])

dest()方法用来写文件，第一个参数表示最终输出的目录名。注意，它无法允许我们指明最终输出的文件名，只能指定输出文件夹名，而且在文件夹不存在的情况下会自动创建。

gulp.watch watch(globs[, opts], cb) or watch(globs[, opts], tasks)

watch()方法可以监听文件，它接受一个glob或者glob数组以及一个任务数组来执行回调．

---------------------------------------------------------------- -----------------------------

构建工具脚本在es6/tasks/　目录下．

es6/tasks/util/args.js  命令行参数创建：命令行参数初始化

看命令行里面有没有包含option里面的对应的几个命令．可以区分线上环境和开发环境．

import yargs from 'yargs';

const args = yargs;
.option('production',{
	boolean:true,　　　
	default:false,　　//命令中没有production时，默认为开发环境，有的话为线上环境
　	describe:'min all scripts'　//不被解析的
})

.option('watch',{
	boolean:true,
	default:false,
	describe:'watch all files' 
})

.option('verbose',{
	boolean:true,
	default:false,
	describe:'log' 
})

.option('sourcemaps',{
	describe:'force the creation of sourcemaps'
})

.option('port',{
	string:true,
	default:8080,
	describe:'server port'
})
.argv  //表示以字符串进行解析
export default args;

es6/tasks/server.js 编写服务器构建脚本：

import gulp from 'gulp';
import gulp from 'gulp-if';
import liveserver from 'gulp-live-server';
import args from './util/args';

gulp.task('serve',(cb)=>{
	//如果不是处于监听状态下，返回回调函数
	if(!args.watch) return cb();
	//如果在监听状态下，要创建服务器　--harmony表示当前命令行下执行后面的这个脚本server/bin/www
	var server = liveserver.new(['--harmony','server/bin/www']);
	//启动服务器
	server.start();
	//监听server目录下的js，ejs改变时的热更新
	gulp.watch(['server/public/**/*.js','server/views/**/*.js'],function(file){
		//通知服务器文件改变
		server.notify.apply(server,[file]);
	})
	//监听需要重启服务的文件．eg路由改变,接口变化
	gulp.watch(['server/routes/**/*.js','server/app.js'],function(){
		//重启服务
		server.start.bind(server())
	});

})

es6/tasks/css.js 编写css构建脚本

import gulp from 'gulp';
import gulpif from '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'))//此实例主要是监听js和.ejs变化，所以没加热更新，但一般都要监听css
})

es6/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()))　　//监听热更新
})

es6/tasks/scripts.js 脚本服务

import gulp from 'gulp';
import gulpif from 'gulp-if';
import concat from 'gulp-concat';　　//拼接
import webpack from 'webpack';　　　//打包
import gulpWebpack from 'webpack-stream';　　//gulp文件流打包
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,color} from 'gulp-util';  //用命令行输出log和色彩
import args from './util/args';　　　//导入命令行参数文件

gulp.task('scripts',()=>{
	return gulp.src(['app/js/index.js'])//先打开文件

  
  

   
   　　　.pipe(plumber({
   
    //错误处理
  
  
		errorHandle:function(){
		}
	}))
	.pipe(named())//文件重命名
	.pipe(gulpWebpack({ //对文件进行编译，３个参数
		module:{
			loaders:[{ //对js文件用babel编译
				test:/\.js$/,
				loader:'babel-loader'
			}]
		}
	}),null,(err,stats)=>{//第三个参数进行错误处理，第二个参数为null
		log(`Finished '${colors.cyan('scripts')}'`,stats.toString({
			chunks:false
		}))
	})
	.pipe(gulp.dest('server/public.js'))　//编译后的文件放置的路径
	.pipe(rename({//重命名　cp.min.js
		basename:'cp',
		extname:'.min.js'
	}))
	.pipe(uglify({compress:{properties:false},output:{'quote_keys':true}})) //压缩
	.pipe(gulp.dest('server/public/js'))　//压缩后文件存到server/public.js下面
	.pipe(gulpif(args.watch,livereload()))//监听热更新
})

tasks/browser.js   监听js/ejs/css,若发生变化就调用相应的脚本文件

import gulp from 'gulp';
import gulpif from 'gulp-if';
import gutil from 'gulp-util';
import args from './util/args';

//browser和scripts，pages，css的关联
gulp.task('browser',(cb)=>{
	//如果没有用监听
	if(!args.watch) return cb();
	//监听app里js变化时调用scripts构建脚本，完成后es6转成es5或3,写到server目录下的文件里
	gulp.watch('app/**/*.js',['scripts']);
	//监听app的模板文件变化
	gulp.watch('app/**/*.ejs',['pages']);
	//监听css
	gulp.watch('app/**/*.css',['css']);

});

tasks/clean.js 　　清空指定文件目录，因为每次编译要覆盖原来编译的文件，要先clean.

import gulp from 'gulp';
import del from 'del';
import args from './util/args';

gulp.task('clean',()=>{
	//清空js，css,和模板
	return del(['server/public','server/views'])
})

tasks/build.js :处理关联顺序　

import gulp from 'gulp';
import del from 'del';
import args from './util/args';

gulp.task('clean',()=>{
	//清空js，css,和模板
	return del(['server/public','server/views'])
})

tasks/default.js  :输入$ gulp　命令，不带任务名字时，会取执行默认任务即名为default的任务，这个任务取调用build.js文件．

import gulp from 'gulp';
// 如果gulp执行default任务,就去找build.js
gulp.task('default',['build']);

编写gulpfile.babel.js文件：把tasks下面的所有的包都引进来

import requireDir from 'require-dir';
// 引入tasks目录下的所有文件
requireDir('./tasks');

（需要npm 装require-dir）

编写  .babelrc文件:  这是babel的配置文件，配置preset，为了编译ES6语法．

{
"presets":["es2015"]
}

在app/view/index.ejs里面写内容：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>es6</title>
</head>
<body>
	I am here!
</body>
</html>

执行监听的命令：$gulp --watch 　，打开浏览器：localhost:8080查看页面

提示错误:Fail to load external module,忽略运行程序也是可以出现页面的．

报错之后：(1)  tasks/scripts.js中 loader:'babel'改成loader:'babel-loader'  //新版的webpack不允许缩写，所以需要写完整
        (2)  server/app.js中在最下面加上 module.exports = app;
        (3)  server/bin/www中var port = normalizePort(process.env.PORT || '3000');改成var port = normalizePort(process.env.PORT || '8080');   //3000是默认端口，容易被占用，所以改成8080或其他
        (4)  安装require-dir
        (5)  tasks/util/args.js最后加上export default args;

 　（６）es6/tasks/scripts.js 脚本服务里面的　webpack配置的babel-loader必须要加loader后缀了，不能直接写babel,会报错．

参考这个博客解决方法：https://www.cnblogs.com/jingouli/p/7605183.html　 ES6环境搭建