实战gulp

来源:互联网 发布:淘宝网其他账户注册 编辑:程序博客网 时间:2024/06/05 07:56

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任务