浅谈gulp的使用、gulp的常用插件、gulp基本操作以及gulp的常用项目流程操作

秒速五厘米 2023-07-18 06:15 26阅读 0赞

> **`写在前面`**：  
> 因为gulp是一个基于node的工具，所以我们需要先安装node，具体可见【[node的安装及配置][node]】

### 目录 ###

*   *  一、gulp简介
     *  二、gulp基本使用
     *   *  1. 创建项目
         *  2. gulp的安装
         *  3. gulp配置文件
         *  4. 定义指令
     *  三、gulp常用插件
     *  四、gulp常用项目流程操作及部分插件使用方法

## 一、gulp简介 ##

**gulp 是一个基于node的自动化打包构建工具，前端开发者可以使用它来处理常见任务：**

*  搭建web服务器；
 *  文件保存时自动重载浏览器；
 *  使用预处理器如Sass、LESS；
 *  优化资源，比如压缩CSS、JavaScript、压缩图片；
 *  类似Gulp的工具，我们通常称之为构建工具或者叫自动化构建工具；
 *  强调的是前端开发的流程，通过配置一系列的task，定义task处理的事物，然后定义执行顺序，来让Gulp执行task，从而构建前端项目的流程，说白了就是用来打包项目；
 *  基于 node 强大的流(stream)能力，gulp 在构建过程中并不把文件立即写入磁盘，从而提高了构建速度；
 *  不管做什么功能，都有一个统一的接口进行管理，必须去注册一个任务，然后去执行，这也是它的特点之一，即“任务化”。

## 二、gulp基本使用 ##

### 1. 创建项目 ###

① 创建项目目录，结构如下（`注`：项目名称不可使用gulp）：

例：  
![20200324182410100.png][]  
② 打开命令行工具：（`注`：package.json文件为npm init –y自动创建，切勿手动创建）

*  使用`cd`命令进入项目目录，如：cd mygulp
 *  创建项目配置文件：`npm init -y`
 *  此时项目目录如下：

例：  
![20200324182433885.png][]

### 2. gulp的安装 ###

在命令行工具，依次执行：

① 全局安装：`npm i gulp -g`  
② 局部安装：`npm i gulp -D`  
③ 检测安装版本：`gulp -v`

`注`： gulp -v 命令得到两个版本号，一个全局，一个局部，代表安装成功

此时项目结构如下：

例：  
![20200324182953215.png][]

### 3. gulp配置文件 ###

在项目中创建gulp配置文件 --> `gulpfile.js`

此时项目结构如下：

例：  
![在这里插入图片描述][20200324183237297.png]

### 4. 定义指令 ###

在gulpfile.js文件中定义gulp指令，使用gulp实现功能。

const gulp = require("gulp"); // 引入gulp模块
    function testFn(){             // 准备指令功能
        console.log("test");
    }
    exports.test = testFn;         // 定义指令（暴露模块）

## 三、gulp常用插件 ##

**以下插件使用格式为**：`npm（空格）i（空格）插件名（空格）-D`

> 清空文件夹：gulp-clean

> 编译css：gulp-sass

> 压缩图片：gulp-imagemin

> 深度压缩图片：imagemin-pngquant

> 压缩css：gulp-cssmin

> css前缀：gulp-autoprefixer

> 压缩js：gulp-uglify

> ES6转ES5：gulp-babel  
> 套件1：@babel/core  
> 套件2：@babel/preset-env

> 压缩html：gulp-htmlmin

> 服务器插件：gulp-webserver

> 文件重命名：gulp-rename

> 合并js文件：gulp-concat

## 四、gulp常用项目流程操作及部分插件使用方法 ##

1.  开始之前先引入将来要使用到的插件模块

例：

const gulp = require("gulp");
    const cssmin = require("gulp-cssmin");
    const autoprefixer = require("gulp-autoprefixer");
    const uglify = require("gulp-uglify");
    const babel = require("gulp-babel");
    const htmlmin = require("gulp-htmlmin");
    const webserver = require("gulp-webserver");

