用户登录

🎉 8 周年订阅优惠

在我的项目里面,有一个 images 目录 ... 这里有三张图片 ... 01,02 都是 .jpg 格式的图片 ... 03 是一个 .png 格式的图片 .. 另外这个目录下面还有一个叫 icons 的目录,在这个目录的下面,还有几个小图标 ... 下面,我们去创建一个任务,把 images 目录里的文件复制到 dist 这个目录的下面 ...

打开项目的 gulpfile.js ... 先去创建一个任务 ... 用的是 gulp 的 task 方法 ... 先给任务起个名字... 这里我叫它 images ... 然后再用一个匿名函数 ... 在它里面,先用一个 return ... 然后再去读取要处理的文件 ... 用的是 gulp 的 src 方法 ... 指定一下要处理的文件 ... 输入 images/*.jpg ... 意思就是 images 这个目录里面的所有的 .jpg 格式的图片 .. 这个 * 号表示的就是任何东西 .. *.jpg 意思就是,不管图片的文件名是什么,只要它是 .jpg 格式的就行 ..

这个 src 方法里面指定的要读取的表示文件的东西,叫做 glob ... 我这里这个 glob 就是 images/*.jpg ..

后面接着再去处理这些文件,用一个 pipe ... 在这个管道里面,我们要做的就是把读取过来的这些文件复制到一个指定的位置 ... 用的是 gulp 的 dest 方法 ... 指定一下目标目录 ... 放到 dist 下面的 images 这个目录里面 ...

保存 ... 再去到命令行工具里执行一下这个任务 ... 输入 gulp images ... 回车 ...

完成以后,你会看到,在项目的 dist 这个目录里面,会创建一个叫 images 的目录 ... 在这个目录里面,有两张图片 ... 都是 .jpg 格式的图片 ... 它们都是从项目根目录下的 images 这个目录里面复制过来的 ...

在这个目录里面,这张 png 格式的图片,还有 icons 里面的小图标,并没有复制到 dist 下面的 images 目录里面 ... 因为我们写的 glob 只匹配 images 目录下的所有的 .jpg 格式的图片 ... 在下面的视频里我们再详细的介绍一下 glob 的写法。

复制多个文件《 Gulp 自动化任务 》

统计

11393
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点