首页 > 其他分享 >gulp的使用

gulp的使用

时间：2024-06-04 18:00:35浏览次数：15  
标签：pipe dist rev js gulp 使用 css

 在发布官网时，会因为本地浏览器的缓存，导致一些样式不会及时更新，这时可以使用gulp对静态资源进行打包，在静态资源文件后面添加版本号或者MD5后缀，从而使浏览器请求新的资源，解决缓存的问题，此外gulp可以处理理常见任务，压缩静态资源文件等，下面介绍gulp的使用方法。

1. gulp是什么

  • gulp 是一个自动化工具，前端开发者可以使用它来处理常见任务：
  • 搭建web服务器
  • 使用预处理器如Sass、Less
  • 优化资源，比如压缩CSS、JavaScript、压缩图片等
  • gulp官网

2. 安装 gulp

  • npm初始化
npm init -y
  • 在当前项目中安装
npm install gulp --save-dev   //作为开发时依赖项
  • 查看是否安装成功
gulp -v

出现版本号表示安装成功

3. gulp 使用

（1）创建一个任务

const {task} = require("gulp")

//方法一
task('dist', function(cb) {
  console.log('dist')
  cb()
})

//方法二
function test(cb) {
  console.log('test')
  cb()
}
exports.test = test

在以前的 gulp 版本中，都是使用task() 方法来注册任务。虽然这个 API 依旧是可以使用，但是官方更推荐导出（export）注册机制，除非遇到 export 不起作用的情况。下面都使用导出注册机制。

（2）创建多个任务

Gulp 提供了两个强大的组合方法： series() 和 parallel()，允许将多个独立的任务组合为一个更大的操作。

1、series()：顺序执行任务；

2、parallel()：并行执行任务（同时执行）；

const { series, parallel } = require('gulp')

//1、series()顺序执行任务
function one(cb) {
  console.log('one')
  cb()
}
function two(cb) {
  console.log('two')
  cb()
}
exports.build1 = series(one, two)

//parallel()并行执行任务（同时执行）
function one(cb) {
  console.log('one')
  cb()
}
function two(cb) {
  console.log('two')
  cb()
}
exports.build2 = parallel(one, two);

//也可以嵌套使用
function one(cb) {
  console.log('one')
  cb()
}

function two(cb) {
  console.log('two')
  cb();
}

function three(cb) {
  console.log('three')
  cb();
}

exports.build3 = series(one, parallel(two, three))

如果每一个任务都没有关联（依赖），使用上面的写法，是完全没有问题的，但是一旦，某个任务需要上个任务成功执行，这种写法就会有问题。此时需要将每一个任务通过return返回，当从任务（task）中返回 stream，成功或错误值将通知 gulp 是否继续执行或结束。如果任务（task）出错，gulp 将立即结束执行并显示该错误。

当使用 series() 组合多个任务（task）时，任何一个任务（task）的错误将导致整个任务组合结束，并且不会进一步执行其他任务。当使用 parallel() 组合多个任务（task）时，一个任务的错误将结束整个任务组合的结束，但是其他并行的任务（task）可能会执行完，也可能没有执行完。

const { src, dest } = require('gulp');

function dist() {
  return src('./js.js')
    .pipe(dest('./dist'));
}

exports.default = dist;

4. gulp常用方法

gulp实际工作是使用nodejs中的stream来处理的，简单来说，如果需要合并两个文件，就需要讲两个文件都加载进来，然后再处理将文件合并，注意这里加载进来的文件并不是文本形式加载，而是以二进制数据流的方式，也就是steam加载进入。被加载进入的文件是以二进制数据流模式存在的，内容中除了含有文件内容，还包括了文件的地址，文件名等等一系列相关信息。然后再将所有的数据流处理生产新文件。因此这里就用到了nodejs中stream的方法pipe

pipe:管道，流向的意思，可以在这里理解为写入到 a.pipe(b) 将a写入到b中

gulp的方法较多，先介绍几种常用的：

（1）scr(): 读取文件的数据流

