快速学习Gulp并接入到项目中

[[416090]]

一、gulp定位

gulp是基于流(stream)的自动化构建工具。

目前创新互联已为近千家的企业提供了网站建设、域名、虚拟主机、网站托管、服务器租用、企业网站设计、吉安网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

二、初始化

如果之前已经全局安装了 gulp ，请通过运行以下命令来删除旧安装:

 
 
 
  
  
  npm rm --global gulp

然后通过以下命令安装独立的gulp-cli

 
 
 
  
  
  npm i --global gulp-cli

为什么废弃gulp，而改用gulp-cli?

想将cli和gulp进行解耦，处理只位于gulp-cli中。目的：

主要是想在减少安全安装包的大小。
与主包gulp分开，在不影响gulp-cli流程的情况下进行gulp的功能和bug修复
为后续的sips主题，以及向任务中添加自定义元数据和配置文件。

看一下安装的版本2.x

 
 
 
  
  
  gulp -v 
  
  
  CLI version: 2.3.0 
  
  
  Local version: Unknown

三、项目中使用gulp

进入到项目中，安装gulp

 
 
 
  
  
  npm i --save-dev gulp

执行gulp -v

 
 
 
  
  
  chengxinsong$ gulp -v 
  
  
  CLI version: 2.3.0 
  
  
  Local version: 4.0.2

在项目的根目录下创建gulpfile.js文件，在文件中输入以下内容：

 
 
 
  
  
  function defaultTask(cb) { 
  
  
    cb(); 
  
  
  } 
  
  
  exports.default = defaultTask;

四、gulp基本转化流程

找到src目录下的所有js文件
压缩这些js文件
将压缩js代码输出到dist/js目录下

 
 
 
  
  
  const gulp = require('gulp'); 
  
  
  const uglify = require('gulp-uglify'); 
  
  
  gulp.task('gulpSaucxs', function(done) { 
  
  
    gulp.src('src/*.js')   // dist与src在共同目录下 
  
  
    .pipe(uglify()) 
  
  
    .pipe(gulp.dest('dist/js'));   // 相对路径 
  
  
    done(); 
  
  
  })

上面代码中，task方法接收的是任务代码，接收的必须有回调函数，gulp.src()方法去找src目录下的js文件，.pipe是接收一个流的结果，并返回一个处理后流的结构，pipe方法中执行uglifg()方法用来压缩js代码。gulp.dest()方法输出到指定相对目录下。done()方法就是回调函数执行。

gulp.task('任务名'，回调函数)，任务名也是后续gulp 任务名，执行这个任务，回调函数中处理这个任务需要处理的代码。
src() 方法读取文件生成一个Node流(stream)，它将所有匹配的文件读取到内存中并通过流(stream)进行处理。
Node流(stream)所提供的主要API方法pipe()方法。
dest()方法接收一个输出目录作为参数，将文件内容以及文件属性写入到指定的目录中。

我们在src下新建一个index.js文件，我们来写最长递增子序列的方法。

 
 
 
  
  
  // 最长递增子序列 
  
  
  function lis(n) { 
  
  
    if (n.length === 0) return 0 
  
  
    // 创建一个和参数相同大小的数组，并填充值为 1 
  
  
    let array = new Array(n.length).fill(1) 
  
  
    // 从索引 1 开始遍历，因为数组已经所有都填充为 1 了 
  
  
    for (let i = 1; i < n.length; i++) { 
  
  
      for (let j = 0; j < i; j++) { 
  
  
        if (n[i] > n[j]) { 
  
  
          array[i] = Math.max(array[i], 1 + array[j]) 
  
  
        } 
  
  
      } 
  
  
    } 
  
  
    let res = 1 
  
  
    for (let i = 0; i < array.length; i++) { 
  
  
      res = Math.max(res, array[i]) 
  
  
    } 
  
  
    return res 
  
  
  }

输出的已经通过gulp处理的index.js的方法

我们在与gulpfile.js的同级目录下执行gulp task的名称

 
 
 
  
  
  gulp gulpSaucxs

gulp后面跟着的是任务的名称，不输入任务名称的话会默认找default任务，找不到会报错

然后在与src同级新增dist/js，然后生成压缩之后index.js文件。

五、逐渐废弃gulp.task()

官网说是这个task的API不再是推荐的模式。

那还是简单提2句，这个api伴随着开发而消失。

 
 
 
  
  
  gulp.task(name[, deps], fn)

