最近遇到一个问题,在做一个拷贝图片到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.
相关推荐
3. **监听变化**:`gulp.watch` 可以监听指定文件或目录的变化,当发生变化时自动执行对应的任务,例如: ```javascript gulp.watch('src/**/*.js', gulp.series('lint', 'build')); ``` ### 四、gulp常用插件...
命令行无法安装gulp时用到的文件,命令行无法安装gulp时用到的文件,命令行无法安装gulp时用到的文件,命令行无法安装gulp时用到的文件,命令行无法安装gulp时用到的文件
`gulp.watch()`监听`src/js`目录下所有`.js`文件的变化,当文件发生变化时,会先执行`compress-js`任务,然后通过`browserSync.reload`刷新浏览器。 现在,运行`gulp serve`,gulp就会在文件发生变化时自动进行压缩...
`gulpfile.js`是`gulp`项目的主要配置文件,通常位于项目的根目录下。这个文件定义了各种任务,这些任务可以是编译Sass,压缩JavaScript,或者进行HTML模板处理等。`gulpfile.js`通过引入`gulp`模块和其它插件,编写...
`gulp插件文件`通常指的是使用Gulp时安装和配置的特定插件的代码文件,它们通常是`.js`文件,包含对Gulp任务的定义和插件的调用。 ### 安装与使用Gulp插件 要使用Gulp插件,首先需要在项目中安装Gulp及其插件。这...
现在,当运行`gulp`时,`gulpfile.js`会先为CSS和JS添加时间戳,然后分别进行压缩,并将处理后的文件输出到`dist`目录。 最后,要使以上代码生效,必须在项目根目录下运行`npm install`来安装所需的依赖包。`...
1. **文件添加**:能够将新的文件或目录添加到指定的位置,这在合并代码或更新资源时非常有用。 2. **文件删除**:可以删除不需要的文件或目录,保持项目的整洁和高效。 3. **文件更新**:能够自动更新文件内容,...
通过合理规划文件结构和配置gulp任务,你可以创建出一个既美观又高效的layui后台模板,满足开发、测试和生产环境的需求。在实践中,不断调整和完善gulpfile.js,以适应项目发展和团队协作,是提升开发效率的关键。
5. **文件结构**:在`vue-spa-router-gulp-master`这个项目中,文件结构可能包括`src`目录,里面包含Vue组件、路由配置、入口文件、样式文件等;`dist`目录用于存放构建后的生产代码;`gulpfile.js`存放Gulp任务配置...
GULP程序自身会从所选力场中提取相关元素的信息,因此,使用时需要检查GULP输入文件中的参数(力场参数)是否确实与所研究的体系相关。 注意:如果所研究体系中的元素不在选定力场的范围内,那么在点击Run后,程序...
}当 source directory 有新增文件时会调用该方法。fullPathSrc - source directory 目录中新增文件的路径。fullPathDest - destination directory 目录中同步新增的文件的路径。options.deleteFileCallbacktype: ...
本文将深入探讨“gulp前端自动化配置文件”的核心概念、功能以及如何使用。 Gulp是一款基于Node.js的任务运行器,它允许开发者通过编写简单的JavaScript脚本来定义并执行一系列自动化任务。这些任务涵盖了代码编译...
在使用 Gulp 处理大量文件时可能会遇到各种错误,如语法错误、路径错误等。Gulp 提供了两种常用的异常处理方式: 1. **gulp-notify**:用于在错误发生时向系统发送通知。 ```bash npm install --save-dev gulp-...
在实际项目中,这类文件通常包含了如何运行Gulp任务、项目结构等信息。 `test`目录通常存放着项目的测试代码,比如使用Mocha、Jasmine等测试框架编写的单元测试或集成测试,确保代码的质量和功能正确性。 `.vscode...
在实际使用`gulp-rev2`时,开发者需要首先安装插件,然后在Gulpfile.js中配置任务,指定要处理的文件路径和输出格式。插件会自动处理文件并更新引用。`gulp-rev2-master`这个压缩包很可能包含了插件源码和示例配置,...
现在,当你修改Sass文件时,`gulp`会自动编译并更新CSS。 ### 5. 流程优化 除了基本任务,还可以定义更复杂的流程,比如使用`gulp-clean-css`和`gulp-uglify`压缩CSS和JavaScript。安装插件: ```bash npm ...
进入项目根目录,使用`npm install --save-dev gulp`安装本地Gulp,这样可以在项目中通过`require()`引入Gulp。之后,根据需求安装版本号管理相关的Gulp插件,例如`gulp-rev`、`gulp-rev-collector`等,这些插件可以...
首先,`gulp-rev`是一个Gulp插件,它的主要作用是对静态资源文件(如CSS、JS)进行版本号替换,以便在部署时实现浏览器缓存的刷新。在项目开发过程中,静态文件的更新经常导致用户浏览器加载的是旧版本的文件,这...
gulp-awspublish, gulp插件将文件发布到 AmazonS3 awspublish 用于gulp的awspublish插件。用法首先,将 gulp-awspublish 安装为开发依赖项:npm install --save-dev gulp-awspublish然后,