一、gulp安装和使用
1、安装
在vscode新建终端里面
（1）先全局cnpm install gulp -g
（2）本地安装cnpm install gulp -D（注意：每次新建项目都要重新进行本地安装安装）
（3）初始化：nmp init -y
（4）检验安装成功：gulp -v查看有两个版本号。
2、终端常用命令
（1）查看gulp版本号：npm view gulp versions
（2）指定安装版本：cnpm install gulp@版本号 -g/-D
3、gulp常用方法
（1） 执行任务
a、 gulp.series("任务名"，"任务名1"));按顺序执行任务（先后顺序）
b、gulp.parallel("任务名"，"任务名1"));并行执行（同时开始谁先完成谁完成）
（2）gulp.src(找到要处理的文件)
（3）gulp.pipe(处理)
（4）gulp.dest(“dist” ) 复制到dist文件夹下面
（5）gulp.watch（监听）
gulp.watch（路径，gulp.series（“任务名”））
（6）gulp里面的默认任务default（必须写default）
a、gulp.task("default", gulp.series("任务名"，"任务名1"));
b、执行时直接在中端输入gulp即可
（7）拷贝
a、拷贝单个指定文件
例如：gulp.src("index.html").pipe(gulp.dest("dist"));、
b、拷贝同一扩展名的所有文件（用*表示所有）
例如：gulp.src("img/*.jpg").pipe(gulp.dest("dist/img"));
c、拷贝不同扩展名的所有文件（用{ }里面写不同扩展名）
例如：gulp.src("img/*.{jpg,png}").pipe(gulp.dest("dist/img"));
d、一个*（所有子文件和子目录，子目录下面的内容不能拷贝，**就可以拷贝所有的文件）
例如：gulp.src("img/**").pipe(gulp.dest("dist/img"));
e、将不同目录下的文件拷贝到同一目录下(数组里面，gulp.src( [“文件路径”])，排除文件用！)
例如gulp.src(["a/a.json","b/b.xml"]).pipe(gulp.dest("dist/data"));
二、gulp插件
1、gulp-sass（css扩展语言）
先在vscode里面安装
（1）变量（中划线和下划线表示一个变量）
（2）嵌套
a、&：hover（内部父选择器）
b、群组选择器
（3）引入
a、加_就不会转化成单独的css文件
（4）默认变量值,!default
（5）混合器 （大段样式重用）
@mixin 混合器名{
}
使用时：@include 混合器名
（6）继承 @extend
（7）注释
2、gulp-connect
3、gulp-concat
4、gulp-uglify
5、gulp-rename
6、gulp-sourcemaps
（1）解决问题：浏览器打开控制台以后文件对应的不是我们编写的源码
通过这个我们在项目开发时浏览器f12就可以直接对应我们编辑的.scss文件了
三、开发项目时搭建服务器完整过程
1、准备工作
在项目文件夹下新建一个gulpfile.js文件(保证需求完成的文件，在这里面创建任务），在项目目录下打开终端，对gulp进行初始化，然后再进行gulp本地安装。同时在项目文件夹下创建一个sass文件夹。
2、在gulpfile.js文件里面引入资源，用require命令
3、在gulpfile.js文件里面创建自己的任务
4、在gulpfile.js文件里面创建bulid任务
gulp.task("build", gulp.series("html", "sass"));
5、监听文件的变化来执行相应的任务
6、连接服务器
7、执行默认任务
gulp.task("default",gulp.series("bulid","server","watch"));
注意：如果遇到任何问题都可以将项目文件夹下的node_modles删除然后重新安装gult及插件即可
四、开发项目时注意的点
1、关于样式
注意我们编辑的源码是sass文件夹下面的.scss文件和项目下的.html文件，这些文件都会通过gulp拷贝到dist文件夹下面。dist文件夹下面的所有东西都不用动。dist文件夹下面有html文件夹，css文件夹等。我们编辑的html文件在引入.css文件的时候要注意引入的路径是../css/某.css,总之注意引入的路径。
五、模块化（每一个js文件都是一个模块）
1、前端js模块化解决方案
（1）AMD——异步模块定义规范（require.js）
a、定义模块：define(函数)
b、暴露接口：return { }
c、其他模块中里面引入：define（[ 模块],function(){ }）
d、在html文件中引入<script src="require.js" data-main="需要引入的模块"></script>
总结： 1、定义模块：define（函数）
2、return暴露接口，
3、用[ ]来引入模块
4、 html引入时需要加data-main属性
（2）CMD——通用模块定义规范（sea.js）
a、定义模块：define(函数里面必写三个参数require，exports，module)
b、暴露接口：module.exports={ 接口}
c、其他模块中里面引入：define（function(require，exports，module){ var 变量名=require（“模块”）}）
d、在html文件中引入。先src为sea.js，然后再通过seajs.use("模块")来使用
总结： 1、定义模块必写三个参数
2、暴露接口：module.exports={接口}
3、模块引入：require
4、html引入：先src为sea.js，然后再通过seajs.use("需要引入的模块")来使用
（3）ES6模块化（标准，浏览器原生支持）
a、暴露接口export（js其他代码正常写在最后用export{接口}）
b、在模块中加载其他模块import（import {接口 } from“文件路径”）
c、在html文件中引入（注意加上属性type="module"）
<script src="需要引入的模块" type="module"></script>
d、default（其他人不需要知道我的模块暴露的接口名，但是可以使用我的接口）
注意：没有使用default时，引入模块的接口名必须要和暴露模块的接口名一致才可以。引入路径时，./代表目前所在的目录，../表示上一层目录，/代表根目录。
总结：记住export、import、default，html引入时要加上type="module"。
2、commonJS ——后端js模块化解决方案nodejs里面
1、其他代码正常写，然后暴露接口：module.exports.接口名 = 接口名；或module.exports = {接口名}；
2、在模块中加载其他模块：require
3、在终端直接在该目录下面node 模块名
