├── .gitignore ├── README.md ├── demo ├── gulpfile.js ├── manifest.json ├── output │ ├── css │ │ ├── base_6f2c3c4b4b.css │ │ └── index_8bc79f7163.css │ ├── img │ │ ├── another-same.d50512f594.svg │ │ ├── featured-contribution-graph.08f89e7005.png │ │ ├── open-source-ill-experiment.b704518f96.png │ │ ├── open-source-ill-giveback.5546983ac2.png │ │ ├── same.dee749598a.svg │ │ └── sub_img │ │ │ └── same.c6d8d64368.svg │ └── index.html ├── package.json └── source │ ├── .DS_Store │ ├── css │ ├── base.css │ └── index.css │ ├── img │ ├── .DS_Store │ ├── another-same.svg │ ├── featured-contribution-graph.png │ ├── open-source-ill-experiment.png │ ├── open-source-ill-giveback.png │ ├── same.svg │ └── sub_img │ │ ├── .DS_Store │ │ └── same.svg │ └── index.html ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # Compiled binary addons (http://nodejs.org/api/addons.html) 20 | build/Release 21 | 22 | # Dependency directory 23 | # Deployed apps should consider commenting this line out: 24 | # see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git 25 | node_modules 26 | 27 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gulp-md5-plus 2 | 3 | > md5 plugin for [gulp](https://github.com/wpfpizicai/gulp-md5-plus) ,md5 the static files(eg javascript style image files) ;then replace the filenames in css or the html if needed by passing the file or dir in the second parameter 4 | 5 | ## Usage 6 | 7 | 8 | First, install `gulp-md5-plus` as a development dependency: 9 | 10 | ```shell 11 | npm install --save-dev gulp-md5-plus 12 | ``` 13 | 14 | Then, add it to your `gulpfile.js`: 15 | 16 | ```javascript 17 | var md5 = require("gulp-md5-plus"); 18 | 19 | gulp.src("./src/*.css") 20 | .pipe(md5(10,'./output/index.html')) 21 | .pipe(gulp.dest("./dist")); 22 | ``` 23 | 24 | md5 all css files in the src folder and change these css names in the quoted html--index.html 25 | 26 | ```javascript 27 | 28 | gulp.task('img' ,function() { 29 | var imgSrc = './static/img/**', 30 | quoteSrc = './output/static/css/**/*.css', // [./output/static/css/**/*.css',./output/static/js/**/*.js'] 31 | imgDst = './output/static/img'; 32 | 33 | return gulp.src(imgSrc) 34 | .pipe(imagemin()) 35 | .pipe(md5(10 ,quoteSrc)) 36 | .pipe(gulp.dest(imgDst)); 37 | }); 38 | 39 | ``` 40 | 41 | first, optimize all images in the img folder including all sub folders; then md5 all these images and change these images' names in the quoted css files ; 42 | 43 | 44 | ####note 45 | the directory of the md5ed files in the imgDst folder is the same as that of original files in the imgSrc folder; and css files can refer the image file with the same name in different folder rightly; 46 | 47 | ## API 48 | 49 | ### md5(size,file,option) 50 | 51 | #### size 52 | Type: `String` 53 | 54 | Default: null 55 | 56 | > you can pass the size to limit the size of the hash that is appended. 57 | 58 | #### file 59 | Type: `String` 60 | 61 | Default: null 62 | 63 | > the file need to replace the file name of the md5ed files. dir is also supported 64 | 65 | #### option 66 | Type: `Object` 67 | 68 | Default: null 69 | 70 | ##### option.dirLevel 71 | Type: `Number` 72 | 73 | Default: null 74 | 75 | > used to match the file with it's directory path. for example: there is a file `Dev/work/gulp-md5-plus/demo/source/img/sub_img/same.svg`;when setting `dirLevel` to *1*, the plugin will use `sub_img/same.svg` to find this file in the quoted files;this option's main purpose is to replace the files with the same name in different paths. you can see demo for detail. 76 | 77 | Example: 78 | ```javascript 79 | gulp.task('img' , ['css'],function() { 80 | gulp.src('./source/img/**/*') 81 | .pipe(md5(10 ,'./output/css/*.css',{ 82 | dirLevel : 1, 83 | mappingFile: 'manifest.json', 84 | connector: '.' 85 | })) 86 | .pipe(gulp.dest('./output/img/')); 87 | }); 88 | ``` 89 | 90 | The sample above will append the md5 hash(length : 10) to each of the file in the static/js folder then repalce the link file name in the output/html/ using md5ed file name; at last store all of that into the *output* folder. 91 | 92 | ##### option.connector 93 | Type: `String` 94 | 95 | Default: `_` 96 | 97 | > used to set the output file‘s connector; if use `.` the outfile will look like `imgfile.5546983ac2.png` ,while default is `imgfile_5546983ac2.png` 98 | 99 | 100 | ##### option.mappingFile 101 | Type: `String` 102 | 103 | Default: null 104 | 105 | > set the file to write the mapping result ,for example `manifest.json` 106 | 107 | after set this option ;you should remove this file before `gulp`; you can follow the demo; 108 | 109 | ## Demo 110 | 111 | I have add a demo to demonstate how to use this plugin; If you have any other questions ,pls add issues. 112 | 113 | ## License 114 | 115 | http://en.wikipedia.org/wiki/MIT_License[MIT License] 116 | 117 | 118 | -------------------------------------------------------------------------------- /demo/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var md5 = require("../index"); 3 | var del = require('del'); 4 | 5 | gulp.task('clean', function(){ 6 | return del(['./output','./manifest.json']) 7 | }); 8 | 9 | gulp.task('html',function(){ 10 | return gulp.src('./source/*.html') 11 | .pipe(gulp.dest('./output/')) 12 | }) 13 | 14 | gulp.task('css',['html'],function(){ 15 | return gulp.src("./source/css/*.css") 16 | .pipe(md5(10,'./output/*.html',{ 17 | mappingFile: 'manifest.json' 18 | })) 19 | .pipe(gulp.dest("./output/css/")); 20 | }) 21 | 22 | 23 | gulp.task('img' , ['css'],function() { 24 | gulp.src('./source/img/**/*') 25 | .pipe(md5(10 ,'./output/css/*.css',{ 26 | dirLevel : 1, 27 | mappingFile: 'manifest.json', 28 | connector: '.' 29 | })) 30 | .pipe(gulp.dest('./output/img/')); 31 | }); 32 | 33 | gulp.task('default',['clean'],function(){ 34 | gulp.start('html','css','img'); 35 | }) -------------------------------------------------------------------------------- /demo/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "another-same.svg": "another-same.d50512f594.svg", 3 | "featured-contribution-graph.png": "featured-contribution-graph.08f89e7005.png", 4 | "open-source-ill-experiment.png": "open-source-ill-experiment.b704518f96.png", 5 | "open-source-ill-giveback.png": "open-source-ill-giveback.5546983ac2.png", 6 | "same.svg": "same.c6d8d64368.svg", 7 | "base.css": "base_6f2c3c4b4b.css", 8 | "index.css": "index_8bc79f7163.css" 9 | } 10 | -------------------------------------------------------------------------------- /demo/output/css/base_6f2c3c4b4b.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | abbr, address, cite, code, 4 | del, dfn, em, img, ins, kbd, q, samp, 5 | small, strong, sub, sup, var, 6 | b, i, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td, 10 | article, aside, canvas, details, figcaption, figure, 11 | footer, header, hgroup, menu, nav, section, summary, 12 | time, mark, audio, video { 13 | margin:0; 14 | padding:0; 15 | border:0; 16 | outline:0; 17 | font-size:100%; 18 | vertical-align:baseline; 19 | background:transparent; 20 | -webkit-font-smoothing: antialiased; 21 | } 22 | html{ 23 | height: 100%; 24 | } 25 | body { 26 | line-height:1; 27 | font: 12px/1.5 "Microsoft YaHei",tahoma,arial,Hiragino Sans GB,\5b8b\4f53; 28 | overflow-x: hidden; 29 | position: relative; 30 | height: 100%; 31 | } 32 | 33 | :focus { 34 | outline: 1; 35 | } 36 | 37 | article,aside,canvas,details,figcaption,figure, 38 | footer,header,hgroup,menu,nav,section,summary { 39 | display:block; 40 | } 41 | 42 | nav ul { 43 | list-style:none; 44 | } 45 | 46 | blockquote, q { 47 | quotes:none; 48 | } 49 | 50 | blockquote:before, blockquote:after, 51 | q:before, q:after { 52 | content:''; 53 | content:none; 54 | } 55 | 56 | a { 57 | margin:0; 58 | padding:0; 59 | border:0; 60 | font-size:100%; 61 | vertical-align:baseline; 62 | background:transparent; 63 | } 64 | 65 | ins { 66 | background-color:#ff9; 67 | color:#000; 68 | text-decoration:none; 69 | } 70 | 71 | mark { 72 | background-color:#ff9; 73 | color:#000; 74 | font-style:italic; 75 | font-weight:bold; 76 | } 77 | 78 | del { 79 | text-decoration: line-through; 80 | } 81 | 82 | abbr[title], dfn[title] { 83 | border-bottom:1px dotted #000; 84 | cursor:help; 85 | } 86 | 87 | table { 88 | border-collapse:collapse; 89 | border-spacing:0; 90 | } 91 | 92 | hr { 93 | display:block; 94 | height:1px; 95 | border:0; 96 | border-top:1px solid #cccccc; 97 | margin:1em 0; 98 | padding:0; 99 | } 100 | 101 | input, select { 102 | vertical-align:middle; 103 | } 104 | ul, li { 105 | list-style: none; 106 | } 107 | -------------------------------------------------------------------------------- /demo/output/css/index_8bc79f7163.css: -------------------------------------------------------------------------------- 1 | .f-fifty{ 2 | float: left; 3 | width: 50%; 4 | height: 100px; 5 | } 6 | .same{ 7 | width: 100px; 8 | height: 100px; 9 | background: url('../img/same.dee749598a.svg') no-repeat; 10 | } 11 | .another-same{ 12 | width: 100px; 13 | height: 100px; 14 | background: url('../img/another-same.d50512f594.svg') no-repeat; 15 | } 16 | .sub-same{ 17 | width: 100px; 18 | height: 100px; 19 | background: url('../img/sub_img/same.c6d8d64368.svg') no-repeat; 20 | } -------------------------------------------------------------------------------- /demo/output/img/another-same.d50512f594.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 39 | -------------------------------------------------------------------------------- /demo/output/img/featured-contribution-graph.08f89e7005.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpfpizicai/gulp-md5-plus/59063c883480d674d943605a162372b83ddff596/demo/output/img/featured-contribution-graph.08f89e7005.png -------------------------------------------------------------------------------- /demo/output/img/open-source-ill-experiment.b704518f96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpfpizicai/gulp-md5-plus/59063c883480d674d943605a162372b83ddff596/demo/output/img/open-source-ill-experiment.b704518f96.png -------------------------------------------------------------------------------- /demo/output/img/open-source-ill-giveback.5546983ac2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpfpizicai/gulp-md5-plus/59063c883480d674d943605a162372b83ddff596/demo/output/img/open-source-ill-giveback.5546983ac2.png -------------------------------------------------------------------------------- /demo/output/img/same.dee749598a.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 47 | -------------------------------------------------------------------------------- /demo/output/img/sub_img/same.c6d8d64368.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 53 | -------------------------------------------------------------------------------- /demo/output/index.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |