gulp

gulp

1.gulp的介绍

gulp是一种前端自动化构建工具，它可以将文件进行压缩、编译等多种处理。
gulp是基于node环境
gulp本质上就是node的第三方模块

2.gulp的使用

安装：

1. 使用gulp时，需要安装安装全局gulp：npm i gulp -g

2. 在磁盘上创建新文件夹，用来表示当前项目目录。

   建议：路径不要太深，不要出现中文，至少不要出现特殊字符，不允许使用gulp作为文件名。假设我的路径是：NZ-1902 -> daima -> day32 -> mygulp

3. 使用命令行工具的：cd 命令进入刚刚创建的文件夹

4. 初始化项目（创建项目配置文件）：npm init -y。会 自动创建 一个package.json的文件。有这个文件，表示初始化项目成功。

5. 安装局部gulp：npm i gulp -D

6. 如何辨别安装成功：

   • 当前的项目文件，出现一个node_modules的文件夹；也许还会出现一个package-lock.json的文件，改文件可以忽略

   • gulp -v。可以看到两个版本号，一个是全局，一个是局部

7. 注意：如果只能看到一个版本号，另一个显示Unknown，首先确定项目目录是否正确，确认正确后，再考虑是否能是没有安装或安装失败的问题

使用：

1. gulp要求，自身所有的配置命令，都必须在gulpfile.js文件内，这个文件要手动创建，创建到项目的根目录

2. 在gulpfile.js文件内，首先引入gulp：const gulp = require("gulp");

3. 再然后，就可以开始设置gulp的各种操作了

   • 实现测试指令

     1. 定义功能

     function testFn(){
         console.log("这是我的第一个gulp指令");
     }
     
     

     2. 暴露gulp指令

     module.exports.test = testFn;
     

     3. 执行指令

     // 在命令行工具中，确保路径是当前项目路径
     gulp test
     

gulp插件的使用：

1. 安装插件

• 删除文件夹：gulp-clean

• 压缩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

2. 在gulpFile.js文件中引入所需插件

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");

3. 根据所需，定义功能，暴漏指令，执行指令。