虽然网上有很多的 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. 利用phpcms-v9站群功能建立多个分站

    用一套CMS软件系统,做多个网站,统一管理,用户可以互通,这就是所谓的站群功能.这对于运营和维护都能节省很多时间,否则要同时调试和维护不同系统会非常吃力. 我在用PHPcms v9做了zhencms1 ...

  2. Java Ant Could not find the main class: org.eclipse.ant.internal.launching.remote.InternalAntRunner. Program

    参考:http://blog.csdn.net/jiangtaoking/article/details/49151763 The solution is to go to Run as → Exte ...

  3. PHP上传图片重命名6种方案

    一. 适用场景:无法使用从数据库中返回的自增长数字,给上传图片重命名.这是图片或文件上传的流程决定的.一般图片上传处理过程是,先上传图片到服务器,重命名之后,插入到数据库.也就是说,在数据库中非常容易 ...

  4. Flex中操作XML的E4X方法

    用于处理 XML 的 E4X 方法 Flash Player 9 和更高版本,Adobe AIR 1.0 和更高版本   ECMAScript for XML 规范定义了一组用于使用 XML 数据的类 ...

  5. angular表格分页

    <!doctype html> <html lang="en" > <head> <meta charset="UTF-8&qu ...

  6. Swing JComboBox的使用

    1:JComboBox的使用:类层次结构图: java.lang.Object --java.awt.Component --java.awt.Container --javax.swing.JCom ...

  7. 文件下载类型__response

    response.setContentType(MIME)的作用是使客户端浏览器,区分不同种类的数据,并根据不同的MIME调用浏览器内不同的程序嵌入模块来处理相应的数据. 例如web浏览器就是通过MI ...

  8. 如何增强ArcGIS插值图出图效果

    如何增强ArcGIS插值图出图效果 by 李远祥 在一些科研领域,经常会遇到使用插值的方式进行处理,并生成最终的插值图.插值图在ArcGIS里面非常容易生成,只要具备了采用点数据,通过ArcToolB ...

  9. FindPkgConfig----CMake的pkg-config模块

    FindPkgConfig A pkg-config module for CMake. CMake的pkg-config模块. Finds the pkg-config executable and ...

  10. Iterator——迭代接口

    迭代对于JAVA的来说绝对不陌生.我们常常使用JDK提供的迭代接口进行Java集合的迭代. Iterator iterator = list.iterator(); while(iterator.ha ...