node的第三方模块gulp的学习

gulp是node的第三方模块,是一种基于NodeJs的前端自动化工具，用来增强工作流程
官网:https://gulpjs.com/

第三方模块的下载

• 下载环境
  • node环境
• 下载工具
  • node环境自带了下载工具：npm
• 下载方式 - npm的使用方式
  • npm是命令行工具，所以需要在命令提示符中使用
  • 查看版本号：npm -v
  • 下载：npm install 第三方模块名
  • 卸载：npm uninstall 第三方模块名
  • 查看npm的下载源：npm config list
  • 修改下载源：npm config set registry 下载源地址
    • 官方下载源：https://registry.npmjs.org/
      • 官方文档：https://www.npmjs.com/
    • 第三方的下载源（如：淘宝）：https://registry.npm.taobao.org
  • 创建项目的配置文件（package.json）：npm init -y

第三方模块的环境配置

• 环境介绍
  • 根据第三方模块的特性，按需下载
  • 系统(全局)：整个操作系统的所有项目都可以使用
    • npm install -g xxx
  • 项目(局部)：只有当前项目才可以使用
    • npm install xxx
• 依赖关系 - 专指局部环境的第三方模块依赖
  • 开发环境：项目开发过程中需要使用，上线之后，不需要使用
    • 处理文件的：合并，压缩，改名，自动保存，编译
    • npm install --save-dev xxx
    • npm install -D xxx
  • 项目环境：项目运行过程中需要使用
    • 支撑了项目功能的：jQuery，Bootstrap，jq-cookie
    • npm install --save xxx
    • npm install -S xxx
    • npm install xxx
• 项目配置 - npm init -y之后，创建出的package.json文件

  {
      "name": "test",        // 项目名称，可自定义
      "version": "1.0.1",   //  项目版本，可自定义
      "description": "这是一个测试项目",  // 项目描述，可自定义
      "main": "index.js",     // 项目的入口文件（主文件）
      "scripts": {        // 配置：npm run xxx的脚本命令，可自定义配置
          "test": "echo \"Error: no test specified\" && exit 1",
          "log": "ls"
      },
      "keywords": [   // 项目关键字，可自定义
          "测试",
          "写着玩",
          "都行"
      ],
      "author": "Roger",     // 项目作者，可自定义
      "license": "ISC",       // 项目认证
      "devDependencies": {},  // 开发依赖
      "dependencies": {}      // 项目依赖，可自定义
  }
  

node的第三方模块 - gulp

gulp的介绍

• gulp是基于node的前端自动化构建工具
• gulp是基于流的前端自动化构建工具
• 先安装gulp环境
• 使用
  • gulp自身只是提供了文件流的获取和传输方式，以及指令的创建方式
  • 然后再配合gulp的插件，实现：文件合并，压缩，编译等等等…

gulp的环境配置（下载）

• gulp的全局命令工具（全局的gulp）
  • npm install -g gulp
• gulp自身的模块功能（局部的gulp）
  • npm install -D gulp
• 下载完成后：命令行输入（注意命令行的路径）
  • 查看版本号：gulp -v
  • 结果会显示两个版本号：全局和局部
• 完整步骤
  1. 确定一个目录，准备作为项目文件夹
  2. 使用命令行进入这个文件夹
  3. 初始化项目环境：
     • npm init -y
     • 会创建package.json文件
  4. 开始下载gulp
     • 全局
     • 局部
  5. 测试 - 查看版本
     • gulp -v
     • 可以看到两个版本号即可

gulp的使用

• 在项目的根目录下，创建gulpfile.js文件
• 在gulpfile文件内，使用node的自定义模块语法，暴露一个功能函数
  • function test(任意参数){console.log("test");任意参数();//结束标志}exports.test = test;
  • 结束标志的用法
    • 函数传入任意参数,在最后执行任意参数作为结束标志
    • return gulp的功能
• 在命令行中（路径在当前项目内）执行：gulp 暴露的模块名
  • gulp test
• gulp的原生方法
  • src：获取文件流,用来查找指定文件
  • dest：将文件流转成文件,用来转存到指定目录
  • pipe：文件流的管道方法,用来连接下一个文件操作方法
  • watch:监听文件变化
  • series：同步批量执行多个指令
  • parallel：异步批量执行多个指令

gulp的插件的使用

• 下载（插件名）
  1. 服务器：gulp-connect
     • 服务器代理：http-proxy-middleware
  2. ES6转ES5：gulp-babel
     • @babel/core
     • @babel/preset-env
  3. js文件合并：gulp-concat
  4. js文件压缩：gulp-uglify
  5. js文件改名：gulp-rename
  6. sass转css：gulp-sass

gulpfile.js

// 解构赋值，引入gulp的功能
const {src, dest, watch, parallel} = require("gulp");
const concat = require("gulp-concat");
const rename = require("gulp-rename");
const uglify = require("gulp-uglify");
const babel = require("gulp-babel");
const connect = require('gulp-connect');
const { createProxyMiddleware } = require('http-proxy-middleware');

// 拷贝文件功能
function copyFn(){
    // 找文件：入口文件夹名：src
    return src(["./src/*.{html,css}"])      // 路径的多种表示方式
    // 转存文件：出口文件夹名：dist
    .pipe(dest("./dist"))
    // 拷贝之后，执行服务器插件的刷新功能
    .pipe(connect.reload())
}
// 暴露指令
exports.copy = copyFn;

// js文件合并，编译，压缩，改名功能
function jsHandleFn(){
    return src("./src/js/*.js")         // 找文件
    .pipe(concat("all.js"))             // 合并
    .pipe(babel({
        presets: ['@babel/env']
    }))                                 // ES6转ES5
    .pipe(dest("./dist/js"))            // 转存
    .pipe(uglify())                     // 压缩
    .pipe(rename("all.min.js"))         // 改名
    .pipe(dest("./dist/js"))            // 转存
}
// 暴露指令
exports.jh = jsHandleFn;


// 开启服务器功能
function serverFn(next){
    connect.server({
        root: "dist",
        port: 3001,
        livereload: true,
        // 给服务器插件添加第三方中间件
        middleware: function(connect, opt) {
            return [
                // 服务器代理的中间件
                createProxyMiddleware('/abc', {
                    target:'https://news.baidu.com', //代理的目标地址
                    changeOrigin:true,
                    pathRewrite:{    //路径重写规则
                        '^/abc':''
                    }
                })
            ]
        }
    })
    next();
}
exports.server = serverFn;

// 开启监听功能
function watchFn(next){
    watch(["./src/*.{html,css}"], copyFn);
    next();
}

// 批处理：服务器和监听
exports.watchServer = parallel(serverFn, watchFn);