gulp打包的时候加上版本号

2024-11-07

使用gulp添加版本号

由于js和css的缓存问题,所以,希望在html上给js和css添加上版本号. 常见的用法是使用gulp-rev和gulp-rev-collector进行操作.使用这两个插件,得到的效果如下图所示: 但是,我们希望的格式是这种: 有大神给出了解决办法,参见如下链接: Gulp自动添加版本号此篇文章中的修改行数,会随着插件的更新而发生变化,大家可以搜索一下,基本上就是了. 可是随后又出现一个问题,如果重复执行添加版本号的操作,版本号会重复追加到链接后面: <link rel="styles

使用gulp打包普通项目

前言: 在使用gulp打包工具之前,我做的H5项目在浏览器中的缓存是很严重的,若改了一点css,加了一句js代码,不手动清除浏览器缓存是看不到效果的.老总也在项目演示当中遇到这些问题,一查找原因却是缓存问题,于是老总多次要求得解决这个问题,不能每次遇到这个问题,你去叫客户清下缓存.于是我就在找解决问题的方法,一开始是想着如何可以动态的给引入的文件后面加上时间戳参数,试了一下貌似不行,就选择花时间去研究gulp打包工具了,这样既可以解决浏览器缓存的问题,也可提高代码的安全性! 环境安装: 首先,安

用gulp打包带参数资源做法与asp.net/java项目结合的自动构建方案探讨

先探讨方案,后续再实现. gulp打包前端教程配置:http://www.cnblogs.com/EasonJim/p/6209951.html 可能存在以下场景: 1.整个服务端采用接口的形式暴露给客户端,客户端全权负责前端效果及绑定数据. 2.服务端采用比如webfrom/mvc,java的模板机制绑定前端,前端最后会把做好的静态效果交给服务端进行绑定,有修改时,前端处理后又把新的静态丢给服务端做更新. 针对以上场景的具体实现方案: 1.这种方式无疑是最好管理的,各部门都有很明确的分工,每个

gulp 自动化构建网站（版本号静态资源）

前言新的一年啦,感觉总是静不下心,用了一天的时间吧,算是对gulp 这个前端打包工具入门了,自己也写了demo,表示对这个稍微理解了吧, 当然还是有差距的啦,下面讲讲怎么用吧: 如何用当然先去官网去看下如何使用的,这个是入门指南 https://www.gulpjs.com.cn/docs/getting-started/ 1. 全局安装 $ npm install --global gulp 2你的項目裏執行 npm init 全部回車 ,需要的地方在改下就好啦,這個沒有那么多要求,随意

gulp为css,js添加版本号

由于cdn缓存,更改样式后会有一段时间不生效,解决方法就是给css,js加上版本号效果如下: 1.安装gulp插件 npm install --save-dev gulp-rev (version:9.0.0) npm install --save-dev gulp-rev-collector (version:1.3.1) npm install --save-dev run-sequence (version:2.2.1) 2.修改gulpfile.js文件 //引入gulp和gulp插件

[转]gulp打包工具总结

与grunt类似,gulp也是构建工具,但相比于grunt的频繁IO操作,gulp的流操作能更快更便捷地完成构建工作.gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单.通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效 1. 入门 gulp主要包括以下几步 1. 全局安装 gulp $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装 $ npm

ThinkPHP视图css和js加上版本号防止缓存

前台模块中,我的所有控制器都继承BaseController,虽然ThinkPHP中我们提供了两个配置项 'TMPL_CACHE_ON' => false,// 禁止模板编译缓存 'HTML_CACHE_ON' => false,/ /禁止静态缓存但是浏览器的缓存不可避免,通常的解决方法是页面中引入的外部css和js文件加上版本号版本号规则一般都是自己约定的通常是随机数在这里我以当前时间戳作为版本号演示在BaseController中重写基类控制器Controller的displa

解决webpack和gulp打包js时ES6转译ES5时Object.assign()方法没转译成功的问题

在webpack或gulp打包的配置文件中package.json 引入"@babel/plugin-transform-object-assign": "^7.2.0", 然后执行npm install 然后就开始下载这个工具包了,下好后就该改一下配置文件了 webpack中的.babelrc文件里这样写 gulp里的gulpfile.js文件中这样写这样就可以把Object.assign()方法成功转译,下面对比看一下转译前后的js样例

gulp打包详解

gulp的作用删除文件中冗余的内容,压缩文件,减小文件体积实际项目中运行的都是压缩完成以后的文件减小加载响应时间 gulp打包压缩对象 html,css,js,sass,webserver 音频,图片,插件等正常情况下都是打包完成的,直接移动到dist文件中就可以服务器食欲gulp一起绑定执行的,执行的是打包压缩好的程序文件 gulp执行过程所有执行步骤必须严格遵守,尤其是语法规范必须严格执行 1.下载全局gulp npm i -g gulp 2.创建项目文件源文件src: page

gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号

