gulp技巧总结
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技巧总结的更多相关文章
- gulp 技巧
install npm install --save-dev jshint gulp-jshint 压缩js npm install --save-dev gulp-minify-css xxCSS ...
- gulp的使用介绍及技巧
gulp的使用介绍及技巧 转载: https://www.cnblogs.com/2050/p/4198792.html 1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安 ...
- gulp使用技巧-删除node_modules文件夹,解决目录层次太深删除报错的问题
问题描述: 在使用gulp当中,自动生成的node_modules文件夹,因为文件目录层级太深,无法系统删除,用360粉碎工具也报错 解决方法: 使用npm中的插件rimraf,专门用于删除的模块插件 ...
- Gulp插件使用技巧
目录: 插件的安装卸载 插件使用的基本流程 拆分任务 监听 默认任务 一.插件的安装卸载 安装: npm install gulp-less --save-dev 卸载 npm uninstall g ...
- 前端网络、JavaScript优化以及开发小技巧
一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...
- WebStorm 常用功能的使用技巧分享
WebStorm 是 JetBrain 公司开发的一款 JavaScript IDE,使用非常方便,可以使编写代码过程更加流畅. 本文在这里分享一些常用功能的使用技巧,希望能帮助大家更好的使用这款强大 ...
- 前端打包构建工具gulp快速入门
因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话确实是个问题,尤其项目大了以后,目前位置遇到的项目都还可以忍受.不过不 ...
- (转)gulp使用
前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nod ...
- gulp使用小结(二)
接上篇文章接Gulp使用小结(一) 内容如下: 首先,偶在gulp-demos上已经提交了个较通用的栗子...俺琢磨半天,原准备分阶段搞些 Gulp 套路,但是写完介个栗子之后,觉得已经能覆盖绝大多数 ...
随机推荐
- 《JSON笔记之二》----封装JSONUtil
许多java开发人员对于fastjson再也熟悉不过了,这是alibaba开源的依赖,使用fastjson可以使我们很容易的把请求json串转换成为我们所需要的对象.list.map等对象格式,对于开 ...
- fastadmin 后台管理框架使用技巧(持续更新中)
fastadmin 后台管理框架使用技巧(持续更新中) FastAdmin是一款基于ThinkPHP5+Bootstrap的极速后台开发框架,具体介绍,请查看文档,文档地址为:https://doc. ...
- css 菱形写法
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- PTA 7-12(图) 社交网络图中结点的“重要性”计算 最短路
7-12(图) 社交网络图中结点的“重要性”计算 (30 分) 在社交网络中,个人或单位(结点)之间通过某些关系(边)联系起来.他们受到这些关系的影响,这种影响可以理解为网络中相互连接的结点之间蔓延的 ...
- Git Pro Book
目录 2nd Edition (2014) Switch to 1st Edition Download Ebook The entire Pro Git book, written by Scott ...
- Android stadio 插件推荐--ok gradle
今天发现了一个好玩的插件,对于想要知道依赖怎么写的同学很有帮助. 写这篇文章的意义在于,以后我忘了的话,可以自己在博客中找到. 上地址: https://github.com/scana/ok-gra ...
- Android Studio自定义模板代码
http://blog.csdn.net/h183288132/article/details/51916399 生成模板看上面这个博客就可以了,不再重复制造轮子. 不过需要补充的是: 还应该有下面的 ...
- [转]全图形PPT设计指南
三.什么时候使用 全图形PPT并不适用于所有时候,一般来说,我们在以下场合可以考虑使用:陈述一个故事.名人简介.产品介绍.读书笔记.心灵鸡汤.生活情趣等. 四.如何制作全图形PPT 全图形PPT的制作 ...
- 设置虚拟wifi,手机和电脑可以连接
在家里没有wifi,笔记本电脑又是宽带连接,有时候手机流量用得很快,于是网上找了一下设置虚拟wifi 方法. 1.首先你的电脑上要有无线网卡,并且无线网上一定要是开户的,一般默认的都开启,如果没有开启 ...
- HTTP协议中POST方法和GET方法有那些区别?
GET用于向服务器请求数据,POST用于提交数据 GET请求,请求参数拼接形式暴露在地址栏,而POST请求参数则放在请求体里面,因此GET请求不适合用于验证密码等操作 GET请求的URL有长度限制1k ...