Gulp的安装及使用

Gulp的安装及使用

一、Gulp的安装

（1）全局安装gulp-cli

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

（2）在项目中安装gulp

//初始化项目
 npm init 
//局部安装 gulp——--save-dev表示将gulp作为devDependencic（开发依赖）保存到package.json文件中 npm install gulp@4.0.2 --save-dev 
//查看 gulp 版本，查看是否安装成功 
gulp -v

（3）构建项目

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

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

◆在 gulpfile . js 文件中编写任务．( gulp . task (）建立任务．..)

const gulp = require (' gulp ');
//使用gulp.task()方法建立任务
gulp . task (' first ',( callback )=>{
   //获取要处理的文件
   gulp.src('./src/css/base.css')
   //将处理后的文件输出到 dist 目录
   .pipe(gulp.dest('./dist/css'));
   callback ()
});

◆在命令行工具中执行 gulp 任务

//gulp + 任务名
gulp first

二、Gulp在项目中的使用

（1）Gulp常用插件

● gulp - htmlmin : html 文件压缩

● gulp - csso ：压缩 css 

● gulp - babel : JavaScript 语法转化

● gulp - less : less 语法转化

● gulp - uglify :压缩混淆 JavaScript 

● gulp - file - include 公共文件包含

● browsersync 浏览器实时同步

插件的使用通常分为3步：下载、引用和调用插件，需要注意的是在引用插件之前，一定要先引用 gulp模块。

（2）压缩并抽取HTML中的公共代码

通过 gulp - htmlmin 插件和 gulp - file - include 插件实现压缩并抽取 HTML 中的公共代码步骤如下：

1．下载安装压缩 HTML 文件插件 gulp - htmlmin 

2.   在 gulpfile . js 文件中引用 gulp - htmlmin 插件

3.   在 gulpfile . js 文件中调用 gulp - htmlmin 插件，实现 HTML 文件中代码的压缩

4．查看 dist 目录结构

5．下载 gulp - file - include 插件，抽取 HTML 中的公共代码

6.   gulpfile . js 文件中引用 gulp - file - include 插件

7．在 gulpfile . js 文件中调用 gulp - file - include 插件，抽取 HTML 中的公共代码

8．新建 common 目录，在公共目录新建公共代码部分文件

9．删除原文件中公共部分，使用＠@ include (）方法引入公共部分

10．打开命令行工具，执行 gulp htmlmin

（3）压缩CSS文件并转换Less语法

将 CSS 文件使用的 Less 语法转换为 CSS 语法，并压缩 CSS 文件中的代码步骤如下：

1．下载安装 Less 语法转换插件 gulp - less 

2.   在 gulpfile . js 文件中引用 gulp - less 插件

3．在 gulpfile . js 文件中调用 gulp - less 插件，实现 Less 语法转换为 CSS 语法

4．新建需要编译的文件，使用 less 编写一段代码

5．打开命令行工具，执行 gulp cssmin 将 less 语法转换成 css 语法

6．下载安装 csso 语法转换插件 gulp - csso 

7.   在 gulpfilejs 文件中引用 gulp - csso 插件

8．在 gulpfile . js 文件中调用 gulp - csso 插件，完成对 css 代码的压缩

（3）压缩并转换ES6语法

JavaScript 中ES6语法的转换，并压缩 JavaScript 文件中的代码步骤如下：

1．下载安装语法转换插件 gulp - babel @ babel / core @ babel / preset - env 

2.    在 gulpfile . js 文件中引用 gulp - babel 插件

3．在 gulpfilejs 文件中调用 gulp - babel 插件，实现ES6语法转换

4．新建需要编译的文件，使用 jsmin 编写一段代码

5．打开命令行工具，执行 gulp jsmin 

6．下载安装 js 代码压缩插件 gulp - uglify 

7．在 gulpfile . js 文件中引用 gulp - uglify 插件

8．在 gulpfile . js 文件中调用 gulp - uglify 插件，完成对 js 代码的压缩

（4）复制目录

将 src 目录下的 images 目录和 lib 目录，复制到 dist 目录下步骤如下：

1．在 gulpfile , js 文件中创建 copy 任务，进行目录复制操作

2．运行命令' gulp copy '

3．执行成功后，查看 dist 目录的结构，是否将 images 目录和 lib 目录成功复制

（5）执行全部构建任务

1．在 ulpfile . js 文件中创建 default 任务

2.   使用 gulp . series（）按顺序执行任务

3．打开命令行工具，运行" gulp default "命令