虽然网上有很多的 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. Struts框架中struts-config.xml文件配置小结

    弄清楚struts-config.xml中各项元素的作用,对于我们构建web项目有莫大的好处.<struts-config>是struts的根元素,它主要有8个子元素,DTD定义 如下: ...

  2. Linux下的文件目录结构详解

    Linux下的文件目录结构详解 / Linux文件系统的上层根目录 /bin 存放用户可执行的程序 /boot 操作系统启动时所需要的文件 /dev 接口设备文件目录,例如:had表示硬盘 /etc ...

  3. JS 继承(类式 与 原型式)

    1. /* -- 类式继承 -- *///先声明一个超类 function Person(name) { this.name = name;}//给这个超类的原型对象上添加方法 getName Per ...

  4. MariaDB与MySQL在一台服务器同时运行

    [root@HE3 ~]#groupadd mariadb -g 513 [root@HE3 ~]#useradd-u 513 -gmariadb -s /sbin/nologin -d /home/ ...

  5. JS模板引擎：基于字符串拼接

    目的 编写一个基于字符串拼接的js模板引擎雏形,这里并不会提供任何模板与数据的绑定. 基本原理 Javascript中创建函数的方式有多种,包括: 1. var func = function () ...

  6. ORACLE获取字符串中数字部分

    ') from dual; select regexp_replace('23456中国3-00=.,45','[^0-9]') from dual;标签:regexp_replace regexp ...

  7. [MyBatis]mapperLocations属性通配符的使用

    http://blog.csdn.net/szwangdf/article/details/23432783 http://ljhzzyx.blog.163.com/blog/static/38380 ...

  8. ASP.NET Zero--15.一个例子（8）商品分类管理-权限控制

    1.添加权限常量 打开文件AppPermissions.cs [..\MyCompanyName.AbpZeroTemplate.Core\Authorization\AppPermissions.c ...

  9. Mockito教程

    Mockito教程 2017-01-20 目录 1 Mockito 介绍   1.1 Mockito是什么?  1.2 为什么需要Mock  1.3 Stub和Mock异同  1.4 Mockito资 ...

  10. 从零开始学C#——基本语法（二）

    基本语法 C#,又名Csharp,天朝喜欢叫C井. C#是一种面向对象的编程语言.在面向对象的程序设计方法中,程序有各种相互交互的对象组成.相同种类的对象通常具有相同的类型,或者说,是在先沟通那个的c ...