gulp的安装与使用

gulp 是基于 node 平台开发的前端构建工具。

gulp 是一个 JavaScript 程序，并且它的指令使用的也是 JavaScript 语言，所以 gulp 通常是前端开发

人员自动化处理日常任务的首选工具。

gulp 可以处理日常工作流产生的任务（作用）：

项目上线时对 HTML 、 CSS 、 JavaScript 文件合并、压缩。

将 ES6 语法转换为 ES5 语法以便代码在较旧的浏览器中运行。

gulp 允许开发者将机械化的操作编写成任务，在命令行输入相关的任务名称就能执行机械化

操作，从而提高开发效率。 ( 用机器代替手工，提高开发效率 )

1.gulp 的使用

1. 使用 npm install gulp - cli –g 下载 gulp 的 命令行工具

2. 使用 npm install gulp@4.0.2 -- save - dev 下载 gulp 库文件

3. 在项目根目录下建立gulpfifile.js（不可更改）文件

重构项目的文件夹结构 src目录放置源代码文件 ，dist目录放置构建后文件 

 

在 gulpfifile.js 文件中编写任务

gulp.src() ：获取任务要处理的文件

gulp.dest() ：输出文件

gulp.task() ：建立 gulp 任务

gulp.watch() ：监控文件的变化

 

2. gulp 的插件使用

步骤：

1. 下载 npm install 插件名

2. 引用 const 名称 = require(' 插件名 ')

3. 调用

4. 终端执行

提示：

直接使用 node+ 文件名 执行的是整个文件

这里，只需要执行单个的任务

2.1压缩并抽取html中的公共代码

  2.2压缩并转换less语法

// less 语法

npm install gulp-less

// css 代码压缩

npm install gulp-csso

zh

 终端执行：gulp cssmin

2.3 js 任务

1. es6 代码转换 gulp-babel

2. 代码压缩 gulp-babel

3. 安装包

// 下载安装 gulp-babel 插件，实现 ES6 语法的转换

npm install gulp-babel @babel/core @babel/preset-env

// 下载安装 gulp-uglify 插件

npm install gulp-uglify

终端执行：gulp jsmin

2.4 复制文件

 终端执行：gulp copy

2.5 执行全部构建任务

在gulpfile.js文件中创建default任务

// 构建任务

// 使用 gulp.series 方法

gulp . task ( 'default' , gulp . series ( 'htmlmin' , 'cssmin' , 'jsmin' , 'copy' ))

终端执行：gulp default