ESM（ECMA Script Modules）
AMD：
异步模块定义，我们引用js文件都是使用script标签来引用的，这种通常情况下都是异步引用，我们一般在网络中引用文件，引用完之后才能进行解析和运行。我们请求一个模块也是一样，如果这个模块返回的时间不固定，我们只能异步引用的方式，让模块导入之后在开始运行。
1.Requirejs
RequireJS是一个javascript文件和模块加载程序，针对浏览器进行了优化，但可以在其他javascript环境中使用，如Rhino和node,可以提高代码的速度和质量
它可以实现js文件的异步加载，避免网页失去响应，管理模块之间的依赖性，便于代码的编写和维护。
data-main
指定网页程序的主模块，data-main申明的文件会被第一个被requireJS加载
可以创建 main.js->s.js->math.js
main.js是入口函数，依赖导用s.js这个模块，s.js的作用是计算图形的面积，而在math.js中定义了一些数学运算，相当于s.js这个模块是依赖于math.js这个模块的，而math.js是独立于其他模块的，
定义到了main.js的入口文件
require.config()
可以对模块的加载行为进行自定义，写在主模块的头部，参数就是一个对象，里面有一个重要的属性path,这个属性定义了各个模块的加载路径，还有另一种方法baseUrl,它是直接改变基目录的一种方法
define()函数
模块必须使用特定的define函数进行定义，如果一个模块不依赖其他的模块，就可以直接定义在define函数之中，
2.模块的定义
1.独立模块
2.依赖于其他模块的模块
在math.js中定义模块的方法，
define(function(){
var PI = 3.14;
function multiple(num1,num2){//定义一个乘法，
return num1 num2;
}
function square(n){//定义平方
return Math.pow(n,2);
}
return {//将数据导出
PI : PI,
multiple : multiple,
square : square
}
})
在s.js中定义模块的方法，
define(【'./math'】,function(m1){//用中括号定义依赖模块的名字，并且要传入一个参数m1代表这个math模块，如果引用了多个模块，要按照顺序写入对应的参数，
function circle(r){//定义一个圆的面积,r代表半径
return m1.multiple(m1.PI,m1.square(r));
}
return{
s_circle : circle;//返回这个方法
}
})
在main.js中定义模块的方法，
(function(){//立即执行函数
require(【'./s】,function(s1){//定义依赖s.js的模块,通过参数s1传递
console.log(s1.s_circle(10));
})
})()
3.模块的导入
CommonJS & Webpack
commonjs在定义模块的时候是使用同步的方式，前端开发的js比如在引用一个script的标签的时候是异步的方式，在前端中使用commonjs需要使用到一些辅助工具，可以使用webpack来进行commonjs的模块开发，它其实是一个前端的打包工具，它能将请求的动态资源转换成静态的资源，在这里我们使用commonjs请求的模块全部打包到一个文件中，以便于我们使用同步的模块请求，先安装webpack。
1.nodeJS模块的定义。
2.nodeJS模块的导入。
3.Webpack 和前端CommonJS.
main.js的定义方式
var s = require('./s');
console.log(s.s_circle(10));
math.js的定义的方式
var PI = 3.14;
function multiple(num1,num2){
return num1 num2 ;
}
function square(n){
return Math.pow(n,2);
}
module.exports = {
PI : PI,
multiple : multiple,
square : square
}
s.js的定义的方式
var m = require('./math');
function circle(r){
return m.multiple(m.PI,m.square(r));
}
module.exports = {
s_circle : circle
}
1.什么是GULP
1.automate and enhance your workflow 自动化、增强你的工作流
2.gulp is a toolkit for automating painful or time-consuming tasks in your development workflow,so you can stop messing around and build something
gulp是一个工具包，可以帮助我们解决开发过程中的痛苦或耗时的任务，避免出现低级错误。
3.特点
1.易于使用
2.构建快速
3.插件高质
4.易于学习
2.GULP配置环境
1.安装nodejs
2.全局安装gulp-cli
npm install gulp-cli -g
3.创建package.json
在需要使用的环境下 npm init
4.局部安装gulp
npm install gulp --save-dev（最好用这个版本，最新版本可能报错npm install --save-dev gulp@3.9.1）;会将安装接入到package当中，这样我们下次再直接安装这些包的时候，npm install 会将介入进去的包的package一起下载下来，
5.创建gulpfile.js
var gulp = require('gulp');
gulp.task('default',function(){
//place default code
})
6.命令行执行gulp命令
3.GULP基本使用
4.GULP的插件使用与安装
gulp的基本使用
1.开发项目路径，以及构建中需要做的事
src文件夹是开发时候用的，发布的时候会自动生成dist文件夹，先建立一个gulpfile.js，gulp操作的时候是基于任务，gulp定义任务是gulp.task();
2.gulp.task();
创建一个gulp任务，第一个参数为任务的名称，第二个参数是任务所依赖的其他任务（如果任务没有依赖，可以省略），第三个参数是执行任务所需要的代码
在cmd中的作业路径中输入任务的名称测试gulp copy-index是否成功，
3.gulp.src();
需要操作的文件的路径
4.gulp.dest();
需要操作的文件复制到目的地的路径。
5.gulp.watch();
作用是监听文件的改变，并执行备用的任务
1.gulp自带watch
2.gulp-watch
var gulp = require('gulp');//请求这个模块
gulp.task('copy-index',function(){//第一个参数copy-index,这里因为是一个独立的任务，没有其他依赖任务，所以是独立的，不需要第二个参数
gulp.src('./src/index.html')//取到指定的文件。
.pipe(gulp.dest('./dist'))//pipe是管道的意思，作用是取得pipe之前的文件流作为pipe的参数内函数执行的输入,gulp.dest的作用是将输入的文件流写入到指定的路径下，现在输入的文件流就是src取到的文件流，
});
gulp.task('copy-html',function(){
gulp.src('./src/html/.html')//代表html文件下的所有文件
.pipe(gulp.dest('./dist/html'))
});
gulp.task('copy-vendor',function(){
gulp.src('./src/vendor//.')//代表我要递归的选到所有的文件，.代表不管是什么文件
.pipe(gulp.dest('./dist/vendor'))
});
gulp.task('copy-assets',function(){
gulp.src('./assets//.')
.pipe(gulp.dest('./dist/assets'))
});
//一个命令一个命令是非常繁琐的，可以将这四个命令进行合成,cmd中的相应路径中输入gulp copy就可以了
gulp('copy',【'copy-index','copy-html','copy-vendor','copy-assets'】);
GULP的插件使用
1.链接js (gulp-concat)
在需要安装的项目路径cmd npm install gulp-concat,安装完成后，在fulpfile.js中请求这个模块，在相应的路径中输入gulp concat,并且在html中引用js的时候要写dist文件夹中的路径，因为那是打包部署的文件，但不要去修改任何dist中的文件，
var concat = require('gulp-concat');//请求这个模块
2.压缩js (gulp-uglify)
cmd中安装 npm install gulp-uglify
var uglify = require('gulp-uglify');//请求这个模块
gulp.task('concat',function(){
gulp.src('./src/script//.js')
.pipe(concat('output.js'))//链接js，然后设置文件名
.pipe(uglify())//将连接之后的文件进行压缩
.pipe(gulp.dest('./dist/js'));
})
3.编译sass (gulp-sass)
npm install gulp-sass gulp-minify-css//两个一起安装
var sass = require('gulp-sass');
4.最小化css (gulp-minify-css)
var minify = require('gulp-minify-css');
5.文件重命名 (gulp-rename)
有时候我们需要两份文件，一份未压缩，一份已经压缩，为了避免压缩过的文件覆盖掉为压缩的版本，所以需要重命名。cmd安装命令npm install gulp-rename
gulp.task('sass',function(){
gulp.src('./src/style/.scss')
.pipe(sass())
.pipe(gulp.dest('./dist/style'))//编译后的文件保存
.pipe(minify())//压缩
.pipe(rename(function(filename){//因为源文件有多个，所以需要一个函数去重命名
filename.basename += '.min';//basename是表示源文件的名字
}))
.pipe(gulp.dest('./dist/style'));
})
6.监听 gulp.watch
让gulp更有效的运行，gulp有一个监听方法，监听任务中监听sass文件，js文件等等，如果有任何文件发生变化，watch它就会自动实行某项任务
gulp.task('watch',function(){
gulp.watch('./src/index.html',【'copy-index'】);//监听src下的index.html有任何的变化，执行copy-index任务
gulp.watch('./src/script//*.js',【'concat'】);
gulp.watch('./src/vendor//.',【'copy-vendor'】);
gulp.watch('./src/html//*.html',【'copy-vendor'】);
gulp.watch('./assets//.',【'copy-assets'】);
gulp.watch('./src/style//*.scss',【'sass'】);
})
7.热更新 (gulp-connect)
当编辑我的代码时，进行了保存以后，我打开的所有相关文档都会得到更新，方便我们测试和开发
实际上gulp-cnnnect原本是用来建立服务器的，但也支持热更新
cmd命令安装npm install gulp-connect
var connect = require('gulp-connect');
//代码效果参考：http://www.lyjsj.net.cn/wz/art_24163.html
gulp.task('server',function(){connect.server({//建立一个服务器
root:'./dist',//建立两个参数，服务器的源地址
livereload:true//这个服务器自动刷新true
})
})
gulp.watch('./dist//.',【'reload'】);//这是gulp.task下的一个方法，监听dist下的所有文件，执行reload任务
gulp.task('reload',function(){//如果文件有了任何改变，用watch来调用来进行自动的刷新
gulp.src('./dist/.html')
.pipe(connect.reload());//调用方法，
})
gulp.task('default',【'server','watch'】,function(){//可以在cmd中直接输入gulp，这是默认的任务,回调两个任务，而不需要一个一个进行任务的运行
})
8.错误处理 (gulp-plumber)
如果在后端调式的时候出现错误，会导致cmd中gulp正在运行监听和服务器的任务中断，这时候需要用到错误处理。
cmd安装命令 npm install gulp-plumber
var plumber = require('gulp-plumber');//调用gulp-plumber
//比如在sass任务中加入错误处理
gulp.task('sass',function(){
gulp.src('./src/style/.scss')
.pipe(plumber())//加入错误处理，这样后台出错的时候，也不会导致监听服务中断
.pipe(sass())//编译scss
.pipe(gulp.dest('./dist/style'))
.pipe(minify())
.pipe(rename(function(filename){
filename.basename += '.min';//basename是表示源文件的名字
}))
.pipe(gulp.dest('./dist/style'));
})
