热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记中的gulp技巧总结及使用方法

本文总结了在开发中使用gulp时的一些技巧,包括如何使用gulp.dest自动创建目录、如何使用gulp.src复制具名路径的文件以及保留文件夹路径的方法等。同时介绍了使用base选项和通配符来保留文件夹路径的技巧,并提到了解决带文件夹的复制问题的方法,即使用gulp-flatten插件。

1. gulp.dest 会自动创建目录

gulp.dest(dir),若dir不存在,gulp会自动创建它

2. gulp.src copy具名路径(即不子目录**的路径)的文件,不会保留文件夹路径

gulp.src(‘static/user/user.js‘)
.pipe(gulp.dest(
dist));
gulp.src(
‘static/*.js‘); //一级的*.xx文件也不会保留路径

如上,将user.js拷贝到dist,会形成如下结构

dist
  user.js

若要保留路径,即形成

dist
  static
    user
      user.js

需要添加base选项,如下:

gulp.src(‘static/user/user.js‘, {base:‘.‘})
.pipe(gulp.dest(
dist));
//或者使用通配符
gulp.src(
‘static*/user*/user.js‘)
.pipe(gulp.dest(
‘dist));

3. gulp.src copy带有*的路径的文件,会保留文件夹路径

gulp.src(‘login/**/*.js‘)
.pipe(gulp.dest(
‘dist‘));

复制到dist的文件是带文件夹的

要解决这个问题,有如下方法:

1. gulp-flatten插件可以拍平文件结构

var gulp = require(‘gulp-flatten‘);
//转移图片并压缩
gulp.task(‘copy-images‘, function() {
return gulp.src([‘./src/common/images/**/*‘])
.pipe(flatten())
.pipe(imagemin())
.pipe(gulp.dest(
‘./build/images‘));
});

2. gulp-rename插件可以修改文件路径和文件名

var gulp = require(‘gulp-rename‘);
//转移图片并压缩
gulp.task(‘copy-images‘, function() {
return gulp.src([‘./src/common/images/**/*‘])
.pipe(rename({dirname:
‘‘}))
.pipe(imagemin())
.pipe(gulp.dest(
‘./build/images‘));
});

 







推荐阅读
  • 本文介绍如何使用JavaScript中的for循环来创建一个九九乘法表,适合初学者学习循环结构的应用。 ... [详细]
  • 利用Node.js实现PSD文件的高效切图
    本文介绍了如何通过Node.js及其psd2json模块,快速实现PSD文件的自动化切图过程,以适应项目中频繁的界面更新需求。此方法不仅提高了工作效率,还简化了从设计稿到实际应用的转换流程。 ... [详细]
  • 函子(Functor)是函数式编程中的一个重要概念,它不仅是一个特殊的容器,还提供了一种优雅的方式来处理值和函数。本文将详细介绍函子的基本概念及其在函数式编程中的应用,包括如何通过函子控制副作用、处理异常以及进行异步操作。 ... [详细]
  • H5技术实现经典游戏《贪吃蛇》
    本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术,我们将探讨如何构建这款游戏的两种主要玩法:积分闯关和无尽模式。 ... [详细]
  • 长期从事ABAP开发工作的专业人士,在面对行业新趋势时,往往需要重新审视自己的发展方向。本文探讨了几位资深专家对ABAP未来走向的看法,以及开发者应如何调整技能以适应新的技术环境。 ... [详细]
  • 二维码的实现与应用
    本文介绍了二维码的基本概念、分类及其优缺点,并详细描述了如何使用Java编程语言结合第三方库(如ZXing和qrcode.jar)来实现二维码的生成与解析。 ... [详细]
  • publicclassBindActionextendsActionSupport{privateStringproString;privateStringcitString; ... [详细]
  • 入门指南:使用FastRPC技术连接Qualcomm Hexagon DSP
    本文旨在为初学者提供关于如何使用FastRPC技术连接Qualcomm Hexagon DSP的基础知识。FastRPC技术允许开发者在本地客户端实现远程调用,从而简化Hexagon DSP的开发和调试过程。 ... [详细]
  • Android与JUnit集成测试实践
    本文探讨了如何在Android项目中集成JUnit进行单元测试,并详细介绍了修改AndroidManifest.xml文件以支持测试的方法。 ... [详细]
  • 小编给大家分享一下Vue3中如何提高开发效率,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获, ... [详细]
  • 本文详细介绍了如何在 Vue CLI 3.0 和 2.0 中配置 proxy 来解决开发环境下的跨域问题,包括具体的配置项和使用场景。 ... [详细]
  • 本文详细介绍了如何在 Node.js 环境中利用 Nodemailer 库实现邮件发送功能,包括环境配置、代码实现及常见问题解决方法。 ... [详细]
  • 本文介绍了如何在 Node.js 中使用流(Stream)进行数据读取与写入,包括创建可读流与可写流的基本方法,并提供了具体的代码示例。 ... [详细]
  • 【小白学习C++ 教程】二十三、如何安装和使用 C++ 标准库
    【小白学习C++ 教程】二十三、如何安装和使用 C++ 标准库 ... [详细]
  • 本文将深入探讨 Unreal Engine 4 (UE4) 中的距离场技术,包括其原理、实现细节以及在渲染中的应用。距离场技术在现代游戏引擎中用于提高光照和阴影的效果,尤其是在处理复杂几何形状时。文章将结合具体代码示例,帮助读者更好地理解和应用这一技术。 ... [详细]
author-avatar
pipipa
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有