Gulp的安装与使用

一、Gulp的安装

1、全局安装 gulp-cli

gulp-cli是gulp的命令行工具，它需要全局安装，以便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 任务名

示例：

二、Gulp常用插件的使用

0、基本步骤：

01、下载

npm install 插件名称

02、引用

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

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

03、调用

引用插件名称()

1、gulp-htmlmin

作用：压缩html文件

2、gulp-file-include

作用：公共文件包含

示例：压缩并抽取HTML中的公共代码

下载插件

npm install gulp-htmlmin

npm install gulp-file-include

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

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

// 引入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语法

下载插件

npm install gulp-htmlmin

npm install gulp-file-include

// 引入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