参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/4982646.html http://www.tuicool.com/articles/viequay https://github.com/Platform-CUF/use-gulp 实现要点: 1.如何运行gulp的任务,加入新建好一个如下任务: // 语法检查 gulp.task('jshint'

使用GULP打包、压缩与打版本号

这篇文章讲我整理的一种打包项目的方式,以下是我的依赖清单 "devDependencies": { "gulp": "^3.9.1", "gulp-asset-rev": "0.0.15", "gulp-clean-css": "^2.1.3", "gulp-htmlmin": "^3.0.0", "gulp-noti

gulp 打包合并

1.安装node.js 下载地址: http://nodejs.cn/ 打开node.js 命令行,输入: node -v ,有版本号,则正确安装. 2.安装淘宝镜像 :命令行输入 : npm install -g cnpm --registry=http://registry.npm.taobao.org目的:使下在速度更快.3.全局安装gulp cnpm install --global gulp4.创建目录,打开F盘,创建gulp文件夹.命令行输入 :f:cd gulp5.安装本地gu

【原】webpack结合gulp打包

在我前面的文章中,总结了一下自己学习webpack和gulp的一些东西.然而,在我的实际项目中,单独使用它们两者不能满足项目的需求.我遇到了下面的一些问题. 问题1: 因为我的图片需要放单cdn上面去.而我们知道,webpack中,如果是大于8K的图片,它是没有转化为base64的,而且html中引入的图片实际上是会被打包到js当中,因此我需要手动去改那些图片的路劲.比较麻烦问题2: 虽然webpack在打包的过程中会自动帮你把css,js的路劲引入到html中,但是我在打包之前,我还是要自己

Maven打包时去掉项目版本号

Maven打包后,jar或war文件名里带有版本号信息,如projectname0.0.1-SNAPSHOT.jar等,怎么去掉呢? 解决办法: 打开项目pom.xml文件,在<build> </build>标签内加入如下内容: <build> <finalName>projectname</finalName> </build>

webpack打包和gulp打包工具详细教程

30分钟手把手教你学webpack实战阅读目录一:什么是webpack? 他有什么优点? 二:如何安装和配置三:理解webpack加载器四:理解less-loader加载器的使用五:理解babel-loader加载器的含义六:了解下webpack的几个命令七:webpack对多个模块依赖进行打包八:如何独立打包成样式文件九:如何打包成多个资源文件十:关于对图片的打包十一:React开发神器:react-hot-loader 回到顶部什么是webpack? 他有什么优点?

gulp打包公共部分

安装gulp cnpm install gulp -g 输入gulp -v看到版本号说明安装成功了安装gulp-file-include:npm install gulp-file-include --save-dev demo: 项目文件夹目录 index.html <!DOCTYPE html> <html lang="en"> <head> @@include('../include/meta.html') </head> <

gulp 打包报错：Error: `libsass` bindings not found. Try reinstalling `node-sass`

看了网上很多帖子有说切换node版本的有说卸载重新装gulp-sass的有说删除node_modules重新install的但是我测试了下在我们的电脑环境下都不行,后来找到一个可以打包不报错的机子,然后按照它的环境装了一下,就可以了, 我把成功的环境贴一下,以供日后参考: node@4.6.0 gulp@3.9.1 gulp-sass@3.1.0 之前的gulp-sass是1.3.3版本,所以怎么都不行,不知道是不是版本的原因,先记录一下以后有时间再研究吧.

gulp打包css/image/Less/Sass

其他的和打包前一篇随笔(打包js) http://www.cnblogs.com/teersky/p/7251329.html 相同,本篇文章主要写gulpFile.js的配置: 安装CSS打包插件: cnpm install gulp cnpm install gulp-minify-css 之后新建gulpfile.js文件 //打包cssvar gulp =require ("gulp") var minifyCss=require ("gulp-minify-css&

gulp打包js多个文件夹并压缩混淆，编译ES6语法，及多个import依赖由一个入口打包成一个cdn

感觉和webpack的步骤差不多首先安装gulp:参考上一篇安装完之后新建一个文件目录起名在当前目录下打开cmd 执行:npm init 创建package.json文件然后安装第一个插件gulp-uglify 执行: cnpm install gulp-uglify --save-dev (这里暂时都用淘宝镜像cnpm) 这时候已经可以开始压缩es5的js文件了,但是我们要编译es6语法,那就需要babel 执行: cnpm install gulp-babel --save-dev

gulp 打包安装

Ooo_My_God发表于2015-02-24 分类:构建工具阅读(41103) 评论(166) 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检

gulp打包js/css时合并成一个文件时的顺序解决

1.可以使用插进gulp-order. 2.可以这样的写法: return gulp.src(['js/common.js','js/**/*.js']) .pipe(concat('build.js'))//合成到一个js .pipe(gulp.dest(buildBasePath+'js'))//输出到js目录 .pipe(uglify())//压缩js到一行 .pipe(concat('build.min.js'))//压缩后的js .pipe(gulp.dest(buildBasePat

gulp打包的时候加上版本号

热门专题