语法：gulp.src(globs[, options])

  • globs：文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)
  • options：为可选参数。通常情况下我们不需要用到

匹配模式：

1、单匹配模式

2、多匹配模式（同时使用多种匹配）

  • 类正则
  • 数组
gulp.src(['js/*.js', 'css/*.css', '*.html'])
  • 展开模式

以 {} 作为定界符，根据它里面的内容，会展开为多个模式，最后匹配的结果为所有展开的模式相加起来得到的结果 !

  1. a{b, c}d 展开为：abc，acd
  2. a{b,}c 展开为：abc，ac
  3. a{0..3}c 展开为：a0c，a1c，a2c
  4. a{b, c{d, e}f}g 展开为：abg，acdfg，acefg
  5. a{b, c}d{e, f}g 展开为：abdeg，acdeg，abdeg，abdfg

（2）dist()：写入文件

语法：gulp.dest(path[,options])

  • path：为写入文件的路径
  • options：为可选参数。通常情况下我们不需要用到

（3）task(): 定义任务

这个方法官网已经不推荐使用了

const {task} = require("gulp")
//打包js文件夹下面的文件
task('dist-js', function() {
  return gulp.src('./js/**')
      .pipe(rev()) // 文件名加MD5后缀
      .pipe(gulp.dest("./dist/js")) // 将文件输出到dist文件
      .pipe(rev.manifest()) // 生成一个rev-manifest.json文件，记录MD5的文件改名前后的对应关系
      .pipe(gulp.dest('./dist/rev/js')) // 将 rev-manifest.json 保存到 rev
})
//顺序执行任务
task('default',
    gulp.series('dist-clean','dist-js', 'dist-css', 'dist-img', 'dist-utils', 'dist-libs', 'dist-videos', 'dist-public', 'dist-html', 'dist-rev-html', 'dist-rev-other', 'dist-rev-css')
)

（4）watch(): 用于监听文件变化

语法：watch(globs, [options], [task])

  • globs：为写入文件的路径
  • options：为可选参数。通常情况下我们不需要用到
  • task：一个 任务函数 或由 series() 和 parallel() 生成的组合任务
const { watch } = require('gulp')

watch(['js/*.js', 'css/*.css'], function(cb) {
  // body omitted
  cb()
})

5. gulp插件

import clean from 'gulp-clean' // 清除文件
import rev from 'gulp-rev' // 文件名加MD5后缀
import revCollector from 'gulp-rev-collector' // 替换文件中引用文件路径
import replace from 'gulp-replace' // 替换html文件中的html路径（将绝对路径替换为相对路径）
import cssMin from 'gulp-clean-css' // 压缩css文件
import uglify from 'gulp-uglify' // 压缩js文件
import imageMin from 'gulp-imagemin' // 压缩图片
import cache from 'gulp-cache'  // 缓存图片(没有修改的图片不会重新压缩)

5. 案例—官网打包

import gulp from 'gulp'
import clean from 'gulp-clean' // 清除文件
import rev from 'gulp-rev' // 文件名加MD5后缀
import revCollector from 'gulp-rev-collector' // 替换文件中引用文件路径
import replace from 'gulp-replace' // 替换html文件中的html路径（将绝对路径替换为相对路径）
import cssMin from 'gulp-clean-css' // 压缩css文件
import uglify from 'gulp-uglify' // 压缩js文件
import imageMin from 'gulp-imagemin' // 压缩图片
import cache from 'gulp-cache'  // 缓存图片(没有修改的图片不会重新压缩)

