gulp插件gulp-repath使用教程

gulp-repath

简介：

使用gulp-repath可以重写静态资源引用url，主要功能为给js、css、图片加版本号和加cdn等。

1、预备工作：

1.1、安装nodejs 环境。

1.2、本文示例文件结构如图：

2、安装

2.1、https://github.com/dclnet/gulp-repath

2.2、安装 npm install --save-dev gulp-repath

3、配置gulpfile.js

3.1、基本使用

var gulp = require('gulp');
var repath = require('gulp-repath');

var repathConf = {
  verMode: 'hash',  // origin, hash, param
  hashName: '{origin}-{hash}',
  baseMap: {'static': './static'},
  element: ['script', 'style', 'image'],
  excludeFile: [],
  replace: {
    '@cdn/': '//localhost:8080/'
  }
};

gulp.task('css', function() {
  gulp.src('./src/*.css')
    .pipe(gulp.dest('static/css'));
});

gulp.task('html', function() {
  return gulp.src('./src/*.html')
  .pipe(gulp.dest('./'));
});

gulp.task('finale-css', ['css', 'html'], function() {
  return gulp.src('static/css/*.css')
    .pipe(repath(repathConf))
    .pipe(gulp.dest('static/css'));
});

gulp.task('finale-html', ['finale-css'], function() {
  return gulp.src('./*.html')
    .pipe(repath(repathConf))
    .pipe(gulp.dest('./'));
});

gulp.task('dev', ['css', 'html']);

gulp.task('prod', ['finale-html']);

3.2、配置解说

var repathConf = {
  verMode: 'hash',  //  值为 origin, hash, param之一，默认param,origin：不处理文件，hash：给文件加hash，param：url添加ver=hash

  hashName: '{origin}-{hash}',// verMode为hash时有效，重命名文件时的模板，{origin}原文件名，{hash}文件最后修改时间的hash
  baseMap: {'static': './static'},// 用来定位url中文件，/static/api.js 定位到文件系统为  项目目录/static/api.js
  element: ['script', 'style', 'image'], // 替换处理script脚本，link样式，和图片 
  excludeFile: [],  // 不处理的文件名  main.css
  replace: {
    '@cdn/': '//localhost:8080/'   // 替换的链接，比如cdn, 路径，都可以
  }
};

3.3、示例代码输出

hash模式

/static/js/api.js => /static/js/api-a3b35d82dd89ab76.js

@cdn/static/img/bg.jpg => //localhost:8080/static/img/bg-a3b35d82dd89ab76.jpg

param模式

/static/js/api.js => /static/js/api.js?ver=a3b35d82dd89ab76

@cdn/static/img/bg.jpg => //localhost:8080/static/img/bg.jpg?ver=a3b35d82dd89ab76

建议在所有css、js、图片文件都处理完毕后再用gulp-repath来做简单替换，插件只做简单的替换和加版本号，不会创建子文件夹和移动文件，这个要注意下。

还有，如果有什么bug和建议，也欢迎留言讨论或者提issue，谢谢。