这是我参与8月更文挑战的第30天，活动详情查看：8月更文挑战
☆☆☆ 今天来学习前端自动化工具: ( gulp ) !查缺补漏! ☆☆☆
可作为初学者的学习路线, 可参考一下, 学习进度也不是特别赶! 持续更新中
结合自己的理解, 用白话文简单又全面概括
JavaScript学习过程中的基础知识点, 方便加深理解!
开始今天的学习吧! '打牢地基才能筑高楼'! 加油! 认真对待!!
0. 梳理昨日知识点:
( 几种设计模式 ):
设计模式: 是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。
- 单例模式
- 工厂模式
- 观察者模式
1、前端自动化工具之 gulp 安装环境 & 插件
先安装 node.js
通过 node -v 查看 node 安装版本
安装 gulp：
1、先全局安装 ： npm install gulp -g
2、创建 gulp 目录项目 ， 通过 cd 目录名 进入到该目录
3、在 gulp 项目目录下局部安装 gulp ： npm install gulp --save-dev
4、配置 package.json 文件 ： npm init -y（插件安装）
2、什么是 gulp？
gulp --- 前端自动化工具
作用（插件功能）：
- 自动压缩 js 文件、css 文件
- 自动压缩图片文件
- 自动合并文件
- ......
3、gulp 中的方法
-task() 布置任务
三个参数：
- 第一个参数： 任务名称 默认任务 default
- 第二个参数： 该任务依赖的其它任务 是一个数组 （可选）
- 第三个参数： 任务回调函数 （任务执行）
执行其它任务的方式有两种：
- 第一种：通过 default 任务依赖执行
- 第二种： gulp 任务名称
src() 源文件路径 （参数可以是一个数组）
dest() 目标文件路径 dest 参数中的文件夹名称可以自动创建
pipe() 管道方法 表示输送 也就是 “下一步”
watch() 监听
两个参数：
第一个参数： 监听文件的路径
第二个参数： 监听的任务名称 数组
4、gulp 插件
gulp-sass将 sass 文件转成 css 文件(有可能安不上 选择安装)gulp-cssmin压缩 css 文件gulp-uglify压缩 js 文件gulp-concat合并文件gulp-rename重命名gulp-imagemin压缩图片文件- .....
插件安装：
npm install --save-dev 插件名称
批量安装 ：
将 package.json 复制到项目目录下 运行 npm install 完成批量安装插件
安装 gulb 流程梳理
1、先安装 node.js
2、全局安装 gulp
命令 ：
npm install gulp -g
3、局部安装 在项目目录中安装 gulp
首先将 cmd 的目录 调整到项目的目录下 ：
跳转到 E 盘 命令 e:
进入到项目 testDemo 项目目录下 命令
cd testDemo
在该项目目录下进行局部安装 gulp 命令是 ：
npm install gulp --save-dev
安装成功后 通过 gulp -v 确定安装是否成功
# E:\jd>gulp -v
[22:36:39] CLI version 3.9.1
[22:36:39] Local version 3.9.1
4、配置 package.json 文件
命令 ：
npm init -y
5、安装 gulp 插件
经常用到的部分插件如上有列举.
命令：
npm install --save-dev 插件名称
例如 ：
npm install --save-dev gulp-cssmin
npm install --save-dev gulp-uglify
预告: 加油, 追梦人
学习就是一个不断进行的过程, 坚持下去, 定有收获!
日积月累, 巩固基础, 早进大厂!
坚持很不容易, 坚持下来更不容易, 你真棒!
Calm Down & Carry On!
更多阅读:
前文更新回顾
【重学 JS】每天学习巩固基础系列文章:
【重温 JS】聊一聊设计模式, 及几种方式 单例|工厂|观察者模式、 【重温 JS】继承的几种方式 & 闭包 & 单例模式、 【重温 JS】原型和原型链 | 工厂模式 | 构造函数、 【重温 JS】巩固基础-面向对象/面向过程/类和对象
【重温 JS】巩固基础之-ajax 原理/缓存/接口、 【重温 JS】巩固基础 day23-前端也要了解一些数据库
【day2】各种运算符、 【day3】数据类型、 【day4】循环结构 & 条件语句、 【day5】函数(重点)、 【day6】作用域 & 事件、
【day7】对象 & 数组方法总结、 【day8】字符串方法 & 部分排序、
【day9】Math 对象 & 封装函数、 【day10】BOM-浏览器对象模型、
【day12】Event 事件对象初识(一)、 【day13】Event 事件对象初识(二)、
更多期待在路上...任重而道远==-..-==
