gulp的安装

保存对代码的热爱并保存怀疑态度

一、将node作为集成环境,下载第三方模块包

在cmd中运行
node安装详见：node（安装，及简易服务器的搭建）

1. node安装成功后会自带一个npm的包管理器
2. npm的使用
   • 查看当前npm的版本号：npm -v
   • 创建项目的配置文件（初始化项目）：npm init
   • 下载安装指定包：npm install 名字
   • 卸载指定包：npm uninstall 名字
   • 清除缓存：npm cache clean
3. 从哪下 - npm的下载源
   • https://www.npmjs.com/
   • 为了方便的管理npm的下载源
     • 使用第三方工具：nrm
       • 下载：npm i nrm -g
     • 使用：
       • 查看现有源：nrm ls
       • 切换源：nrm use 源名
       • 添加源：nrm add 源地址 源名
       • 删除源：nrm del 源名
       • 测试源速度：nrm test
       • 查看帮助文档：nrm help
4. 下到哪 - 项目
   • 全局：计算机的全局
     • npm install 名字 -g
   • 局部：当前打开小黑框的路径内（项目内）
     • npm install 名字
     • npm install 名字 -S
     • npm install 名字 -D

二、gulp的安装

1. 下载全局的gulp：npm i gulp -g
2. 创建新文件夹：
   • 注意路径中不要存在中文，该文件夹名称不允许叫gulp
3. 使用小黑框进入这个新文件夹
4. 下载局部的gulp：npm i gulp -D
   • 出现node_modules的文件夹
5. 创建项目配置文件：npm init -y
   • 又出现package.json的文件
6. 测试
   • 保证小黑框的路径在这个下载了局部gulp和创建了项目配置文件的新文件夹内
   • 执行：gulp -v
   • 可以看到两个版本号
     • 全局
     • 局部

在下载局部的文件夹内创建一个gulpfile.js 这个文件名是唯一的
7. 注意问题：

• 超时：换网，先卸载，再重新下载
• 404：仔细检查命令，重新下载
• 未知错误：仔细检查命令，先卸载，再重新下载
• 只能看到全局，看不到局部
  • 没有下载局部
  • 小黑框的路径不对

三、gulp的介绍和使用

1. gulp是node的第三方模块
2. 介绍：
   • gulp用来对开发中的文件进行打包，压缩，编译等处理
   • 基于node的前端自动化构建工具
   • 以流的方式，处理文件数据
   • 主流的前端自动化构建工具：webpack，gulp，grunt，browserify
3. gulp的基础使用
   • 采用的是node的第三方模块的开发方式，定义gulp指令
     • exports.模块名 = 功能
       • exports.default = defaultTask;
     • 模块名 === gulp的指令名
4. gulp的原生方法

四、gulp的插件的使用

1. 下载

   • 服务器插件类
     • gulp-connect
     • http-proxy-middleware
   • js文件处理
     • gulp-concat
     • gulp-uglify
     • gulp-rename
   • ES6转ES5
     • gulp-babel
     • @babel/core
     • @babel/preset-env
   • 压缩css
     • gulp-minify-css
   • 压缩图片
     • gulp-imagemin
   • sass解析
     • gulp-sass

2. 引入

   • const 变量 = require(“插件名”)

3. 使用

   • 根据插件的返回值使用