前一节回顾
1.安装了gulp这个工具
2.在gulpfile.js里面编写了第一个任务(task)
现在我们来设计一个需求,在需求中继续学习
知识点:
1.了解什么是管道
2.测试src、pipe、dest函数
做项目的痛
项目做到后面,文件存放越来越乱。这页是在项目初期很正常的,尤其是参差不齐的队伍参与进来后。
比如我们经常碰到,队友在项目目录下随便编写JS文件。
那么作为项目组长,往往我们要“归类”
然而,手工拷贝?太low了
gulp.src([文件1,文件2,文件3])
,用来”收集”源文件来形成“虚拟文件对象流”。(术语听不懂没关系,没必要立刻懂)
然后通过“管道”函数pipe
传给它另外一个写文件的函数dest
。
利用管道
如果我们要在某个文件中根据关键词查询,那么2个命令就可以通过管道(pipe)的方式组合使用。
管道符“|”
比如 cat 文件名 | grep 关键词
示例,有一个1.js
var name = "zhangsan";
我们到终端执行
gulp里面管道的用法
gulp.src([‘1.js’,’2.js’]).pipe(gulp.desc(‘文件名’))
还能用通配符
gulp.src([‘*.js’,’!2,js’]).pipe(gulp.desc(‘文件名’))
!是排除的意思
实验:
1.编辑gulpfile.js
var gp = require('gulp');
gp.task("taskName",function(){
gp.src(['1.js','2.js']).pipe(gp.dest('./dest'));
})
2.终端执行 gulp taskName
然后我们发现项目根目录下多了dest目录
说明gulp帮我们创建的dest目录,并把1.js和2.js给复制进去了。
以后我们就可以这样来归类我们的文件啦
gp.src(['*.js']).pipe(gp.dest('./dest/js'));
gp.src(['*.css']).pipe(gp.dest('./dest/css'));