实战gulp

本文介绍Gulp的基础概念及其在项目中的应用,包括任务定义、文件处理流程等关键操作。

gulp的核心概念是流(stream),node中类似概念更多,此处不展开。

首先安装npm包,并且引入gulp

const gulp = require('gulp')

我们可以使用gulp.task()来定义一个任务:

gulp.task('blue:images', () => {
  return gulp.src('client/assets/images/**')
    .pipe(gulp.dest('client/themes/blue/assets/images'))
})

以上是项目中gulp文件中的一个简单任务,分四小点:
1. gulp.task() —— 用于定义一个任务,由任务名和回调函数组成,回调函数定义了所需的操作,比如上面这段代码就是将images文件夹下的所有文件统一复制到了另一个文件夹中
2. gulp.src()—— 匹配符合匹配模式(可以为数组)的所有文件,返回一个stream使这些文件可以被pipe到其他插件中
3. .pipe() —— 将流(stream)形式的文件导入到其他符合匹配模式的插件中
4. gulp.dest()能被 pipe 进来,写文件,并且重新输出(emits)所有数据,因此你可以级联pipe,比如

gulp.src().pipe().pipe(gulp.dest()).pipe()

gulp也可以选择任务执行顺序,比如以下代码就是先执行A,B任务,再执行C:

gulp.task('C', ['A', 'B'], () => {
  return gulp.src('client/themes/blue/_assets/**')
    .pipe(gulp.dest('client/themes/blue/assets'))
})

利用这个特性可以起任务别名,不给出当前任务回调而只给出先执行的任务:

gulp.task('C', ['A', 'B'])

此时执行C就是执行AB任务

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值