name 为任务名
deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。

六、task任务

每个gulp任务task都是一个异步的js函数。接收一个回调函数作为参数，或者是一个返回 stream，promise，event emitter、child process 或 observable 类型值的函数。

我们继续改写上面 gulpSaucxs 的任务。

 
 
 
  
  
  const gulp = require('gulp'); 
  
  
  const uglify = require('gulp-uglify'); 
  
  
  function gulpSaucxs(done) { 
  
  
    gulp.src('src/*.js')   // dist与src在共同目录下 
  
  
    .pipe(uglify()) 
  
  
    .pipe(gulp.dest('dist/js'));   // 相对路径 
  
  
    done(); 
  
  
  } 
  
  
  exports.gulpSaucxs = gulpSaucxs;   // gulpSaucxs函数被exports导出是公开任务，可以直接被gulp命令直接调用。

导出的 gulpSaucxs 我们可以直接使用gulp命令来执行。

 
 
 
  
  
  gulp gulpSaucxs

输出跟最初是一致的。

导出任务

被gulpfile导出export的任务为公开任务，未被导出的任务会被认为是私有任务。

还是在刚才的代码中，我们新增privateTask方法和导出组合任务。

 
 
 
  
  
  const gulp = require('gulp'); 
  
  
  const uglify = require('gulp-uglify'); 
  
  
  function gulpSaucxs(done) { 
  
  
    gulp.src('src/*.js')   // dist与src在共同目录下 
  
  
    .pipe(uglify()) 
  
  
    .pipe(gulp.dest('dist/js'));   // 相对路径 
  
  
    done(); 
  
  
  } 
  
  
  // 新增的私有任务 
  
  
  function privateTask(done) { 
  
  
    console.log('hello 「松宝写代码」') 
  
  
  } 
  
  
  exports.gulpSaucxs = gulpSaucxs;   // gulpSaucxs函数被exports导出是公开任务，可以直接被gulp命令直接调用。 
  
  
  exports.composeTask = gulp.series(gulpSaucxs, privateTask);  // 导出组合任务

上面的代码中，privateTask 方法就是没有被直接导出的方法，称为私有任务;gulpSaucxs 方法是被导出的方法，称为公共任务。

私有任务的设计主要是为了内部的使用，通常作为gulp.series()和gulp.paralle()组合的组成部分。

这时候我们执行

 
 
 
  
  
  gulp composeTask

执行结果

 
 
 
  
  
  gulp-test chengxinsong$ gulp composeTask 
  
  
  [16:14:52] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
  
  
  [16:14:52] Starting 'composeTask'... 
  
  
  [16:14:52] Starting 'gulpSaucxs'... 
  
  
  [16:14:52] Finished 'gulpSaucxs' after 8.32 ms 
  
  
  [16:14:52] Starting 'privateTask'... 
  
  
  hello 「松宝写代码」 
  
  
  [16:14:52] Finished 'privateTask' after 1.21 ms 
  
  
  [16:14:52] Finished 'composeTask' after 12 ms

我们看日志，series方法是按照顺序执行，同步执行。

先启动公共任务 composeTask，
开启 gulpSaucxs 任务方法
完成 gulpSaucxs 任务方法
然后8.32毫秒之后
开启 privateTask 任务方法
输出 hello 「松宝写代码」
完成 privateTask 任务方法
然后1.21毫秒之后
完成公共任务 composeTask，

组合任务

gulp提供了2个强大的组合方法：series() 和 parallel()，允许将多个独立的任务组合为一个更强大的操作。

特点：

都可以接受任意数目的任务Task函数或者已经组合的操作
series()方法和parallel()方法可以相互嵌套任意深度

我们把上面的例子的series方法换成parallel。

 
 
 
  
  
  const gulp = require('gulp'); 
  
  
  const uglify = require('gulp-uglify'); 
  
  
  function gulpSaucxs(done) { 
  
  
    gulp.src('src/*.js')   // dist与src在共同目录下 
  
  
    .pipe(uglify()) 
  
  
    .pipe(gulp.dest('dist/js'));   // 相对路径 
  
  
    done(); 
  
  
  } 
  
  
  // 新增的私有任务 
  
  
  function privateTask(done) { 
  
  
    console.log('hello 「松宝写代码」'); 
  
  
    done(); 
  
  
  } 
  
  
  exports.gulpSaucxs = gulpSaucxs;   // gulpSaucxs函数被exports导出是公开任务，可以直接被gulp命令直接调用。 
  
  
  exports.composeTask = gulp.parallel(gulpSaucxs, privateTask);  // 导出组合任务，以最大的并发来运行

