最近遇到一个问题,在做一个拷贝图片到dist目录的任务时,原图片文件结构也同时copy了过去,这不是我想要的。代码如下:
gulp.task('image', function () { return gulp.src(['src/images/*','src/components/**/images/*']) .pipe(imagemin({ progressive: true, svgoPlugins: [{removeViewBox: false}], use: [pngquant({ quality: '65-80', speed: 4 })] })) .pipe(gulp.dest('./dist/images/')); });
如何将所有目录下的图片文件copy到dist/images/下,并且移除掉compoents/**/images/下文件的目录结构呢,找了很久,解决方案如下:
1. 安装gulp-rename插件:
npm install gulp-rename --save-dev
声明变量
var rename = require('gulp-rename');
2.将image 任务改为
gulp.task('image', function () { return gulp.src(['src/images/*','src/components/**/images/*']) .pipe(rename({dirname: ''})) .pipe(imagemin({ progressive: true, svgoPlugins: [{removeViewBox: false}], use: [pngquant({ quality: '65-80', speed: 4 })] })) .pipe(gulp.dest('./dist/images/')); });
注意多了一行
.pipe(rename({dirname: ''}))
enjoy.
相关推荐
gulp编译文件、gulp编译项目
命令行无法安装gulp时用到的文件,命令行无法安装gulp时用到的文件,命令行无法安装gulp时用到的文件,命令行无法安装gulp时用到的文件,命令行无法安装gulp时用到的文件
gulp压缩文件,自动刷新
gulp文件项目配置,生产配置,开发配置,打包,发布。
gulp插件文件
}当 source directory 有新增文件时会调用该方法。fullPathSrc - source directory 目录中新增文件的路径。fullPathDest - destination directory 目录中同步新增的文件的路径。options.deleteFileCallbacktype: ...
gulp-awspublish, gulp插件将文件发布到 AmazonS3 awspublish 用于gulp的awspublish插件。用法首先,将 gulp-awspublish 安装为开发依赖项:npm install --save-dev gulp-awspublish然后,
根据目录或对象结构创建gulp任务 用法 var taskDir = require ( 'gulp-task-directory' ) ; var gulp = require ( 'gulp' ) ; var plugins = require ( 'gulp-load-plugins' ) ( ) ; var root = __dirname ; ...
使用gulp-insert所需要的js代码哦
基于layui框架使用gulp工具搭建的后台模板
gulp-filter, 在乙烯基流中,过滤文件 gulp过滤器 过滤乙烯基流中的文件使你可以使用glob模式过滤原始文件的子集。 当你完成并想要所有原始文件后,你只需使用 restore 流。安装$ npm install --save-dev gulp-...
可以进行完整文件操作同步(增加、删除、更新)的 Gulp 插件
大口开胃菜基本的 gulp 启动文件
文件的 安装 $ npm install --save-dev gulp-chmod 用法 const gulp = require ( 'gulp' ) ; const chmod = require ( 'gulp-chmod' ) ; exports . default = ( ) => ( gulp . src ( 'src/app.js' ) . pipe ( ...
gulp-rsync, Gulp插件用于通过rsync部署文件 gulp在Gulp任务中使用 rsync的文件传输和同步功能。 gulp-rsync 调用 rsync,并为你提供了一个易于安装的选项子集。先决条件rsync 需要安装在你的机器上,并且必须在你的...
gulp配置 gulp配置
gulp是基于Nodejs的自动任务运行器,它能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤...
当生成的js文件中导出的对象结构跟目录结构是类似的,目录名对应为一个对象,文件名对应文件内容. 示例代码 var gulp = require('gulp'); var tpl=require('gulp-tpl2js'); gulp.task('default',function(done){ ...
这是一个gulp的配置文件,可以对整个项目资源实现添加时间戳功能,也能压缩css和js文件
不幸的是,Gulp不了解文件之间的依赖关系,因此很难以增量方式构建依赖于其他文件的文件-不知道,当依赖关系更改时,依赖于该文件的文件也会更改。 解 该插件跟踪通过它的所有文件的依赖关系,建立并维护一个内存中...