Gulp自动化构建实战-CSDN博客

1.官方网站 gulp.js - 基于流(stream)的自动化构建工具 | gulp.js 中文网

2.gulp安装 http://www.ydcss.com/archives/18

3.目录结构

4.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
    <input type="button" id="button1" value="Click">
    <script src="js/index.js" ></script>
</body>
</html>

5.index.js

$(function () {
    $('#button1').click(function () {
        alert('button1');
    });
});

6.config.js

var src = '../src';
var dest = '../dist';
var config = {
    js: {
        src: src + "/js/**/*",
        dest: dest + "/js",
        rev: dest + "/rev/js"
    },
    rev:{
        revJson: dest + "/rev/**/*.json",
        src: src + "/*.html",
        dest: dest
    }
}
module.exports = config;

7.gulpfile.js

var gulp = require('gulp');

//使用gulp-uglify压缩javascript文件，减小文件大小。http://www.ydcss.com/archives/54
var uglify = require('gulp-uglify');

//根据静态资源内容，生成md5签名，打包出来的文件名会加上md5签名，同时生成一个json用来保存文件名路径对应关系。http://www.cnblogs.com/1wen/p/5421212.html
var rev = require('gulp-rev');

//这个插件就是从manifests中获取静态资源版本数据, 该数据由不同的流产生, 并且替换html中的链接。 http://blog.csdn.net/hayleyxia/article/details/46969711
var revCollector = require('gulp-rev-collector');

//优雅的异步处理任务。https://www.npmjs.com/package/gulp-sync
var gulpsync = require('gulp-sync')(gulp);

var config = require('./config').js;
var configRev = require('./config').rev;


gulp.task('js', function() {
    return gulp.src(config.src)
        .pipe(uglify({mangle: false, compress: {properties: false}, output: {quote_keys: true}}))
        .pipe(rev())
        .pipe(gulp.dest(config.dest))
        .pipe(rev.manifest())
        .pipe(gulp.dest(config.rev));
});

gulp.task('rev', function () {
    return gulp.src([configRev.revJson, configRev.src])
        .pipe(revCollector({replaceReved: true,}))
        .pipe(gulp.dest(configRev.dest) );
});

gulp.task('default',gulpsync.sync(['js', 'rev']),function () {

});

8.packgae.json

{
  "name": "demo",
  "description": "member-frontend",
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com/npm/npm.git"
  },
  "devDependencies": {
    "cheerio": "^1.0.0-rc.1",
    "gulp": "^3.9.1",
    "gulp-changed": "^1.3.2",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.0",
    "gulp-html-replace": "^1.6.2",
    "gulp-if": "^2.0.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-rev": "^7.1.2",
    "gulp-rev-collector": "^1.0.5",
    "gulp-sync": "^0.1.4",
    "gulp-uglify": "^2.0.0",
    "map-stream": "0.0.7",
    "minimist": "^1.2.0",
    "vinyl-fs": "2.4.4"
  },
  "bugs": {
    "url": "https://github.com/npm/npm/issues"
  },
  "homepage": "https://github.com/npm/npm#readme",
  "version": "1.0.0",
  "main": "gulpfile.js",
  "dependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "xutongbao"
}

9.压缩后的index.js

$(function(){$("#button1").click(function(){alert("button1")})});

10.遍历所有html，替换文件命名后的效果

11.参考链接

变态的静态资源缓存与更新变态的静态资源缓存与更新 - Jathon的个人页面 - OSCHINA - 中文开源技术交流社区

项目部署缓存解决方案gulp-rev：项目部署缓存解决方案----gulp系列（六) - 子慕大诗人 - 博客园

gulp使用指南