gulp的使用与安装

Gulp的安装与使用

一、Gulp的安装

1、全局安装 gulp-cli

gulp-cli是gulp的命令行工具，它需要全局安装，以便gulp能够在命令提示符中直接运行。gulp-cli是本地 gulp的全局的入口，负责把所有参数转发到本地gulp，还有显示项目里安装的本地gulp的版本。

全局gulp用于启动各个项目中的本地gulp，换句话说，如果在全局安装了gulp-cli，那么就可以在不同的项目 中使用不同的gulp版本。

// 安装命令:
npm install gulp-cli@2.3.0 -g	

// -g global，表示为全局安装

2、 在项目中安装 gulp

本地gulp位于本地项目的node_modules目录下，包含了gulpfile所需的所有函数和API。

作用：1、加载和运行gulpfile（gulpfile.js）中的构建指令。2、暴露API供gulpfile使用。

// 安装命令：
// 1、初始化项目
npm init

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

//3、查看gulp版本，查看是否安装成功
gulp -v

3、构建项目

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

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

03、在gulpfile.js文件中编写任务.（gulp.task()建立任务…）

const gulp = require('gulp');
// 使用gulp.task()方法建立任务
gulp.task('任务名称', (callback) => {

	// 获取要处理的文件
	gulp.src('要处理文件路径')

    // 将处理后的文件输出到指定目录
    .pipe(gulp.dest('指定目录路径’));
	callback（）
});

04、在命令行工具中执行gulp任务

gulp + 任务名

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u9ADd6eU-1679459193798)(C:\Users\wujiashun\AppData\Roaming\Typora\typora-user-images\image-20230319175934586.png)]

二、Gulp常用插件的使用

常用插件：

gulp-htmlmin ：html文件压缩

gulp-csso ：压缩css

gulp-babel ：JavaScript语法转化

gulp-less: less语法转化

gulp-uglify ：压缩混淆JavaScript

gulp-file-include 公共文件包含

browsersync 浏览器实时同步

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

基本步骤：

01、下载

npm install 插件名称

02、引用

const gulp = require('gulp'); //首先引用gulp模块

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

03、调用

引用插件名称()

1、gulp-htmlmin

作用：压缩html文件

2、gulp-file-include

作用：公共文件包含

示例：压缩并抽取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

// 引入gulp模块
const gulp = require('gulp');
// 引入htmlmin插件
const htmlmin = require('gulp-htmlmin')
// 引入fileInclude
const fileInclude = require('gulp-file-include')

// 建立任务：压缩html以及抽取公共部分
gulp.task('htmlmin', (callback) => {
    // 获取要处理的html文件
    gulp.src('./src/*.html')
        // 抽取html公共部分的插件
        .pipe(fileInclude())
        // 压缩html文件中的代码
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        // 文件的输出路径
        .pipe(gulp.dest('./dist'))
    callback();
})

// 执行任务
gulp htmlmin

3、gulp-less

作用：less语法转化

4、gulp-csso

作用：压缩css文件

示例：压缩CSS文件并转换Less语法

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

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

   npm install gulp-htmlmin
   

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

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

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

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

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

   npm install gulp-file-include
   

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

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

// 引入gulp模块
const gulp = require('gulp');
// 引入gulp-less
const less = require('gulp-less')
// 引入gulp-csso
const csso = require('gulp-csso')

// 建立任务：压缩css代码并转换less语法
gulp.task('cssmin', callback => {
    // 获取文件.less 和 .css
    gulp.src(['./src/css/*.less', './src/css/*.css'])
        // 将less语法转换为css语法
        .pipe(less())
        // 压缩css代码
        .pipe(csso())
        // 输出文件路径
        .pipe(gulp.dest('./dist/css'))
    callback();
})

// 执行任务
gulp cssmin

5、其他方法

copy任务（复制）

// 建立任务：复制
gulp.task('copy', callback => {
    // 获取文件images
    gulp.src('./src/images/*')
        // 输出文件路径
        .pipe(gulp.dest('./dist/images'))
    // 获取文件images
    gulp.src('./src/js/*')
        // 输出文件路径
        .pipe(gulp.dest('./dist/js'))
    callback();
})

// 执行任务
gulp copy

serise 方法（执行多个任务）

// 使用serise方法
gulp.task('default', gulp.series('first', 'htmlmin', 'cssmin', 'copy'))

// 执行任务
gulp default

(‘./src/js/*’)
// 输出文件路径
.pipe(gulp.dest(‘./dist/js’))
callback();
})

// 执行任务
gulp copy

serise 方法（执行多个任务）

```js
// 使用serise方法
gulp.task('default', gulp.series('first', 'htmlmin', 'cssmin', 'copy'))

// 执行任务
gulp default