项目中Gulp的使用

• 全局安装gulp-cli

命令为npm install gulp-cli@2.3.0 -g(-g全称为global表示全局安装 @2.3.0表示全局gulp-cli的版本)

• 在项目中安装glup

1.npm init(初始化项目)

2.npm install gulp@4.0.2 --save-dev(局部安装gulp --save-dev表示将gulp作为devDependencice（开发依赖)保存到package.json文件中)

3.gulp -v(查看gulp版本，查看是否安装成功)

• 构建项目

在根目录下建立gulpfile.js文件

在gulpfile.js文件中编写构建项目的任务

• Gulp常用插件（插件使用：下载、引用和调用插件，需要在引用插件之前先引用gulp模块）

1. gulp-htmlmin：html文件压缩

2. gulp-file-include：公共文件包含

(1) 压缩html文件以及抽取公共部分代码，下载插件

（2）引入插件

（3）建立任务

（4）抽取公共部分代码,先把头部公共部分的代码剪切放在common文件夹下面的header.html文件中

(5) 在原文件中（article.html）使用@@include('./common/header.html')（）里面存放路径

（6）执行任务 gulp htmlmin

生成结果文件：

3. gulp-less：less语法转化

4. gulp-csso：压缩css

（1）下载插件

（2）引入插件

（3）在css文件夹下面建.less后缀的文件

（4）建立任务

（5）执行任务 gulp cssmin

生成结果文件：

5. gulp-uglify：压缩混淆JavaScript

6. gulp-babel：JavaScript语法转化

（1）下载插件

（2）引入插件

（3）建立任务

（4）执行任务gulp jsmin

生成结果文件：

7. gulp.series()：按顺序执行任务

8. copy：复制文件

（1）建立任务

（2）执行任务gulp copy

生成结果文件：

9. rimraf -g：删除其他文件或者文件夹

（1）下载插件

生成结果文件：

• 项目依赖管理

package.josn文件的作用

项目描述文件，记录了当前项目信息。使用npm init -y(-y表示全部使用默认值)命令生成

1. 项目依赖

--在项目的开发阶段和线上运营阶段，都需要依赖的第三方包

--使用npm install 包名命令下载的文件会默认被添加到package.json文件的dependencies字段中

2. 开发依赖

--在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包

--使用npm install 包名--save-dev命令下载的文件会默认被添加到package.json文件的dependencies字段中

3. package-lock.json文件的作用

--锁定包的版本，确保再次下载时不会因为包版本不同而产生问题

--加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作