gulp自动化开发工具

最新推荐文章于 2022-10-10 11:39:38 发布
最新推荐文章于 2022-10-10 11:39:38 发布
阅读量267 收藏 1
点赞数
分类专栏： webpack和gulp 文章标签： gulp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42681295/article/details/107508595
版权

gulp自动化开发工具

gulp基础应用

推荐gulp.js快速入门

gulp task指令使用

// 引用下载好的三方模块
// gulp
const gulp = require("gulp")

// 1、task gulp指令绑定
// task ("指令名", 指令执行函数)
gulp.task("hello", () => {
  console.log("hello world")
})
// 使用 cmd 之中输入 gulp hello 

// 加 async
gulp.task("hello", async () => {
  console.log("hello world")
})
// 如果函数前面不加上async 的话, 会导致指令无法完成;

在这里插入图片描述

src和pipe使用

// src 找到源文件 ，dest 转存文件  pipe 数据处理API
// 过程如下：
// 1. 找到源文件
//   src 路径的其实就是从项目文件夹开始的, 和 gulpfile.js 同级
//   gulp的数据处理 : 找到文件读取文件数据 => 当成一个流去处理;
//   如果后续需要处理数据,那么我们可以把这个数据放进管道之中;
// 2. pipe 处理src找到的数据
//   我们所有对数据的操作都是在管道之中进行的;
//   我们会以参数的形式向管道之中放入要处理数据的回调函数;
// 3.dest 
//   把数据流转存到固定的地址;

gulp.task("html", async () => {
  gulp.src("./src/index.html")
    .pipe(gulp.dest("./dist/"))
})

在这里插入图片描述

watch的使用


gulp.task("html", async () => {
  gulp.src("./src/index.html")
    .pipe(gulp.dest("./dist/"))
})

// gulp 监听 : 这个API会检测文件的改变 自动执行指令;
// API : watch 监听改变的文件路径 需要执行的指令
// gulp指令执行AIP
// gulp.parallel(); 异步执行：多个指令可以同时执行
// gulp.series(); 同步执行：上一个指令不执行完成，下一个指令不执行

gulp.task("watch", async () => {
  //  监听
  await gulp.watch("./src/index.html", gulp.parallel("html"))
})

在这里插入图片描述

gulp高级应用

// 1、找到所有的源文件 分类是通过html src css js 等等

gulp.task("html", async ()=>{
  gulp.src(["./src/index.html","./src/login.html","./src/register.html"])
  .pipe(gulp.dest("./dist/"))
})

在这里插入图片描述

// 说说gulp 高级应用
// 1、找到所有的源文件 分类是通过html src css js 等等

gulp.task("html", async () => {
  // gulp.src(["./src/index.html", "./src/login.html", "./src/register.html"])
  //  .pipe(gulp.dest("./dist/"))

  // // 但是上面文件一个一个的太麻烦 怎么办呢？？？
  // // 解决：可以加入正则规则 ;  * 表示任意名称
  // gulp.src(["./src/*.html"])
  //   .pipe(gulp.dest("./dist"))

  // // 排除法 ： ! 表示 除了某个文件以外
  // gulp.src(["./src/*.html", "!./src/ativepage.html"])
  // pipe(gulp.dest("./dist"))

  // 但是当我们文件层级较深时，需要注意路径编写
  // 无论层级都能拿到 : **/*
  // 通过结构优化 可以保密文件
  gulp.src(["./src/**/*.html", "!./src/html/shit/*.html"])
    .pipe(gulp.dest("./dist/"))

})

// 2、一个js指令绑定
// 1、两个部分
//   1、libs部分 开头转存一次就结束 比如jQuery
//   2、可能经常更改的业务部分 index.js

gulp.task("js", async () => {
  gulp.src(["./src/js/**/*.js"])
    .pipe(gulp.dest("./dist/js"))
})

// 3、默认指令 | 组合指令
gulp.task("default", gulp.series("html", "js")); //同步列队
gulp.task("default", gulp.parallel("html", "js")); //异步列队
// 这个默认指令在cmd之中可以直接使用 gulp 执行，省略 default 指令

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

gulpfile.js

// 引用下载好的三方模块
// gulp
const gulp = require("gulp")

// 1、task gulp指令绑定
// task ("指令名", 指令执行函数)
gulp.task("hello", () => {
  console.log("hello world")
})
// 使用 cmd 之中输入 gulp hello 

// 加 async
gulp.task("hello", async () => {
  console.log("hello world")
})
// 如果函数前面不加上async 的话, 会导致指令无法完成;