//清除文件
gulp.task('dist-clean', function () {
  return gulp.src('dist', { allowEmpty: true }).pipe(clean())
})
//打包js文件夹下面的文件
gulp.task('dist-js', function () {
  return gulp.src('./js/**')
    .pipe(uglify()) // 压缩js文件
    .pipe(rev()) // 文件名加MD5后缀
    .pipe(gulp.dest("./dist/js")) // 将文件输出到dist文件
    .pipe(rev.manifest()) // 生成一个rev-manifest.json文件，记录MD5的文件改名前后的对应关系
    .pipe(gulp.dest('./dist/rev/js')) // 将 rev-manifest.json 保存到 rev
})
//打包css文件夹
gulp.task('dist-css', function () {
  return gulp.src('./css/**')
    .pipe(cssMin()) //压缩css文件
    .pipe(rev())
    .pipe(gulp.dest("./dist/css"))
    .pipe(rev.manifest())
    .pipe(gulp.dest('./dist/rev/css'))
})
//打包images文件夹
gulp.task('dist-img', function () {
  return gulp.src('./images/**')
    .pipe(cache(imageMin())) //压缩图片
    .pipe(rev())
    .pipe(gulp.dest("./dist/images"))
    .pipe(rev.manifest())
    .pipe(gulp.dest('./dist/rev/images'))
})
//打包libs文件夹
gulp.task('dist-libs', function () {
  return gulp.src('./libs/**')
    // .pipe(rev())
    .pipe(gulp.dest("./dist/libs"))
    .pipe(rev.manifest())
    .pipe(gulp.dest('./dist/rev/libs'))
})
//打包utils文件夹
gulp.task('dist-utils', function () {
  return gulp.src('./utils/**')
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest("./dist/utils"))
    .pipe(rev.manifest())
    .pipe(gulp.dest('./dist/rev/utils'))
})
//打包videos文件夹
gulp.task('dist-videos', function () {
  return gulp.src('./videos/**')
    .pipe(rev())
    .pipe(gulp.dest("./dist/videos"))
    .pipe(rev.manifest())
    .pipe(gulp.dest('./dist/rev/videos'))
})
//打包public文件夹(不进行打包的文件)
gulp.task('dist-public', function () {
  return gulp.src('./public/**')
    .pipe(gulp.dest("./dist/public"))
})
//复制*.html, config.js文件
gulp.task('dist-html', function () {
  return gulp.src(['./*.html', './globalConfig.js'])
    .pipe(gulp.dest("./dist"))
})
// 替换html文件中的html路径（将绝对路径替换为相对路径）
gulp.task('dist-rev-html', function () {
  return gulp.src('./dist/*.html')
    .pipe(replace(/\\/.+(\\.html)/g, function handleReplace(match) {
      return '.' + match;
    }))
    .pipe(gulp.dest('./dist'))
})
//替换html文件中其他文件的引用
gulp.task('dist-rev-other', function () {
  return gulp.src(['./dist/rev/**/*.json', 'dist/*.html'])
    .pipe(revCollector({
      dirReplacements: {
        'css': './css',
        '/css': './css',
        './css': './css',
        'js': './js',
        '/js': './js',
        './js': './js',
        'images': './images',
        '/images': './images',
        './images': './images',
        'utils': './utils',
        '/utils': './utils',
        './utils': './utils',
        'libs': './libs',
        '/libs': './libs',
        './libs': './libs',
        'videos': './videos',
        '/videos': './videos',
        './videos': './videos'
      }
    })
    )
    .pipe(gulp.dest('./dist'))
})
//替换css文件中对图片的引用
gulp.task('dist-rev-css', function () {
  return gulp.src(['./dist/rev/css/*.json', './dist/rev/images/*.json', './dist/css/*.css'])
    .pipe(revCollector({
      dirReplacements: {
        'images': '../images',
        '/images': '../images',
        '../images': '../images'
      }
    })
    )
    .pipe(gulp.dest('./dist/css'))
})
//顺序执行任务
gulp.task('default',
  gulp.series('dist-clean', 'dist-js', 'dist-css', 'dist-img', 'dist-utils', 'dist-libs', 'dist-videos', 'dist-public', 'dist-html', 'dist-rev-html', 'dist-rev-other', 'dist-rev-css')
)

标签：pipe,dist,rev,js,gulp,使用,css
From： https://blog.csdn.net/xccevol/article/details/139449694