执行

 
 
 
  
  
  gulp cpmposeTask

执行结果

 
 
 
  
  
  chengxinsong$ gulp composeTask 
  
  
  [18:24:35] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
  
  
  [18:24:35] Starting 'composeTask'... 
  
  
  [18:24:35] Starting 'gulpSaucxs'... 
  
  
  [18:24:35] Starting 'privateTask'... 
  
  
  [18:24:35] Finished 'gulpSaucxs' after 8.24 ms 
  
  
  hello 「松宝写代码」 
  
  
  [18:24:35] Finished 'privateTask' after 9.71 ms 
  
  
  [18:24:35] Finished 'composeTask' after 12 ms

我们可以输出日志，可以知道parallel方法是并行的执行任务

先启动公共任务 composeTask，
开启 gulpSaucxs 任务方法
开启 privateTask 任务方法
完成 gulpSaucxs 任务方法
然后8.24毫秒之后
输出 hello 「松宝写代码」
完成 privateTask 任务方法
然后9.71毫秒之后
完成公共任务 composeTask

七、异步执行

当从任务(task)中返回 stream、promise、event emitter、child process 或 observable 时，成功或错误值将通知 gulp 是否继续执行或结束。如果任务(task)出错，gulp 将立即结束执行并显示该错误。

1、返回stream流

 
 
 
  
  
  const gulp = require('gulp'); 
  
  
  const uglify = require('gulp-uglify'); 
  
  
  function streamTask(done) { 
  
  
    return gulp.src('src/*.js') 
  
  
    .pipe(uglify()) 
  
  
    .pipe(gulp.dest('dist/js')); 
  
  
    done(); 
  
  
  } 
  
  
  exports.streamTask = streamTask;

输出：dist/js/index.js

2、返回promise

看一个返回promise的例子。

 
 
 
  
  
  const gulp = require('gulp'); 
  
  
  function promiseTask(done) { 
  
  
    Promise.resolve('返回的值'); 
  
  
    done(); 
  
  
  } 
  
  
  exports.promiseTask = promiseTask;

输出：

 
 
 
  
  
  chengxinsong$ gulp promiseTask 
  
  
  [19:20:37] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
  
  
  [19:20:37] Starting 'promiseTask'... 
  
  
  [19:20:37] Finished 'promiseTask' after 1.55 ms 
  
  
  返回的值 「松宝写代码」公众号

3、返回 eventEmitter 事件发射器

看一个返回 eventEmitter 的例子。

 
 
 
  
  
  // 返回event emitter 
  
  
  const { EventEmitter } = require('events'); 
  
  
  function eventEmitterTask(done) { 
  
  
    const emitter = new EventEmitter(); 
  
  
    setTimeout(() => { 
  
  
      emitter.emit('data') 
  
  
      console.log(emitter, '松宝写代码') 
  
  
    }, 500); 
  
  
    done(); 
  
  
  } 
  
  
  exports.eventEmitterTask = eventEmitterTask;

执行 gulp eventEmitterTask，结果如下：

 
 
 
  
  
  chengxinsong$ gulp eventEmitterTask 
  
  
  [21:42:26] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
  
  
  [21:42:26] Starting 'eventEmitterTask'... 
  
  
  [21:42:26] Finished 'eventEmitterTask' after 1.77 ms 
  
  
  EventEmitter { 
  
  
    _events: [Object: null prototype] {}, 
  
  
    _eventsCount: 0, 
  
  
    _maxListeners: undefined, 
  
  
    [Symbol(kCapture)]: false 
  
  
  } 松宝写代码

4、返回 child process 子进程

看一个返回 childProcess 的例子。

 
 
 
  
  
  // 返回child_process 子进程 
  
  
  const { exec } = require('child_process'); 
  
  
  function childProcessTask(done) { 
  
  
    exec('data'); 
  
  
    console.log('松宝写代码') 
  
  
    done(); 
  
  
  } 
  
  
  exports.childProcessTask = childProcessTask;

