走进gulp4的世界

更多内容欢迎来到博客 :https://imjianjian.github.io

gulp简介

  • 自动化 - gulp是一个工具包,可帮助您在开发工作流程中自动执行痛苦或耗时的任务。
  • 与平台无关 - 集成被集成到所有主流IDE中,人们正在使用PHP,.NET,Node.js,Java和其他平台。
  • 强大的生态系统 - 使用npm模块做任何你想要的,拥有超过2000个插件进行流文件转换。
  • 简单 - 仅提供最少的API,易于学习和使用简单。
    用gulp对自己的描述就是:Automate and enhance your workflow。

安装

要使用gulp要保证你的电脑上要有node环境

官方建议你这么安装它

//全局安装gulp命令行
$ npm install gulp-cli -g

//gulp4.0
$ npm install gulp@next -D

//gulp3.9.1
$ npm install gulp -D 

//创建gulpfile.js文件
$ touch gulpfile.js
$ gulp --help

更新

  • 新的任务系统(基于 bach,替换掉了原先基于 orchestrator 的任务系统)
  • 移除 gulp.reset
  • gulp.task 不再支持三个参数的用法
  • gulp.task 用字符串注册的任务必须是直接在命令行中调用的任务
  • gulp.task 可以接受单参数语法,这个参数必须是一个命名函数,函数名会被作为任务名
  • 添加了 gulp.series 和 gulp.parallel 方法用于组合任务
  • 添加了 gulp.tree 方法用于获取任务树,传入 { deep: true } 参数可以得到一个 archy 兼容的节点列表
  • 添加了 gulp.registry 方法以定制注册表。
  • 添加了 gulp.symlink 方法,功能和 gulp.dest 一致,不过是以软链接的方式
  • gulp.dest 和 gulp.symlink 方法添加了 dirMode 参数允许对目标目录更好地控制
  • gulp.src 接收的文件匹配字符串会顺序解释,所以你可以写成这样 gulp.src([‘.js’, ‘!b.js’, ‘bad.js’])(排除所有以 b 开头的 JS 文件但是除了 bad.js)
  • gulp.src 方法添加了 since 选项,筛选在特定时间点之后修改过的文件(用于增量编译)
  • 将命令行分离出来成为一个独立模块,以便节约带宽/空间。用 npm install gulp -g 或 npm install gulp-cli -g 都可以安装命令行,只是 gulp-cli 不包含模块代码所以比较小
  • 命令行添加了 –tasks-json 参数,可以导出整个任务树以供他用
  • 命令行添加了 –verify 参数用以检查 package.json 中是否包含黑名单插件(违背准则而被禁入官方插件列表的可怜娃们)。

API

gulp4在gulp3的基础上新增了几个函数,但它的使用依旧简单方便。一共如下10个:
- gulp.src() –全局匹配一个或多个文件
- gulp.dest() –将文件写入目录
- gulp.symlink() –与dest相似,但是使用软连接形式
- gulp.task() –定义任务
- gulp.lastRun() –获得上次成功运行的时间戳
- gulp.parallel() –并行运行任务
- gulp.series() –运行任务序列
- gulp.watch() –当文件发生变化时做某些操作
- gulp.tree() –获得任务书树
- gulp.registry() –获得或注册任务

官方说明API说明:https://github.com/gulpjs/gulp/blob/master/docs/API.md

task(parallel and series)

gulp4不再能够通过数组形式传入任务,你需要使用gulp.series()和gulp.parallel()来执行他们。例如:

gulp.task('default',gulp.parallel('taskA','taskB'));//并行执行
gulp.task('default',gulp.series('taskA','taskB'));//按顺序执行

parallel和series函数可以接受函数作为参数,这意味着我们可以将任务用独立函数表示:

funcion taskA(){...}
funcion taskB(){...}

gulp.task(taskA);//最简单的方式
gulp.task('i-am-taskB',taskB);//为taskB添加任务名
gulp.task('taskA-taskB', gulp.series(taskA, taskB));//序列执行
gulp.task('taskA-taskB', gulp.parallel(taskA,taskB));//并行运行

而且当我们执行序列化任务时,面板的输出也更加清晰

