虽然网上有很多的 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. Spring的IOC原理[通俗解释一下]

    Spring的IOC原理[通俗解释一下] 1. IoC理论的背景我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 图 ...

  2. 几种常用的控件（下拉框 可选框 起止日期 在HTML页面直接读取当前时间）

    下拉框 <div class="form-group">                        <label class="col-xs-3 c ...

  3. java 数据设置和显示

    1. 首先设置ModelAndView 的值 @Override public ModelAndView handleRequest(HttpServletRequest arg0, HttpServ ...

  4. C# Linq to sql 实现 group by 统计多字段 返回多字段

    Linq to sql 使用group by 统计多个字段,然后返回多个字段的值,话不多说,直接上例子: where u.fy_no == fy_no orderby u.we_no group u  ...

  5. 使用 GitHub, Jekyll 打造自己的免费独立博客

    使用 GitHub, Jekyll 打造自己的免费独立博客 GitHub是一个代码托管网站,现在很多开源项目都放在GitHub上. 利用GitHub,可以让全球各地的程序员们一起协作开发.GitHub ...

  6. Flex移动皮肤开发(二)

    范例文件 mobile-skinning-part2.zip 在这个讨论创建 Flex 移动 skin 的系列的 第 1 部分 中,我讨论了 Flex 团队在 Mobile 主题中所做的性能优化的原理 ...

  7. [心得]传统IT转互联网面试经验分享

    http://www.newsmth.net/bbstcon.php?board=Java&gid=374779 传统IT外企干了8年,两年前转互联网的,面的和被面的都不少.这几天项目空档期, ...

  8. NodeJS异步I/O解析

    在现在的项目开发中,任何一个大型项目绝对不是简简单单的采用一个种语言和一种框架,因为每种语言和框架各有优势,与其死守一个,不与取各家之所长,依次得到一个高性能.搞扩展的产品. 对于一个.NET开发者, ...

  9. css3模拟jq点击事件

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

  10. We Chall-Training: Crypto - Caesar I-Writeup

    MarkdownPad Document html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,ab ...