版权声明：原创文章，引用请注明出处！ https://blog.csdn.net/guang_s/article/details/84861940
需求分析：只要是用 * 匹配的文件路径都会直接将原始路径打包到dist，而很多时候我们需要将单纯的文件打包过去就可以了。
一、gulp.src 文件路径规则
1、参数说明
/**
* options {Object}
* options.base {String} 定义被替换的文件路径
*/
gulp.src(globs[, options])
2、使用说明
/**
* gulp.dest() 定义的路径会取代 base 定义的路径
*/
gulp.task('css_libs', function(){
return gulp.src('src/libs/**/*.css') // 匹配 'src/libs/bootstrap/bootstrap.min.css' 并且将 `base` 解析为 `src/libs`
.pipe(gulp.dest('dist/css')); // 写入'dist/css/bootstrap/bootstrap.min.css'
});
gulp.task('css_libs', function(){
return gulp.src('src/libs/**/*.css', { base: 'src' }) // 匹配 'src/libs/bootstrap/bootstrap.min.css' 并且将 `base` 解析为 `src/libs`
.pipe(gulp.dest('dist/css')); // 写入'dist/libs/css/bootstrap/bootstrap.min.css'
});
3、只要是用 * 匹配的文件路径都会直接将原始路径打包到dist，这不是我们需要的
.
二、gulp打包路径如何处理
1、我们最后需要 ‘dist/js’ 下面是单纯的.js文件，不需要任何文件夹包裹。所以之前项目就把所有的js文件放在了‘libs/js’下面，但是这样一来libs下面的文件会很乱，如下
2、我们希望能将第三方资源按照不同功能就行分类，方便维护，如下
3、要同时满足1、2的需求，就需要用到gulp-rename模块
三、安装gulp-rename模块
npm i -D gulp-rename
四、gulp-rename参数说明
/**
* options {String or Object or Function} 这里以{Object}为例
* {
* dirname: "js", 文件路径
* basename: "main", 文件名
* prefix: "", 文件名前缀
* suffix: ".min", 文件名后缀
* extname: ".js" 文件扩展名
* }
*/
rename(options)
五、gulp-rename配置使用
var rename = require('gulp-rename'); // 重命名
gulp.task('js_libs', function(){
return gulp.src('./src/libs/**/*.js')
.pipe(rename({
dirname: '' // 清空路径
}))
.pipe(gulp.dest('./dist/js'));
});
六、最后打包路径效果
.
项目地址（别忘了给星哦）
相关文章
gulp构建项目（一）：环境准备及项目基础结构搭建
gulp构建项目（二）：browser-sync启本地服务并开启浏览器
gulp构建项目（三）：gulp-watch监听文件改变、新增、删除
gulp构建项目（四）：run-sequence实现逐个执行任务
gulp构建项目（五）：gulp-if条件判断及环境变量设置
gulp构建项目（六）：gulp-html-tpl处理公用模板
gulp构建项目（七）：gulp-uglify压缩js以及检查js语法错误
gulp构建项目（八）：gulp编译less，添加CSS前缀以及压缩css
gulp构建项目（九）：gulp-imagemin压缩图片及gulp-cache缓存
gulp构建项目（十）：gulp-rev-collector-dxb添加版本号（?hash）
gulp构建项目（十一）：gulp-htmlmin压缩html
gulp构建项目（十二）：gulp-babel编译es6
gulp构建项目（十三）：babel-polyfill编译es6新增api
gulp构建项目（十四）：gulp-rename重定义打包生成文件的路径
.
gulp构建项目（附录一）：gulp发生错误时，进程挂掉的问题