相关文章

  • 免费使用TasteWP一键搭建线上临时WordPress网站
    虽然用宝塔面板或者1Panel面板可以非常快速的搭建一个WordPress网站，但是有时候只想测试下我设计的页面或者开发的主题和插件，又得买服务器，绑定域名，安装程序，搭建起来也过于浪费时间了；再或者，我只想学习WordPress基础操作，从零开始搭建还是过于困难，因此，今天我推荐一个特别好用的工具：Tas......
  • 公安视频图像信息数据库及GA/T 1400视图库视频监控系统的使用场景
    随着科技的快速发展，大数据、人工智能等新技术不断融入各行各业，为各行各业带来了前所未有的变革。在公安领域，GA/T1400协议公安视频图像信息数据库的应用为视频监控场景提供了强有力的支持，极大地提升了公安工作的效率和准确性。一、公安视频图像信息数据库组成1、公安视频图像......
  • 配置Tensorflow使用GPU加速（Tensorflow2.6.0，Python3.6-3.9，CUDA11.2，cuDNN8.1）
    目录前言一、安装Anaconda1.1从Anaconda官网下载Anaconda（默认安装最新版本）1.2安装Anaconda并配置环境变量二、安装CUDA和cuDNN2.1下载CUDAToolkit2.2安装CUDAToolkit2.3下载安装cuDNN2.4配置CUDA环境变量三、创建Anaconda虚拟环境并安装Tensorflow3.1创建......
  • 分享一个Python爬虫入门实例带数据分析（有源码，学习使用）
    Python爬虫是一种使用Python编程语言实现的自动化获取网页数据的技术。它广泛应用于数据采集、数据分析、网络监测等领域。以下是对Python爬虫的详细介绍：架构和组成：下载器：负责根据指定的URL下载网页内容，常用的库有Requests和urllib。解析器：用于解析下载的网页内容，提取所......
  • 【ubuntu使用记录】—— 如何使用vim编译器如何写入保存文件和linux常用的操作指令记
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言vim编译器的使用1.写入的操作2.保存的操作常用的系统操作指令1.查看系统配置2.查看库的版本3.基本操作指令4.解压和压缩相关指令(1)安装rar和unrar工具(2)使用前言在Ubuntu中，使用......
  • dig 使用
    digdig（DomainInformationGroper）是一个用于DNS查询的命令行工具，广泛用于查看域名系统的相关信息。基本用法#查询域名的A记录（IPv4地址）：digexample.com#查询指定DNS服务器的A记录：[email protected]#指定查询记录类型（例如，查询MX记录）：digexampl......
  • Manjaro Linux下使用wine运行企业微信
    开始因为工作原因所以必须用到企业微信，但是企业微信是目前主流办公软件中可能唯一一个不支持Linux系统的软件了，于是只能使用wine来运行windows版本来使用。期间遇到了各种坑在此记录一下，以便于能帮到同样需要的同学，也希望腾讯能够尽快开发Linux原生的企业微信。安装首先我们需......
  • ChatGPT的平替产品—GPTBiz国内网络直接使用
    不仅仅是一个产品，GPTBiz是一个为国内用户量身定制的大语言模型应用平台。随着人工智能技术的迅猛发展，市场对能够快速、高效接入这些技术的需求日益增长。GPTBiz通过本土化服务器部署，为用户提供极速的体验和合规的安全保障，解决了跨境支付风险的问题。关于GPTBizGPTBiz的特......
  • 使用 JWT 生成token
    安装Nuget包:Microsoft.AspNetCore.Authentication.JwtBearerSystem.IdentityModel.Tokens.Jwt2. 然后，配置JWT服务和认证：在 Program.cs文件中usingMicrosoft.AspNetCore.Authentication.JwtBearer;usingMicrosoft.Extensions.DependencyInjection;usingMicrosoft.......
  • 将来自 Telegraf 的 JSON 数据扁平化，以便在 ThingsBoard 中使用
    我连接了ThingsBoard和Telegraf以可视化CPU使用率，但收到的数据是嵌套JSON格式。我尝试了不同的方法，但无法以扁平化的JSON格式获取数据。使用Telegraf1.30.0版本，数据以以下格式返回：[{"fields":{"usage_guest":0、"usage_guest_nice":0、......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99