虽然网上有很多的 gulp 构建文章，但是很多都已经随着 gulp 插件的更新无法运行了。因此，我写了这个比较简单的构建方案。

如果还不熟悉 gulp 的插件，可以阅读上一篇文章：精通gulp常用插件

这个方案主要是为了实现js/css的压缩合并、自动添加版本号和压缩html。

原文作者：林鑫，作者博客：https://github.com/lin-xin/blog

  • gulp-csso 压缩优化css
  • gulp-uglify 压缩js
  • gulp-html-minify 压缩html
  • gulp-rev-all 生成版本号

主要通过上面插件实现功能，其他插件配合使用。

// gulpfile.js

var gulp = require('gulp'),

    htmlmini = require('gulp-html-minify'),

    useref = require('gulp-useref'),

    uglify = require('gulp-uglify'),

    csso = require('gulp-csso'),

    filter = require('gulp-filter'),

    RevAll = require('gulp-rev-all'),

    del = require('del');

gulp.task('default',['del'], function () {

    var jsFilter = filter('**/*.js',{restore:true}),

        cssFilter = filter('**/*.css',{restore:true}),

        htmlFilter = filter(['**/*.html'],{restore:true});

    gulp.src('/*.html')

        .pipe(useref())                         // 解析html中的构建块

        .pipe(jsFilter)                         // 过滤所有js

        .pipe(uglify())                         // 压缩js

        .pipe(jsFilter.restore)

        .pipe(cssFilter)                        // 过滤所有css

        .pipe(csso())                           // 压缩优化css

        .pipe(cssFilter.restore)

        .pipe(RevAll.revision({                 // 生成版本号

            dontRenameFile: ['.html'],          // 不给 html 文件添加版本号

            dontUpdateReference: ['.html']      // 不给文件里链接的html加版本号

        }))

        .pipe(htmlFilter)                       // 过滤所有html

        .pipe(htmlmini())                       // 压缩html

        .pipe(htmlFilter.restore)

        .pipe(gulp.dest('/dist'))

})

gulp.task('del',function () {

    del('/dist');                               // 构建前先删除dist文件里的旧版本

})

在html中，我们需要先定义好构建块。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>gulp自动化构建解决方案</title>

    <!-- build:css static/css/index.css -->     // 定义了构建后引用的css路径

    <link rel="stylesheet" href="static/css/common.css"/>

    <link rel="stylesheet" href="static/css/index.css"/>

    <!-- endbuild -->

</head>

<body>

    ......

    <!-- build:js static/js/index.js -->        // 定义了构建后引用的js路径

    <script src="static/js/jquery.js"></script>

    <script src="static/js/common.js"></script>

    <script src="static/js/index.js"></script>

    <!-- endbuild -->

</body>

</html>

执行构建完成后，会生成 dist 文件夹，目录为：

|-dist

|   |-static

|       |-css

|           |-index.96cf44da.css

|       |-js

|           |-index.42ce3282.js

|   |-index.html

构建完的index.html，我们忽略压缩的html，完成了压缩合并添加版本号等功能。

// dist/index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>gulp自动化构建解决方案</title>

    <link rel="stylesheet" href="static/css/index.96cf44da.css"/>

</head>

<body>

    ......

    <script src="static/js/index.42ce3282.js"></script>

</body>

</html>

更多文章可以访问我的博客：lin-xin/blog

gulp自动化压缩合并、加版本号解决方案的更多相关文章

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

    前言 新的一年啦,感觉总是静不下心,用了一天的时间吧,算是对gulp 这个前端打包工具入门了,自己也写了demo,表示对这个稍微理解了吧, 当然还是有差距的啦,下面讲讲怎么用吧: 如何用 当然先去官网 ...

  2. gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全

    gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/3 ...

  3. gulp css 压缩 合并

    //导入工具包 require('node_modules里对应模块') var gulp = require('gulp'), //本地安装gulp所用到的地方 concat = require(' ...

  4. 前端gulp自动化构建配置

    为了节省http请求次数.节约带宽,加速页面渲染速度,达到更好用户体验的目的.现在普遍的做法是在上线之前做静态资源的打包构建,也就是静态资源的合并压缩: 这里使用的是gulp,当然现在有更强大的模块化 ...

  5. 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5

    Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...

  6. 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作

    前端自动化(三)   合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...

  7. gulp实时编译less，压缩合并requirejs模块文件

    gulp的使用命令简单,就几个,gulp的简单使用教材可以参考一点的gulp使用教材(http://www.ydcss.com/archives/18). 下面就简单的介绍这些命令如何互相配合的完成前 ...

  8. gulp自动化添加版本号并修改为参数格式

    问题: 当我们修改js和css文件时往往需要清除浏览器的缓存,否则有些效果就看不到更新过后的. 通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会 ...

  9. gulp之css,js压缩合并加密替换

    为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源.让客户端可以重新请求资源,而不是从缓存里取.然后html模板里的src也要做相应的修改.当然 ...

随机推荐

  1. Windows Server 2008 R2 允许远程桌面连接这台计算机是灰色解决办法

    发现在给"远程协助"打钩时,是灰色的没法钩上,也就没办法开启.这是因为Windows Server 2008 R2的安全性已经被微软设计的很高,默认刚安装上Windows Serv ...

  2. Cocos2d-x 多分辨率支持

    最近遇到多分辨率支持问题,所以查了一些资料.将一些收获共享一下,以便自己和其他需要的朋友日后参考. 如果我要建立一个cocos2d-x项目,我的目标是支持iphone3G( 480, 320 ),ip ...

  3. JAVA轻量级文件监控

    原文地址:http://blog.csdn.net/three_man/article/details/31012903?utm_source=tuicool 介绍 本文主要介绍一种轻量级的文件监控方 ...

  4. Spring xml中进行autowired的方式

    可以在xml文件中进行autowired: xml: <?xml version="1.0" encoding="UTF-8"?> <bean ...

  5. 自动化测试框架中关于selenium api的二次封装

    不多说,直接看代码如下: #coding:utf-8 from selenium import webdriver from selenium.webdriver.common.action_chai ...

  6. python之FTP程序(支持多用户在线)

    转发注明出处:http://www.cnblogs.com/0zcl/p/6259128.html 一.需求 1. 用户加密认证 (完成)2. 允许同时多用户登录 (完成)3. 每个用户有自己的家目录 ...

  7. java cooki的使用

    session: 当新客户端发现一个HTTP请求时服务端会创建一个session.并分配一个sessionID作为服务端来客户端的识别,session对象会 保存在服务端.此时session对象处天N ...

  8. yum安装CDH5.5 Hadoop集群

    1.环境说明 系统环境: 系统环境:centos6.7 Hadoop版本:CDH5.5 JDK运行版本:1.7.0_67 集群各节点组件分配: 2.准备工作 安装 Hadoop 集群前先做好下面的准备 ...

  9. HTML5中的WebSocket

    在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...

  10. 支撑Pinterest日均1000+次试验的A/B测试平台揭秘

    编者按:本文详细介绍了 Pinterest 内部A/B测试平台的搭建过程,对于无论是有技术能力和资源想要自建A/B测试系统的大公司,还是想在业务中引入第三方A/B测试方法和工具的中小公司都极具参考意义 ...