虽然网上有很多的 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. bmp图片显示

    文件IO项目: 在开发板屏幕上循环显示目录里的图片 a.按照一定的间隔循环显示目录里的bmp图片 b.实现手指滑动来显示目录里的图片(bmp,jpg)上一张,下一张 d1: 1.能操控屏幕(查询开发板 ...

  2. JQuery的$.each(list,function(i,a){} 中 i和a 未定义，a取不到值

    $.each(list,function(i,a){ var status = ""; if(a.status==0) status="未审核"; else i ...

  3. HDFS存储系统

    HDFS存储系统 一.基本概念 1.NameNode HDFS采用Master/Slave架构.namenode就是HDFS的Master架构.主要负责HDFS文件系统的管理工作,具体包括:名称空间( ...

  4. ListView 的三种数据绑定方式

    ListView 的三种数据绑定方式   1.最原始的绑定方式: public ObservableCollection<object> ObservableObj; public Mai ...

  5. MVC + AngularJS 初体验(实现表单操作)

    AngularJS AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications). Ang ...

  6. css3模拟jq点击事件

    还是这个梗,收好冷.今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照 jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮 ...

  7. 利刃 MVVMLight 3：双向数据绑定

          上篇我们已经了解了MVVM的框架结构和运行原理.这里我们来看一下伟大的双向数据绑定. 说到双向绑定,大家比较熟悉的应该就是AngularJS了,几乎所有的AngularJS 系列教程的开篇 ...

  8. [UWP]依赖属性2：使用依赖属性

    5. 完整的自定义依赖属性 5.1 定义 /// <summary> /// 标识 Title 依赖属性. /// </summary> public static reado ...

  9. 一个想法（续五）：IT联盟创业计划：现阶段进度公示、疑问解答及进行中的计划

    前言: 首先今天是元宵节,先祝大伙元宵节快,单纯的快乐! 然后看看开展中的计划: IT联盟创业计划众筹发起:一个想法(续三):一份IT技术联盟创业计划书,开启众筹创业征程 IT联盟创业计划众筹进度:一 ...

  10. 嵌套的Try-Catch块--------异常处理(3)

    当有一个Try块没有一个对应的异常可处理,则其父类的异常处理机制去处理.如果父类的异常处理机制不能处理,则java run-time system将会抛出一个异常. 例子: class Nest{ p ...