// src 找到源文件 ，dest 转存文件  pipe 数据处理API
// 过程如下：
// 1. 找到源文件
//   src 路径的其实就是从项目文件夹开始的, 和 gulpfile.js 同级
//   gulp的数据处理 : 找到文件读取文件数据 => 当成一个流去处理;
//   如果后续需要处理数据,那么我们可以把这个数据放进管道之中;
// 2. pipe 处理src找到的数据
//   我们所有对数据的操作都是在管道之中进行的;
//   我们会以参数的形式向管道之中放入要处理数据的回调函数;
// 3.dest 
//   把数据流转存到固定的地址;

gulp.task("html", async () => {
  gulp.src("./src/index.html")
    .pipe(gulp.dest("./dist/"))
})

// gulp 监听 : 这个API会检测文件的改变 自动执行指令;
// API : watch 监听改变的文件路径 需要执行的指令
// gulp指令执行AIP
// gulp.parallel(); 异步执行：多个指令可以同时执行
// gulp.series(); 同步执行：上一个指令不执行完成，下一个指令不执行

gulp.task("watch", async () => {
  //  监听
  await gulp.watch("./src/index.html", gulp.parallel("html"))
})

// 说说gulp 高级应用
// 1、找到所有的源文件 分类是通过html src css js 等等

gulp.task("html", async () => {
  gulp.src(["./src/index.html", "./src/login.html", "./src/register.html"])
   .pipe(gulp.dest("./dist/"))

  // 但是上面文件一个一个的太麻烦 怎么办呢？？？
  // 解决：可以加入正则规则 ;  * 表示任意名称
  gulp.src(["./src/*.html"])
    .pipe(gulp.dest("./dist"))

  // 排除法 ： ! 表示 除了某个文件以外
  gulp.src(["./src/*.html", "!./src/ativepage.html"])
  pipe(gulp.dest("./dist"))

  // 但是当我们文件层级较深时，需要注意路径编写
  // 无论层级都能拿到 : **/*
  // 通过结构优化 可以保密文件
  gulp.src(["./src/**/*.html", "!./src/html/shit/*.html"])
    .pipe(gulp.dest("./dist/"))

})

// 2、一个js指令绑定
// 1、两个部分
//   1、libs部分 开头转存一次就结束 比如jQuery
//   2、可能经常更改的业务部分 index.js

gulp.task("js", async () => {
  gulp.src(["./src/js/**/*.js"])
    .pipe(gulp.dest("./dist/js"))
})

// 3、默认指令 | 组合指令
gulp.task("default", gulp.series("html", "js")); //同步列队
gulp.task("default", gulp.parallel("html", "js")); //异步列队
// 这个默认指令在cmd之中可以直接使用 gulp 执行，省略 default 指令

gulp使用教程

1. 初始化当前项目

建立一个package.json

npm init -y

2. 下载必须的依赖

gulp v 4.x.x
gulp-cli v 2.x.x

  • gulp-cli : 全局的gulp工具下载后在cmd 之中提供 gulp 指令 4.x.x
  • gulp : gulp 的核心代码。 2.x.x

tip : 如果版本不对请先卸载 gulp npm uninstall gulp -g

  1. 安装gulp-cli : npm install gulp-cli -g

指定版本安装 : npm install gulp-cli@2.2.0 -g

成功之后 :cmd 之中使用 gulp -v 指令 可以查看版本 ;