1.  css处理方式

例：

// 处理css的指令：压缩，添加兼容前缀
    function cssFn(){ 
        return gulp.src("./project/css/**/*")
                .pipe(autoprefixer("last 2 version","safari 5","ie 8","ie 9","opera 12.1","ios 6","android 4"))
                .pipe(cssmin())
                .pipe(gulp.dest("./server/css"))
    }
    module.exports.css = cssFn;    // module.可省略

1.  js处理方式

例：

// 处理js的指令：ES6编译ES5，压缩
    function jsFn(){ 
        return gulp.src("./project/js/**/*")
            .pipe(babel({ 
                presets:["@babel/env"]
            }))
            .pipe(uglify())
            .pipe(gulp.dest("./server/js"))
    }
    exports.js = jsFn;

1.  html处理方式

例：

// 处理html的指令：压缩
    function htmlFn(){ 
        return gulp.src("./project/pages/**/*")
            .pipe(htmlmin({ 
                removeEmptyAttributes:true,
                collapseWhitespace:true
            }))
            .pipe(gulp.dest("./server/pages"))
    }
    exports.html = htmlFn;

1.  处理静态资源

例：

function staticFn(){ 
        // 找到要处理的静态资源文件
        return gulp.src("./src/static/**")
                // 直接转存
               .pipe(gulp.dest("./dist/static"))
    }
    // 暴露调用方式
    exports.static = staticFn;

1.  删除文件夹

例：

function cleanFn(){ 
        // 找到要删除的文件目录
        return gulp.src("./ded")
                // 直接删除
               .pipe(clean())
    }
    // 暴露调用方式
    exports.clean = cleanFn;

1.  服务器配置

例：

function serverFn(){ 
        // 找到要指定为根目录的文件夹
        return gulp.src("./ded")
            // 执行服务器方式，并开始配置信息
            .pipe(webserver({ 
                // 指定访问地址
                host:"localhost",
                // 指定端口
                port:3000,
                // 开启自动刷新
                livereload:true,
                // 服务器开启后，自动打开的页面
                open:"./pages/index.html",
                proxies:[{ 
                    // 代理之后的请求地址
                    source:"./chapters",
                    // 被代理的跨域地址
                    target:"http://wanandroid.com/wxarticle/chapters/json"
                    
                }]
            }))
    }
    // 暴露调用方式
    exports.server = serverFn;

1.  开启监听

例：

function watchFn(){ 
        // 监听所有css文件
        gulp.watch("./src/css/**",cssFn);
        // 监听所有js文件
        gulp.watch("./src/js/**",jsFn);
        // 监听所有html文件
        gulp.watch("./src/pages/**",htmlFn);
        // 监听所有static文件
        gulp.watch("./src/static/**",staticFn);
    }
    // 暴露调用方式
    exports.watch = watchFn;

1.  批量执行

> 注意：  
> gulp.series()：同步执行内部命令  
> gulp.parallel()：异步执行内部命令

例：

exports.all = gulp.series(
        gulp.parallel(cssFn,jsFn,htmlFn,staticFn),
        gulp.parallel(serverFn,watchFn)
    );

--------------------

【附：gulp 官网：[gulp官网][gulp] (内附众多中文网链接，请尽情“食用”)】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70]

[node]: https://blog.csdn.net/weixin_42881768/article/details/105028164
[20200324182410100.png]: /images/20230528/5ccb96d5397f42a4930b61695bde4050.png
[20200324182433885.png]: /images/20230528/ace4b4b6e97c42e1a157bbf360a19b53.png
[20200324182953215.png]: /images/20230528/c1c6990e858f406c9e0348ac6d8cd531.png
[20200324183237297.png]: /images/20230528/a5e0964e036241b18e960eaed35c160c.png
[gulp]: https://www.gulpjs.com.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70]: /images/20230528/1ae9838454bc475dafd14aadaeac4d3c.png