首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何用PHP获取自动刷新css缓存的gulp构建版本

在使用PHP获取自动刷新CSS缓存的Gulp构建版本时,可以按照以下步骤进行操作:

  1. 首先,确保已经安装了Node.js和Gulp,并在项目目录下创建了package.json文件。
  2. 在package.json文件中,添加所需的Gulp插件依赖,例如gulp-rev、gulp-rev-collector等。可以使用以下命令安装这些插件:
代码语言:txt
复制
npm install gulp-rev gulp-rev-collector --save-dev
  1. 创建一个名为gulpfile.js的文件,并在其中配置Gulp任务。
  2. 在gulpfile.js中,引入所需的Gulp插件:
代码语言:txt
复制
var gulp = require('gulp');
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
  1. 创建一个用于生成带有哈希值的CSS文件的Gulp任务:
代码语言:txt
复制
gulp.task('css', function() {
  return gulp.src('path/to/css/*.css')
    .pipe(rev())
    .pipe(gulp.dest('path/to/dist/css'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('path/to/rev/css'));
});

这个任务会将原始的CSS文件复制到指定的目录,并为每个文件生成带有哈希值的版本。

  1. 创建一个用于替换HTML文件中CSS引用路径的Gulp任务:
代码语言:txt
复制
gulp.task('rev', function() {
  return gulp.src(['path/to/rev/**/*.json', 'path/to/html/*.html'])
    .pipe(revCollector())
    .pipe(gulp.dest('path/to/dist/html'));
});

这个任务会根据之前生成的哈希值映射文件,替换HTML文件中的CSS引用路径。

  1. 创建一个默认的Gulp任务,用于执行上述两个任务:
代码语言:txt
复制
gulp.task('default', gulp.series('css', 'rev'));
  1. 运行Gulp任务:
代码语言:txt
复制
gulp

这将会执行默认的Gulp任务,生成带有哈希值的CSS文件,并替换HTML文件中的CSS引用路径。

通过以上步骤,你可以使用PHP获取自动刷新CSS缓存的Gulp构建版本。在实际应用中,你可以根据具体需求进行适当的调整和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

gulp+webpack工作流探索

概述 最近研究了下工作流,先说一下我司情况,我司现在是pc端用php直出,h5用vuejs构建,vuejs部分就不进行描述了,因为网上构建方法都是很成熟了。...以下是php直出,需要向后台同学提供html文件构建方法。调试都是在本地调试,调试完成后打包生成html交付给后台同学。...开发时引入 compass编译 |- images 原图片 修改依赖包内容 因为rev默认生成版本号是加在静态文件文件名上main-d3id7340.js这样会造成服务器上有...v=233333这样版本号,在配合ssi就能很好维护,以后如果只涉及修改静态文件时候,就只用重新上传静态文件和ssi页面片就可以了,不需要再去改php引用,所以在网上找到了一个方法。...但是交付时候要记得换掉url,其实也可以自动化一下,要与后台约定好目录结构,然后打包时候用gulp替换。

1.4K20
  • 【前端面试题】08—31道有关前端工程化面试题(附答案)

    使用各种 loader对各种资源做处理,并解析成浏览器可运行代码。 3、你用Gulp都实现了哪些功能? 我之前写一个 Angular项目就是使用Gulp构建。...loader负责处理源文件,CSS、jsx文件,一次处理一个文件。而 plugins并不直接操作单个文件,它直接对整个构建过程起作用。 10、说说 HtmlWebpackPlugin插件作用。...(8) babel:将 JavaScript未来版本( EMAScript6、 EMAScript2016等)转换成当前浏览器支持版本。...(9) hot module replacement:修改代码后,自动刷新、实时预览修改后效果 (10) ugliifyJsPlugin:压缩 JavaScript代码。...gulp侧重于整个过程控制管理(像是流水线),通过配置不同任务,构建整个前端开发流程,并且gulp打包功能是通过安装gulp-webpack来实现;WebPack则侧重于模块打包。

    2.9K30

    前端页面可视化开发-livestyle,livereload,browser-sync

    浏览器插件1安装 如果之前sublime装过低版本livestyle,需要先卸载低版本 安装 安装livestyle 安装成功后,安装http-server...npm install -g http-server 通过httpserver启动页面 http-server 打开插件 这里不用ctrl+s保存,页面也能自动刷新...结合gulp,实现刷新: npm init 这样,就创建了一个package.json文件 这个文件用于标识node.js包名,版本,依赖等信息 编写gulp...——针对动态网站(比如:php,java网站) 本地安装: 把browser-sync安装到node依赖中 npm install browser-sync gulp --save-dev...情况3:修改不灵,还可能是css存放文件夹名字或者层级有关(推测) 解决方法:有.css在当前页面引用,在右上角小绿球里选择相应css路径 使用整理说明: 1.livestyle

    1.1K20

    从Npm Script到Webpack,6种常见前端构建工具对比

    模块合并:在采用模块化项目里会有很多个模块和文件,需要通过构建功能将模块分类合并成一个文件。 自动刷新:监听本地源代码变化,自动重新构建刷新浏览器。...dev,就会启动JavaScript文件压缩和自动刷新功能。...Grunt相当于进化版Npm Script,它诞生其实是为了弥补Npm Script不足。 3 Gulp Gulp(http://gulpjs.com)是一个基于流自动构建工具。...Fis3优点是集成了各种Web开发所需构建功能,配置简单、开箱即用。其缺点是目前官方已经不再更新和维护,不支持最新版本Node.js。...图1 Webpack 简介 一切文件JavaScript、CSS、SCSS、图片、模板,对于Webpack来说都是一个个模块,这样好处是能清晰地描述各个模块之间依赖关系,以方便Webpack对模块进行组合和打包

    2.1K60

    前端工程化 - Webpack 常见面试题速查

    # webpack 与 grunt、gulp 不同 Grunt、Gulp 是基于任务运行工具: 它们会自动执行指定任务,就像流水线,把资源放上去然后通过不同插件进行加工,有活跃社区,丰富插件,...Webpack 是基于模块化打包工具: 自动化处理模块,webpack 把一切当成模块,当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要每个模块...最后一步,当 HMR 失败后,回退到 live reload 操作,也就是进行浏览器刷新获取最新打包代码 # 如何用 webpack 来优化前端性能 用 webpack 优化前端性能是指优化 webpack...(css-loader 中 minimize 配置)来压缩 css 利用 CDN 加速 在构建过程中,将引用静态资源路径修改为 CDN 上对应路径 可以利用 webpack 对于 output 参数和各...,直接在 entry 中指定单页应用入口即可 多页面应用的话,可以使用 webpack AutoWebPlugin 来完成简单自动构建,但是前提是项目的目录结构必须遵守预设规范。

    47440

    Gulp和Webpack对比

    Gulp Gulp 就是为了规范前端开发流程,实现前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等功能一个前端自动构建工具。...结论是正确Gulp可以对css文件以及js文件进行合并压缩处理,而Webpack可以实现对css文件,js文件,html文件等进行合并压缩和图片压缩,还可以对js文件进行编译(es6–>es5,...在Gulp中启动本地服务有一个很方便配置,就是``livereload:true``属性设置,设置后浏览器会根据你项目中资源变化自动刷新浏览器(如果你chrome浏览器设置该属性后在你修改文件并保存时仍没有自动刷新...},2.刷新浏览器请求最新编译后文件**)和热替换(HMR);而**gulp-server**虽然提供了启动本地server能力和仅自动刷新浏览器能力,缺少一个文件自动编译能力,这需要借助其他模块实现.../build/')); }) ``` Gulp实现版本控制很方便,将这两个task加入gulp.watch()中,即可实现修改保存文件实时自动修改版本功能。

    2.2K40

    简洁概括,程序员技能树

    ) 代码分析(Code Climate) 测试覆盖率 构建系统(gulp、grunt、webpack等等) 自动构建(脚本) 兼容性 跨浏览器测试 (Chrome,IE,Firefox,Safari等等...) 跨平台测试(Windows、GNU/Linux,Mac OS等等) 跨设备测试(Desktop,Android,iOS,Windows Phone) 跨版本测试(同一个浏览器不同版本) 前端特定...基础设施 虚拟化,Docker 自动化部署 应用包创建、管理、发布 发布脚本编写 Web容器,Jboss 缓存篇 应用层缓存 平台缓存 数据库端缓存 分布式缓存 数据持久化 SQL NoSQL ORM...分布式存储系统 云服务 存储服务,AWS S3 计算服务,AWS Lambda 托管服务,AWS EC2 安全性 网络 CCNP / CCNA 持续集成 持续集成工具 自动构建工具 依赖管理工具...版本管理工具 虚拟化 应用容器虚拟化,Docker 环境虚拟化 操作系统虚拟化 自动化 (puppet,chef) 自动化配置 自动化部署 进程管理工具,Supervisor 监控 基础设施监控

    2.4K60

    Gulp探究折腾之路(I)

    前言: gulp是前端开发过程中对代码进行构建工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复任务能够使用正确工具自动完成;使用她,我们不仅可以很愉快编写代码,...相比于grunt频繁 IO 操作,gulp流操作,能更快地更便捷地完成构建工作。此处仅记录初步折腾中所遇点滴以及待解决点。...完毕之后,加入需要依赖插件以及版本信息即可(注意:这是一个普通json文件,一定得符合json格式;同时需要安装插件版本也得是 <= 线上最新版本)。.../web/js')); }); 实时刷新页面 gulp-livereload模块 gulp-livereload模块用于自动刷新浏览器,反映出源码最新变化。...// 主机名可以是ip或域名 browser-sync start --proxy "主机名" "css/*.css" 在本地创建了一个PHP服务器环境,并通过绑定Browsersync.cn来访问本地服务器

    1.8K80

    npm、npm scripts

    }, "devDependencies": { "easytpl": "^1.0.4" //项目构建构建项目所依赖包,这个对象中依赖仅仅在构建项目时安装 } } 3、npm install...在包版本差异化不太严重情况下,这种构建方式会几乎把所有包放在一级目录下,很大程度下提升了效率以及节省了部分磁盘空间。...大多数内容功能都是基于这个插件系统运行,还可以开发和使用开源 webpack 插件,来满足各式各样需求。 webpack使用异步 I/O 和多级缓存提高运行效率,使得它能够快速增量编译。...使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并 gulp是前端开发过程中对代码进行构建工具,是自动化项目的构建利器 gulp不仅能对网站资源进行优化,而且在开发过程中很多重复任务能够使用正确工具自动完成...gulp是基于Nodejs自动任务运行器, 能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件测试、检查、合并、压缩、格式化、浏览器自动刷新

    2.2K41

    第三方模块

    基于node平台开发前端构建工具 将机械化操作编写成任务,想要执行机械化操作时执行一个命令行命令任务就能自动执行了 用机器代替手工,提高开发效率。...Gulp能做什么 项目上线,HTML、CSS、 JS文件压缩合并 语法转换(es6、 less . 公共文件抽离 修改文件浏览器自动刷新 7....Gulp中提供方法 gulp.src(): 获取任务要处理文件 gulp.dest(): 输出文件 gulp.task(): 建立gulp任务 gulp.watch(): 监控文件变化...'); 复制使用代码到task任务中调用他 ,: .pipe(htmlmin({ collapseWhitespace: true })) // 引用gulp模块 const gulp =...done(); }); // css任务 //1.less语法转换 // 2.css代码压缩 gulp.task('cssmin', done => {    // 获取路径下文件    // gulp.src

    67940

    Webpack知识点速记

    2.1 工作方式不同: Grunt/Gulp工作方式是:在一个配置文件中,指明某些文件进行类似编译/组合/压缩等任务具体步骤,之后工具可以自动帮你完成这些任务 Webpack工作方式是:把项目当作是一个整体.../Gulp需要将整个前端构建过程拆分成多个task,合理控制所有task调用关系 Webpack需要定义好入/出口,并需要清楚对于不同类型资源应该用什么loader解析编译 Grunt/Gulp是基于任务和流...模块热更新是Webpack是的一个功能,它可以使得代码修改以后不需刷新浏览器就可以更新,是高级版自动刷新浏览器。devServer通过hot属性可以控制模块热更替。...最后一步,当HMR失败后,回退到live reload操作,也就是进行浏览器刷新获取最新打包代码。 14. 如何提高webpack构建速度?...14.1 常规 14.1.1 保持版本最新 使用最新稳定版本webpack、node、npm等,较新版本更够建立更高效模块树以及提高解析速度。

    90020

    Gulp构建实例

    结构说明 assets 项目资源目录,dev 开发目录,dist 编译输出目录,gulpfile.js 自动化工具 API gulp 使用 安装 node 环境 (自行 goole 即可) 全局安装...gulp $ npm install gulp -g 进入到需要 gulp 管理项目路径, /gulp 再安装一遍 $ npm install gulp --save-dev 安装 gulp 插件...gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del sass编译 (`gulp-ruby-sass`) 自动添加...css前缀(`gulp-autoprefixer`) 压缩css(`gulp-minify-css`) js代码校验(`gulp-jshint`) 合并js文件(`gulp-concat`) 压缩js代码...(`gulp-uglify`) 压缩图片(`gulp-imagemin`) 自动刷新页面(`gulp-livereload`) 图片缓存,只有图片替换了才压缩(`gulp-cache`) 更改提醒(`gulp-notify

    1.8K40

    9012教你如何使用gulp4开发项目脚手架

    本文将会介绍如何使用gulp4来搭建项目脚手架,如果您还在使用gulp3或更老版本,您也以通过本文一些思想将之前项目进行完善,更新。...gulp-clean ——清理目录 gulp-uglify --压缩js gulp-minify-css ——压缩css gulp-autoprefixer ——自动添加浏览器前缀 imagemin-pngquant...——png图片压缩 gulp-imagemin ——图压缩 gulp-cache ——设置gulp打包缓存,一般用于img gulp-md5-plus ——将文件名进行md5处理便于打包更新 当然gulp...在这里我要说一点,由于笔者亲测gulp-md5-plus有时候打包不稳定,可能不会给html自动添加对应md5后缀,所以笔者在这块做了特殊处理,如果大家在工作中有更好方案,可以及时和笔者沟通交流。...('gulp-clean'); // 清理目录 // md5 发版本时候为了避免浏览器读取了旧缓存文件,需要为其添加md5戳 const md5 = require("gulp-md5

    1.4K10

    给初学者Gulp教程(译)

    它经常用来进行一些前端任务,比如: 生成一个Web服务器 当一个文件保存时,浏览器自动刷新 编译像Sass或者LESS一样预处理器 优化资源文件,像CSS,JavaScript和图片等 这些并不是Gulp...为什么选择Gulp? 类似Gulp工具通常被人称作“构建工具”,因为它们是运行任务来构建网页工具。两个最流行构建工具是Gulp和Grunt(Chris 有一篇文章关于学习Grunt)。...现在让我们继续向前,以及学习如何使用Gulp配置一个工作流 我们要配置什么 在看完这篇文章后,你将拥有一个工作流,来进行我们文章开始所说一些任务: 生成一个Web服务器 当一个文件保存时,浏览器自动刷新...bs-watch.png 同时,一个显示app/index.html文件浏览器窗口也将突然弹出。如果你改变了styles.scss文件,你将会看到浏览器自动刷新效果。 ?...因为gulp-cache已经存储了图片缓存在你本地系统里。

    4.3K20

    武装你小程序——开发流程指南

    css效率; 缺少统一request拦截请求; 缺少统一路由管理; 缺少集中式API地址和ENV环境变量管理; 缺少统一本地缓存读取管理; 重复webview页面; 不支持ES7以上高级语法..."gulp": "^3.9.1" "gulp-sass": "^4.0.2" scss编译插件  "gulp-postcss": "^6.4.0" 强大css处理插件  "gulp-rename":...启用gulp-sass编译scss文件, 通过postcss对低版本ios和安卓进行兼容样式处理 gulp-rename更改文件后缀为.wxss gulp-replace通过正则匹配@import语句打开注释...将生成dist目录作为根目录丢进小程序开发工具即可实时刷新预览小程序,至此你项目已经完全支持scss了,尽情去浪吧。...如何自动打包部署环境,防止手动配置易出错问题 在这里其实还是要用到gulp这个神器,来实现不同环境代码打包,配置起来很容易,无非就是通过gulp-replace在打包时候对app.js环境变量进行配置

    3.9K40

    武装你小程序——开发流程指南

    css效率; 缺少统一request拦截请求; 缺少统一路由管理; 缺少集中式API地址和ENV环境变量管理; 缺少统一本地缓存读取管理; 重复webview页面; 不支持ES7以上高级语法..."gulp": "^3.9.1" "gulp-sass": "^4.0.2" scss编译插件 "gulp-postcss": "^6.4.0" 强大css处理插件 "gulp-rename...启用gulp-sass编译scss文件, 通过postcss对低版本ios和安卓进行兼容样式处理 gulp-rename更改文件后缀为.wxss gulp-replace通过正则匹配@import语句打开注释...将生成dist目录作为根目录丢进小程序开发工具即可实时刷新预览小程序,至此你项目已经完全支持scss了,尽情去浪吧。...如何自动打包部署环境,防止手动配置易出错问题 在这里其实还是要用到gulp这个神器,来实现不同环境代码打包,配置起来很容易,无非就是通过gulp-replace在打包时候对app.js环境变量进行配置

    2.1K30
    领券