执行 gulp childProcessTask ，结果如下：

 
 
 
  
  
  chengxinsong$ gulp childProcessTask 
  
  
  [21:48:32] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
  
  
  [21:48:32] Starting 'childProcessTask'... 
  
  
  松宝写代码 
  
  
  [21:48:32] Finished 'childProcessTask' after 7.02 ms

5、返回 RxJS observable 观察对象

看一个返回 observable 的例子。

 
 
 
  
  
  // 返回 observable 观察对象 
  
  
  const Observable = require('rx').Observable; 
  
  
  function observableTask(done) { 
  
  
    Observable.return('松宝写代码'); 
  
  
    console.log('松宝写代码') 
  
  
    done(); 
  
  
  } 
  
  
  exports.observableTask = observableTask;

执行 gulp observableTask ，结果如下：

 
 
 
  
  
  chengxinsong$ gulp observableTask 
  
  
  [21:53:14] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
  
  
  [21:53:14] Starting 'observableTask'... 
  
  
  松宝写代码 
  
  
  [21:53:14] Finished 'observableTask' after 2.28 ms

6、使用 callback 回调函数

看一个使用 callback 回调函数的例子。

如果任务(task)不返回任何内容，则必须使用 callback 来指示任务已完成。

如需通过 callback 把任务(task)中的错误告知 gulp，将 Error 作为 callback 的参数。

 
 
 
  
  
  // 返回 callback 回调函数 
  
  
  function callbackTask(done) { 
  
  
    console.log('松宝写代码') 
  
  
    done(new Error('抛出错误了')); 
  
  
  } 
  
  
  exports.callbackTask = callbackTask;

执行 gulp callbackTask 结果

 
 
 
  
  
  chengxinsong$ gulp callbackTask 
  
  
  [21:58:22] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
  
  
  [21:58:22] Starting 'callbackTask'... 
  
  
  松宝写代码 
  
  
  [21:58:22] 'callbackTask' errored after 2.09 ms 
  
  
  [21:58:22] Error: 抛出错误了 
  
  
      at callbackTask

7、使用 async/await

看一个使用 async/await 异步函数的例子。

可以将任务(task)定义为一个 async 函数，它将利用 promise 对你的任务(task)进行包装。这将允许你使用 await 处理 promise，并使用其他同步代码。

 
 
 
  
  
  // 使用 async/await 回调函数 
  
  
  const fs = require('fs'); 
  
  
  async function asyncTask(done) { 
  
  
    const { version } = fs.readFileSync('package.json'); 
  
  
    console.log(version, 'version=====') 
  
  
    const data = await Promise.resolve('松宝写代码'); 
  
  
    console.log(data, '松宝写代码=========') 
  
  
    done(); 
  
  
  } 
  
  
  exports.asyncTask = asyncTask;

执行 gulp asyncTask 结果

 
 
 
  
  
  chengxinsong$ gulp asyncTask 
  
  
  [22:26:06] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
  
  
  [22:26:06] Starting 'asyncTask'... 
  
  
  undefined version===== 
  
  
  松宝写代码 松宝写代码========= 
  
  
  [22:26:06] Finished 'asyncTask' after 2.02 ms

八、我们来看一个实例

比如我们需要

首先清空dist目录，使用series处理
然后压缩css和压缩js 并行进行处理，使用parallel处理
输出到dist/js和dist/css

 
 
 
  
  
  // 实例 
  
  
  const minifycss = require('gulp-minify-css'); //压缩css 
  
  
  const del = require('del'); // 删除目录 
  
  
  // 清空目录 
  
  
  function clean(done) { 
  
  
    del(['dist/**']); 
  
  
    done(); 
  
  
  } 
  
  
  // 压缩css 
  
  
  function minifyCss(done) { 
  
  
    gulp.src('src/*.css') 
  
  
    .pipe(minifycss()) 
  
  
    .pipe(gulp.dest('dist/css')); 
  
  
    done() 
  
  
  } 
  
  
  // 压缩js 
  
  
  function uglifyJs(done) { 
  
  
    gulp.src('src/*.js') 
  
  
    .pipe(uglify()) 
  
  
    .pipe(gulp.dest('dist/js')); 
  
  
    done(); 
  
  
  } 
  
  
  exports.exampleGulpTask = gulp.series(clean, gulp.parallel(minifyCss, uglifyJs));   // 执行顺序 clean => 并行执行 css js 压缩

网站栏目：快速学习Gulp并接入到项目中
文章转载：http://www.shufengxianlan.com/qtweb/news14/143164.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容