1. var gulp = require('gulp');
  2. var RevAll = require('gulp-rev-all');
  3. var uglify = require('gulp-uglify');
  4. var filter = require('gulp-filter');
  5. var csso = require('gulp-csso');
  6. var useref = require('gulp-useref');
  7.  
  8. gulp.task('default', function () {
  9.  
  10. var jsFilter = filter("**/*.js");
  11. var cssFilter = filter("**/*.css");
  12. var htmlFilter = filter('**/*.html');
  13.  
  14. var assets = useref.assets();
  15.  
  16. var revAll = new RevAll({
  17.  
  18. //不重命名文件
  19. dontRenameFile: ['.html'] ,
  20.  
  21. //无需关联处理文件
  22. dontGlobal: [ /^\/favicon.ico$/ ,'.bat','.txt'],
  23.  
  24. //该项配置只影响绝对路径的资源
  25. prefix: 'http://s0.static.server.com'
  26. });
  27.  
  28. return gulp.src(['staticPreprocessing/src/**'])
  29.  
  30. //合并html里面的js/css
  31. .pipe(htmlFilter)
  32. .pipe(assets)
  33. .pipe(assets.restore())
  34. .pipe(useref())
  35. .pipe(htmlFilter.restore())
  36.  
  37. //压缩js
  38. .pipe(jsFilter)
  39. .pipe(uglify())
  40. .pipe(jsFilter.restore())
  41.  
  42. //压缩css
  43. .pipe(cssFilter)
  44. .pipe(csso())
  45. .pipe(cssFilter.restore())
  46.  
  47. //加MD5后缀
  48. .pipe(revAll.revision())
  49.  
  50. //输出
  51. .pipe(gulp.dest('staticPreprocessing/dist'))
  52.  
  53. //生成映射json文件
  54. .pipe(revAll.manifestFile())
  55. .pipe(gulp.dest('staticPreprocessing/dist'));
  56. });
  57.  
  58. gulp.task('watch', function () {
  59. gulp.watch('staticPreprocessing/src/**', ['default']);
  60. });

  

gulp下静态资源的合并、压缩、MD5后缀的更多相关文章

  1. gulp之静态资源防缓存处理

    最近,因为校友网项目开始有些规模了.开始就要考虑对静态资源进行工程自动化的管理.一讲到前端的自动化工具,大家或许都会想到Grunt,Gulp,或者百度的FIS.这三个都有各自的特点,大家可以依据自己的 ...

  2. Nginx的静态资源缓存以及压缩

    Nginx是一款轻量级的网页服务器.反向代理器以及电子邮件代理服务器.Nginx采用的是异步非阻塞的通信机制(epoll模型),支持更大的并发连接.所谓的epoll模型:当事件没有准备好时,就放入ep ...

  3. nginx静态资源缓存与压缩

    一.静态资源缓存 参考文章 (1)apache设置max-age或expires 这里需要修改.htaccess文件. <IfModule mod_headers.c> <Files ...

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

    ASP.NET MVC 中有个 BundleConfig 用于静态资源的打包和压缩,我在使用的过程中遇到一些问题,现在做下总结,并给出具体的解决方案. 问题一:打包压缩后的 JavaScript 和 ...

  5. gulp管理静态资源缓存

    前端项目在版本迭代的时候,难免会遇到静态缓存的问题,明明开发的是ok的,但是一部署到服务器上,发现页面变得乱七八糟,这是由于静态缓存引起的. 从上面这张图片可以看出,浏览器加载css,js等资源时,s ...

  6. springboot下静态资源的处理(转)

    在SpringBoot中有默认的静态资源文件相关配置,需要通过如下源码跟踪: WebMvcAutoConfiguration-->configureResourceChain(method)-- ...

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

    公司移动端商城使用前后分离方案,前台nginx静态文件,js使用requirejs模式,使用gulp压缩添加版本号时发现问题, 问题1.在公共的js配置中,引用的路径是写死的,缓存会一直存在. 解决方 ...

  8. gulp css html image js 合并压缩

    安装node.js  npm  以及安装gulp等方法我就不在这里赘述了. 接下里我主要介绍的是Gulpfile文件里面的配置该如何书写. var gulp = require('gulp');//引 ...

  9. 【netcore基础】wwwroot下静态资源文件访问权限控制

    本文参考如下博问 https://q.cnblogs.com/q/107836 业务要求 上传的资源文件(.mp3 .mp4等)只有购买了之后才能有权限访问,所以对上传的资源文件目录进行访问权限控制 ...

随机推荐

  1. jQuery积累

    一:Google的CDN(内容分发网络) <head> <script type="text/javascript" src="http://ajax. ...

  2. Spring.Net的IOC入门

    1.构造器注入 namespace Spring.Net { class Program { //构造器注入 static void Main(string[] args) { IApplicatio ...

  3. C#的Attribute

    using System; using System.Collections; using System.Collections.Generic; using System.IO; namespace ...

  4. C#接扣和抽象类

    什么是接口? 接口是包含一组虚方法的抽象类型,其中每一种方法都有其名称.参数和返回值.接口方法不能包含任何实现,CLR允许接口可以包含事件.属性.索引器.静态方法.静态字段.静态构造函数以及常数.但是 ...

  5. php提示 Notice: Use of undefined constant name - assumed

    我们知道php在数组中写变量有二几种方法,我们出现这种提示就是你写成了[name]这种所以会有Notice: Use of undefined constant name - assumed name ...

  6. 无废话Android之smartimageview使用、android多线程下载、显式意图激活另外一个activity,检查网络是否可用定位到网络的位置、隐式意图激活另外一个activity、隐式意图的配置,自定义隐式意图、在不同activity之间数据传递(5)

    1.smartimageview使用 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&q ...

  7. Delphi字符串与字符数组之间的转换(初始化的重要性)

    紧接着上篇博客讲解的内容: 将Char型数组转换为string类型还有下面的这种方法 但是我在测试的时候遇到了一些问题,并在下面进行了解释和总结 先说出我的总结 其实我们在学习编程的时候(比如我之前学 ...

  8. 你可能不知道的java、python、JavaScript以及jquary循环语句的区别

    一.概述 java循环语句分为四种形式,分别是 while, do/while, for, foreach: python中循环语句有两种,while,for: JavaScript中循环语句有四种, ...

  9. poj 2503:Babelfish(字典树,经典题,字典翻译)

    Babelfish Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 30816   Accepted: 13283 Descr ...

  10. AJax中post与get请求注意事项

    在使用ajax提交表单时,一定要区分提交按钮的形式和数据表头的设置,实例如下: GET请求: HTML代码: <!doctype html> <html lang="en& ...