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'));
});

gulp技巧总结的更多相关文章

  1. gulp 技巧

    install npm install --save-dev jshint gulp-jshint 压缩js npm install --save-dev gulp-minify-css xxCSS ...

  2. gulp的使用介绍及技巧

    gulp的使用介绍及技巧 转载: https://www.cnblogs.com/2050/p/4198792.html 1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安 ...

  3. gulp使用技巧-删除node_modules文件夹,解决目录层次太深删除报错的问题

    问题描述: 在使用gulp当中,自动生成的node_modules文件夹,因为文件目录层级太深,无法系统删除,用360粉碎工具也报错 解决方法: 使用npm中的插件rimraf,专门用于删除的模块插件 ...

  4. Gulp插件使用技巧

    目录: 插件的安装卸载 插件使用的基本流程 拆分任务 监听 默认任务 一.插件的安装卸载 安装: npm install gulp-less --save-dev 卸载 npm uninstall g ...

  5. 前端网络、JavaScript优化以及开发小技巧

    一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...

  6. WebStorm 常用功能的使用技巧分享

    WebStorm 是 JetBrain 公司开发的一款 JavaScript IDE,使用非常方便,可以使编写代码过程更加流畅. 本文在这里分享一些常用功能的使用技巧,希望能帮助大家更好的使用这款强大 ...

  7. 前端打包构建工具gulp快速入门

    因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话确实是个问题,尤其项目大了以后,目前位置遇到的项目都还可以忍受.不过不 ...

  8. (转)gulp使用

    前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nod ...

  9. gulp使用小结(二)

    接上篇文章接Gulp使用小结(一) 内容如下: 首先,偶在gulp-demos上已经提交了个较通用的栗子...俺琢磨半天,原准备分阶段搞些 Gulp 套路,但是写完介个栗子之后,觉得已经能覆盖绝大多数 ...

随机推荐

  1. (二)活用ComponentScan

    项目改造成spring cloud项目后,有非常多组件是复用的,比如(一)敏感信息混淆的组件,比如数据库.Redis等配置, 比如常用的api组件Swagger配置.每个微服务组件里都会有若干个组件随 ...

  2. <Docker学习>6. docker使用网络

    在容器中部署一个web应用,外部如何访问? 容器与容器间如何访问? 外部访问容器 容器可以运行一些网络应用,让外部也可以访问的话,需要进行服务器和容器的端口映射 -p 或者 -P -P默认会分配一个4 ...

  3. NOIP PJ游记

    Day -1 感觉自信满满,一等奖应该稳了,毕竟初一时我这么菜都拿了二等奖,然后就睡觉了... Day 1 在大巴上玩元气骑士可开心了,车上欢欢喜喜,到了考场,一眼看题,以为很简单. T1硬模拟... ...

  4. HDU 4405 Aeroplane chess(期望dp)

    Aeroplane chess Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  5. MySQL之查询性能优化(一)

    为什么查询速度会慢 通常来说,查询的生命周期大致可以按照顺序来看:从客户端,到服务器,然后在服务器上进行解析,生成执行计划,执行,并返回结果给客户端.其中“执行”可以认为是整个生命周期中最重要的阶段, ...

  6. 教你一步学会安装Hue

    一.简介 hue是一个开源的apache hadoop ui系统,由cloudear desktop演化而来,最后cloudera公司将其贡献给了apache基金会的hadoop社区,它基于pytho ...

  7. centos使用--防火墙

    目录 1 切换到zsh 1.1 查看系统当前的shell 1.2 查看bin下是否有zsh包 1.3 安装zsh包 1.4 切换shell至zsh 2 安装oh-my-zsh 2.1 oh-my-zs ...

  8. 《Cracking the Coding Interview》——第3章:栈和队列——题目7

    2014-03-19 03:20 题目:实现一个包含阿猫阿狗的先入先出队列,我要猫就给我一只来的最早的猫,要狗就给我一只来的最早的狗,随便要就给我一只来的最早的宠物.建议用链表实现. 解法:单链表可以 ...

  9. iOS笔记057 - UI总结03

    控制器的父子关系 1.控制器父子关系的建立原则        如果2个控制器的view是父子关系(不管是直接还是间接的父子关系),那么这2个控制器也应该为父子关系 [self.view addSubv ...

  10. spring 笔记3: Spring 多环境配置文件切换

    使用Spring进行开发时,需要面对不同的运行环境,比如开发环境.测试环境.生产环境等.大多时候不同的环境需要不同的配置文件.网上很多资料都是使用Spring的Bean definition prof ...