PS D:\github\resume> gulp
[21:49:59] Using gulpfile D:\project\gulpfile.js
[21:49:59] Starting 'default'...
[21:49:59] Starting 'copyfile'...
[21:49:59] Finished 'copyfile' after 90 ms
[21:49:59] Starting 'minifyhtml'...
[21:49:59] Finished 'minifyhtml' after 171 ms
[21:49:59] Starting 'minifyCSS'...
[21:50:00] Finished 'minifyCSS' after 353 ms
[21:50:00] Starting 'uglyfyJS'...
[21:50:01] Finished 'uglyfyJS' after 1.43 s
[21:50:01] Finished 'default' after 2.05 s

gulp.lastRun()

语法:
gulp.lastRun(taskName,timeResolution)
参数:
taskName:任务名
timeResolution(可选):返回的时间戳的精度

例如

gulp.lastRun('someTask', 1000) // 1426000004000.
gulp.lastRun('someTask', 100) // 1426000004300.

gulp.tree()

语法:
gulp.tree(option)
options:
{
    deep:true/false //是否遍历每个子任务
}

示例gulpfile.js

gulp.task('one', function(done) {
  // do stuff
  done();
});

gulp.task('two', function(done) {
  // do stuff
  done();
});

gulp.task('three', function(done) {
  // do stuff
  done();
});

gulp.task('four', gulp.series('one', 'two'));

gulp.task('five',
  gulp.series('four',
    gulp.parallel('three', function(done) {
      // do more stuff
      done();
    })
  )
);

实例输出

gulp.tree()

// output: [ 'one', 'two', 'three', 'four', 'five' ]

gulp.tree({ deep: true })

/*output: [
   {
      "label":"one",
      "type":"task",
      "nodes":[]
   },
   {
      "label":"two",
      "type":"task",
      "nodes":[]
   },
   {
      "label":"three",
      "type":"task",
      "nodes":[]
   },
   {
      "label":"four",
      "type":"task",
      "nodes":[
          {
            "label":"<series>",
            "type":"function",
            "nodes":[
               {
                  "label":"one",
                  "type":"task",
                  "nodes":[]
               },
               {
                  "label":"two",
                  "type":"task",
                  "nodes":[]
               }
            ]
         }
      ]
   },
   {
      "label":"five",
      "type":"task",
      "nodes":[
         {
            "label":"<series>",
            "type":"function",
            "nodes":[
               {
                  "label":"four",
                  "type":"task",
                  "nodes":[
                     {
                        "label":"<series>",
                        "type":"function",
                        "nodes":[
                           {
                              "label":"one",
                              "type":"task",
                              "nodes":[]
                           },
                           {
                              "label":"two",
                              "type":"task",
                              "nodes":[]
                           }
                        ]
                     }
                  ]
               },
               {
                  "label":"<parallel>",
                  "type":"function",
                  "nodes":[
                     {
                        "label":"three",
                        "type":"task",
                        "nodes":[]
                     },
                     {
                        "label":"<anonymous>",
                        "type":"function",
                        "nodes":[]
                     }
                  ]
               }
            ]
         }
      ]
   }
]
*/

gulp-load-plugins

这是一个用于自动加载插件的gulp插件,安装如下:

npm install gulp-load-plugins -D

当一个项目需要很多插件来管理的时候,你的gulpfile.js可能会变成这样:

var gulp = require('gulp'),
    a = require('gulp-a'), 
    b = require('gulp-b'),
    c = require('gulp-c'),
    ...
    ...
    z = require('gulp-z');  

使用gulp-load-plugins可以让你少写一些重复代码,你可以这样使用:

var gulp = require('gulp');
//加载gulp-load-plugins插件,并马上运行它
var plugins = require('gulp-load-plugins')();
//或是:
//var gulpLoadPlugins = require('gulp-load-plugins');
//var plugins = gulpLoadPlugins();

调用插件

plugins.clone() //等价于require('gulp-clone')();

实质上是gulp帮助我们做了如下操作

plugins.clone= require(‘gulp-clone’); 
  • 1
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论

打赏作者

我是渐渐

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值