【使用Gulp压缩静态资源】的更多相关文章

gulp之静态资源防缓存处理

最近,因为校友网项目开始有些规模了.开始就要考虑对静态资源进行工程自动化的管理.一讲到前端的自动化工具,大家或许都会想到Grunt,Gulp,或者百度的FIS.这三个都有各自的特点,大家可以依据自己的喜好,选择工具.至于为什么选择Gulp,因为Grunt的gruntfile配置真的很头大好吗!简直看到头晕晕,但是还是有不少人喜欢这种方式的.然后FIS真心很强大,你所需要的,基本它都提供了,并且做得很好很简单,如果你急于马上使用可以赶紧去看看.而我为什么不用呢,感觉可能是因为,有点黑盒子?哈哈哈.…

gulp管理静态资源缓存

前端项目在版本迭代的时候,难免会遇到静态缓存的问题,明明开发的是ok的,但是一部署到服务器上,发现页面变得乱七八糟,这是由于静态缓存引起的. 从上面这张图片可以看出,浏览器加载css,js等资源时,size一栏是from cache,也就是直接使用了本地的资源,而没有向服务器请求.这样做的好处是提升页面渲染速度,坏处是当服务器的对应的文件发生变化时,浏览器却还是使用缓存,造成布局混乱的问题. 解决办法 一个比较原始的办法是在修改了文件之后,手动改变文件名称,然后再在html手动更新资源的path…

gulp下静态资源的合并、压缩、MD5后缀

var gulp = require('gulp'); var RevAll = require('gulp-rev-all'); var uglify = require('gulp-uglify'); var filter = require('gulp-filter'); var csso = require('gulp-csso'); var useref = require('gulp-useref'); gulp.task('default', function () { var j…

Hexo瞎折腾系列(5) - 使用hexo-neat插件压缩页面静态资源

为什么要压缩页面静态资源 对于个人博客来说,优化页面的访问速度是很有必要的,如果打开你的个人站点,加载个首页就要十几秒,页面长时间处于空白状态,想必没什么人能够忍受得了吧.我个人觉得,如果能把页面的加载时间控制在三四秒内,就很不错了. 那么怎么提高hexo这个静态博客的页面加载速度呢?可以从以下的几个方面去入手: 将js文件尽可能放置到body的闭合标签之前,因为在加载或者引入js文件时是阻塞式的,如果我们在页面的最开始就引入这些js文件,而这些文件又比较大,会造成页面在渲染时长时间处于白屏状态…

gulp静态资源构建、压缩、版本号添加

公司移动端商城使用前后分离方案,前台nginx静态文件,js使用requirejs模式,使用gulp压缩添加版本号时发现问题, 问题1.在公共的js配置中,引用的路径是写死的,缓存会一直存在. 解决方案是添加 urlArgs 构建时用shell脚本替换 'ttversion'为一个随机数值,我用的是当前时间. 问题2.其他模块引用的是common,那common.js不变的话,缓存会一直存在. 解决方案:还是用shell脚本,首先更改common.js为common_随机数.js,再更改所有引用…

Gulp:静态资源(css,js)版本控制

为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源: 然后涉及到的html模板里的src也要做相应的修改,静态资源需要优化(压缩合并) 文件目录结构 html模板文件 <html> <head> <!-- build:css styles/main.min.css --> <link rel="stylesheet" href="../styles/one.css"&g…

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

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

前后端分离+本地服务实时刷新+缓存管理+接口proxy+静态资源增量更新+各种性能优化+上线运维发布——gulp工作流搭建

技巧集:http://www.gulpjs.com.cn/docs/recipes/ 其实无非就是利用各种gulp插件.node脚本对项目文件做各种IO操作,只是备忘,需要的话,还是自己重新写最合适. 1. 一个justwork的多页应用工作流 毛病:如果需要task之间的同步依赖关系,那么上一个task function里面需要有return:各个task的依赖,应该用gulpSequence做拉平. var gulp = require('gulp'), sass = require('gu…

ASP.NET MVC 静态资源打包和压缩问题小记

ASP.NET MVC 中有个 BundleConfig 用于静态资源的打包和压缩,我在使用的过程中遇到一些问题,现在做下总结,并给出具体的解决方案. 问题一:打包压缩后的 JavaScript 和 CSS 中引用的文件 404 错误. 代码如下: // Styles. bundles.Add(new StyleBundle("~/bundles/styles/site.css").Include("~/static/styles/site.css")); // S…

前端静态资源版本更新与缓存之——gulp自动化添加版本号

公司项目每次发布后,偶尔会有缓存问题,然后看了下gulp,发现gulp还能给js,css自动化添加版本号,可解决缓存的问题,所以自动化实现静态资源的版本更新才是正道.通过网上的资料试过了两种办法: 1.生成一个新的dist目录,里面包含了要发布的html,js,css等文件 . 2.在原来的HTML文件上进行js ,css版本的替换,不需要生成新的目录文件. 通过两种方法的实践过程对比,决定使用第二种办法,所以这里介绍一下第二种方式的实现过程: 一. 1. 修改js和css文件 2. 通过对js…