如果出现 : gulp 不是内部或外部命令，也不是可运行的程序或批处理文件。 则表示安装失败 ;

  - 1. 先关闭 cmd 重启 , 如果还是这样那么执行下列步骤
  - 2. 清缓存 : `npm cache clear --force 强制清除缓存; 
  - 3. 卸载全局gulp `npm uninstall gulp -g` 重装 ; 
  - 4. 重复 2, 3 步骤 ,进入到 C:\Users\你的用户名 删除.npmrc 重装;
  1. 在指定的文件夹之中安装(项目文件夹) gulp 核心程序;
    1. 安装 gulp 核心文件 npm install gulp --save-dev

成功 :

     1.  cmd里面看到 +gulp@4.x.x 没有 err 即可
     2.  package.json 里面多了 `"devDependencies": {"gulp": "^4.0.2"}`

测试gulp是否可以运行 :

gulp -v :

CLI version: 2.3.0 全局版本
Local version: 4.0.2 本地版本

3. GULP 配置

  1. 在项目目录的第一层级 建立一个文件 gulpfile.js

    gulpfile.js 是gulp默认读取的配置文件，gulp做些啥，都是由gulpfile.js 说了算的。

我们所谓的工程化环境配置其实都是些在 gulpfile.js 之中的;

在这里插入图片描述

工程化

工程化环境

问题解决

  1. 环境配置问题 : 测试服务器;
  2. 反向代理接口 ;
  3. 浏览器实时刷新的;
  4. ES6 => ES5 编译 ;
  5. sass => css 编译 ;
  6. css 代码压缩 ;
  7. js 代码压缩 ;
  • 问题解决的方式不统一 ; 统一规划和问题解决方案;

工程化环境

  • GULP : 基于GULP搭建工程化项目;
  • webpack : 基于webpack搭建工程化项目;

GULP

GULP 和 nodejs 一样也是一个平台 : 平台提供了相应的规范,所以我们在使用这个平台的时候相对容易;

  • GULP 基本使用

  • GULP 插件配合

工程化项目的基本结构

      ---|项目文件夹/
          ---| package.json // 项目说明书;
          ---| package.lock.json // 项目使用到的工具详细的版本说明;
          ---| src/  // 开发目录 
             ---| javascript/ 
                  ---| libs/ 
                      ---| jQuery.js
                      ---| waterfall.js
                      ---| lazyload.js
                  ---| index.js
              ---| scss/ 
                  --- | libs /
                      ---| _color.scss
                      ---| _size.scss
                      ---| _maxin.scss
                      ---| _xxx.scss
                  ---| index.scss
              ---| index.html

             ---|
          ---| dist/ // 发布目录  => 这个文件夹之中的所有内容都是工程化工具给我们生成的我们不去更改这个文件夹内的任何内容;

工程化项目迁移

  1. 核心文件迁移 :

    1. package.json : 项目的配置说明;
    2. package.lock.json : 让项目可以下载可靠的依赖;
    3. gulpfile.js : gulp的整体配置;

  2. 安装依赖 :
    使用 npm install 或 npm i指令, nodejs会根据package.json里面的内容进行依赖下载;

工程化环境的区分

  • dev 环境 开发环境 => 写代码看效果 ; 写代码保存频率非常高, 工程化环境应当尽量精简, 展示速度应该相对较快;

  • build 生产环境 => 代码质量要求最高 , 该压缩的，该转义的，该去掉空格的…

  • 获取cmd 命令行里面的参数;

牛先森家的牛奶
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
gulp基础详解
LoveyL0201的博客
11-30 331
gulp 什么是gulp gulp是一个自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说，gulp就是用来打包项目的，常见的有Grunt、Gulp、Webpack三种，Grunt比较老旧，功能少，更新少，插件少。 gulp可以用来做什么 搭建web服务器 文件保存时自动重栽浏览器 使用预处理器如Sass、Less 优化资源，比如压缩CSS、JavasScript、压缩图片 gulp的安装 全局安装 npm i gulp@3 -g //安装3.9.1版本 npm i
前端自动化Gulp工具常用插件
weixin_30458043的博客
03-22 87
npm init命令初始化当前文件夹后，在当前文件夹新建gulpfile.js文件。当前目录下的所有操作流都在gulpfile.js文件中定义。 gulp自动化 gulp-uglify （JS压缩） gulp-uglify安装: npm install --save-dev gulp-uglify gulp-uglify用来压缩js文件，使用的...
自动化构建工具 Gulp
qq_43215246的博客
04-26 1562
Gulp 与 npm scripts Gulp 与 npm scripts 都能够实现自动化构建 Gulp 语法简单 Gulp 语法就是 JavaScript 语法 npm scripts 语法接近 shell 脚本 • Gulp 生态完善，构建效率高 Gulp - 基本使用 全局安装 gulp 客户端( npm install -g gulp- cli ) 初始化项目(npm init --yes) 安装 gulp 包( npm install gulp -D ) 新建 gulpfile 文件 (
Javascript(六十六) 项目开发工具Gulp
weixin_44730244的博客
06-19 378
https://www.gulpjs.com.cn gulp是基于node.js的一个前端自动化工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。使用glup你可以简化工作量，让你把重点放在功能的开发上，从而提高你的开发效率和工作质量。 下载glup 1.进入node.js中文文档下载nodejs（http://nodejs.cn/download/） 2.点击安装包一路点击下载即可 3.启动nodejs windows： 点击windows键（开始键）=>nodejs文件=>n
前端开发构建工具---Gulp介绍
07-12 2023
gulp https://github.com/gulpjs/gulp/ 是一个新型的构建系统，基于Nodejs，提倡链式调用风格的构建代码。可以很方便的兼容文件系统改变，并在改变后立即执行相关的预处理和编译。
前端自动化工具gulp.zip
12-24
**标题**: 前端自动化...总的来说，Gulp是一个强大且灵活的前端自动化工具，它简化了构建过程，使得前端开发更加高效。通过理解并熟练运用Gulp，开发者可以更好地管理项目，提升开发效率，同时确保代码的质量和性能。
Gulp前端自动化构建工具
01-08
Gulp作为前端自动化构建工具，通过简单的配置和丰富的插件，可以构建出高效且定制化的开发流程。无论是编译预处理器语言，还是压缩和优化资源，Gulp都能帮助开发者提升开发效率，保证项目的质量和性能。通过学习和...
Gulp自动化工具
12-24
1.1自动化 - gulp是一个工具包，可帮助您在开发工作流程中自动执行痛苦或耗时的任务。 1.2与平台无关 - 集成内置于所有主要IDE中，人们正在使用gulp与PHP，.NET，Node.js，Java和其他平台。 1.3强大的生态系统 - ...
gulp自动化构建
08-10
**gulp自动化构建** 在现代JavaScript开发环境中，自动化构建工具已经成为不可或缺的一部分。gulp作为一个流行的构建工具，它基于Node.js，利用流(stream)的概念处理文件，极大地提高了构建效率。本篇文章将深入...
gulp自动化
08-13
【描述】：虽然描述中没有具体信息，但通常涉及“gulp自动化”的话题会涵盖如何设置Gulp工作流，以及它如何帮助开发者自动化日常的前端开发任务。通常，这包括解析项目结构，配置Gulpfile.js，引入必要的插件，以及...
Gulp前端自动化工具的用法
落叶丶Fly的博客
06-03 822
Gulp简介gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。    gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的...
gulp自动化工具
sJohnny的博客
02-21 641
What Is Gulp? Gulp是一个构建系统，开发者可以使用它在网站开发过程中自动执行常见任务。Gulp是基于Node.js构建的，因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript（或者CoffeeScript）里。前端开发工程师还可以用自己熟悉的语言来编写任务去lint JavaScript和CSS、解析模板以及在文件变动时编译LESS文件（当然这些只是一
做一个合格的前端，gulp自动化构建工具入门教程
zhangps的博客
01-19 1116
我的新作观点网http://www.guandn.com (观点网是一个猎获新奇、收获知识、重在独立思考的网站)，它前端js、css的压缩、合并、md5命名等就使用了gulp自动化构建技术，gulp很小巧使用起来很舒服。 ps：接下来我会逐一开源观点网开发过程中的前后端技术，如：lucene全文索引、自定义富文本编辑器、图片上传压缩水印等等。 一、什么是gulp gulp是一个自动化构
自用 gulp工具
ltc15281793714的博客
09-16 402
全局安装 gulp-cli 全局安装 gulp-cli 命令行工具： $ npm i gulp-cli -g 安装完成后，使用 gulp --verion 测试： $ gulp --version 如果能够看到类似如下提示，则说明安装成功： CLI version: 2.3.0 Local version: Unknown 注意：全局安装 gulp-cli 只需要执行一次即可 创建项目与 package.json 文件 在目标位置创建目录（例如：gulp-demo） $ mkdir gulp-de
gulp 使用教程及步骤
最新发布
weixin_44732078的博客
10-10 1169
gulp 是与 webpack 功能类似的前端项目构建工具，也是基于 Nodejs 的自动任务运行器
gulp安装报错Local version: Unknown
weixin_30715523的博客
05-24 1885
解决方法 使用国内的淘宝镜像安装： cnpm install -g gulp 一开始只执行了上面命令，没执行下面，gulp -v 之后显示Local version: Unknowncnpm install --save-dev gulp这步执行完后 安装成功！！ 转载于:https://www.cnblogs.com/bobo1/p/10918641.html...
vue cli 3 升级到 vue cli 4 方法步骤及升级点总结
热门推荐
前端开发者
10-26 8万+
vue cli 3 升级到 vue cli 4 指南 vue cli 3 升级到 vue cli 4 方法步骤及升级点总结 vue-cli 3升级vue-cli 4 官方英文升级文档，中文滞后 一.首先，在全局安装最新的 Vue CLI： npm install -g @vue/cli # OR yarn global add @vue/cli 检查安装的版本 vue -V # 输出:@vue/cli 4.x.x 说明@vue/cli 4安装成功( vue cli 3的版本会输出 3.x.x )
gulp -version出现Local version: Unknown 解决
itwangyang520的博客
06-07 5723
1.问题 2. 输入cnpm install --save-dev gulp 没有cnpm ，先安装cnpm 输入npm install -g cnpm --registry=https://registry.npm.taobao.org 3. 输入是否安装OK gulp --version
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值