gulp 是一个基于node环境的项目开发的 自动化打包构建工具
项目上线时，体积越小越好，自动化打包构建工具可以帮助我们实现
一.gulp命令
1. npm init
在控制台输出npm init
package name：（game） 输入包（项目）的名字，自己定义
version（1.0.0） 设置初始版本 直接回车代表默认1.0.0版本
description： 描述信息，自己定义
entry point：（index.js） 入口文件，这个项目从哪开始，回车代表默认index.js
test command： 测试的命令，回车代表没有不写
git repository git仓库地址，这个包在git上存储的地址
keywords： 关键字，在github官网搜索的关键字
author： 作者名
license（isc） 许可证，直接回车
以上都输出完后，会把你输入的所有数据都放在一个对象里显示，
并提示Is this OK？（yes） 回车表示默认yes
创建成功后，会在当前路径上有一个package.json文件
但是这个文件有两个参数没有帮你设置需要自己手动设置
"dependencies": {
},
"devDependencies": {
}
dependencies表示包（项目）运行所依赖的第三方模块或者包
devDependencies表示开发环境使用的第三方模块或者包
相当于jq中开发使用的jq代码和项目上线时使用的代码
想要添加第三方的包就在当前目录下打开终端，输入 npm install +包名 + --save
2.npm help
如果对某条命令不熟悉 可以使用`npm <command> -h` 来查看帮助信息
比如在控制台输出init不知道参数是什么，可以直接在控制台打印 npm init help查看参数信息
快捷写法 -h
3.npm install
本地的包默认是在当前路径下，创建node_modules目录，里面存放所有的安装包
如果指定了 "--global" 则是全局安装的包,可以在任意路径执行包里的命令
安装包也可以指定一个包名,如果没有指定,默认安装'package.json'里所有依赖"dependencies"的安装包
安装指定的安装包也可以指定版本'npm install jquery@2.X'
如果需要记录该依赖，则需要指定`--save`或者`-S`参数：`npm install jquery -S`
别人下载你的代码不会下载第三方包,没有记录依赖的话,协助开发的时候,别人的代码会因为没有第三方包出错
如果需要记录该调试依赖，则需要指定`--dev-save`或者`-D`参数 `npm install jquery -D`
快捷写法 i
4.npm uninstall
卸载一个安装包，以及一个别名方法：`remove`
用法和安装一样的，支持`-S`和-`D`参数，表示连同依赖一并删除
快捷写法 un
5.npm run
用来运行脚本命令的，就是package.json里面scripts定义的命令
二.任务机制gulp
需要执行gulp命令需要在当前文件的路径下创建一个gulpfile.js文件,用来定义gulp命令
1.引入gulp模块,const gulp = require("gulp")
2.引入构建过程中 所需要的第三方的包
const concat = require("gulp-concat")
3.使用解构赋值 按需提取模块的方法（提取src和dest方法）
let { src, dest } = gulp;
4.定义gulp任务，gulp运行时 会自动读取该文件的内容
gulp是任务机制，每个任务 是一个异步函数 通过exports导出该任务,最少需要有一个任务
exports.defualt = function(cd){ cd（）}
任务通知机制：必须要有一个异步返回的信号
这个信号可以是一个promise对象 或者回调cd
直接在终端运行gulp命令 相当于`gulp defualt` 执行的是default任务
5.使用gulp重构文件
注意：所有使用的方法必须像上面一样引入第三方包
（1）复制src下的文本内容到dist目录下
exports.default = function (done) {
return src("./src/foo.txt").pipe(dest("./dist")); // 复制
}
（2）执行任务js 执行动作对应一个函数
exports.css = function () {
return src("./src/css/*.css")
.pipe(concatCss("index.css")) //pipe(里面的concatCss是第三方包里的方法，包括以下所有)
.pipe(cleanCss({ compatibility: 'ie8' }))
.pipe(rename({ extname: '.min.css' }))
.pipe(dest("./dist"));
}
（3）执行sass和less 转义成css
exports.sass = function () {
return src("./src/scss/demo.scss")
.pipe(sassCss())
.pipe(dest("./dist"))
}
（4）重构html文件内容
exports.html = function () {
// html输出之后 注意嵌入资源css，js之类的路径 要转化
return src("./index.html")
.pipe(htmlmin({
removeComments: true, // 清除HTML注释
collapseWhitespace: true, // 压缩HTML
collapseBooleanAttributes: true, // 省略布尔属性的值
removeEmptyAttributes: true, // 删除所有空格作属性值
removeScriptTypeAttributes: true, // 删除<script>的type
removeStyleLinkTypeAttributes: true, //删除<style>的type
minifyJS: true, // 压缩页面JS
minifyCSS: true // 压缩页面CSS
}))
.pipe(dest("./dist"));
}
