gulp入门

kycool 发布于2019-08-23 14:44 / 3392人阅读

摘要：通过输入文件流，将文件写入硬盘，并输出所有数据，能继续向下游，所以文件流可以继续被处理并被写入到其他地方。如果写入文件夹不存在，就会创建它。第二个参数，当前任务依赖的任务列表，依赖任务在当前任务运行之前完成。

gulp 简介

用自动化构建工具增强你的工作流程。

通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。

利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

gulp和webpack都是前端著名的构建工具，通过一定的配置，几乎能实现一模一样的功能，但是gulp在使用上与webpack不同的点是，gulp要实现什么功能是以写脚本的方式自定义，而webpack以配置文件的方式，个人觉得通过gulp提供的方式自定义工作流更容易实现，也更透明，自己写插件也能方便的理清楚插件什么时候被调用，需要接收和输出什么东西。所以即使你会了webpack，学习gulp也是非常有必要的。

demo

安装

npm i -g gulp-cli
npm i -D gulp

编写gulpfile.js，gulp默认执行gulpfile.js文件

var gulp = require("gulp");

gulp.task("default", function (cb) {
  console.log("task default")

  cb()
})

gulp.src

读取需要处理的文件，以便进行后续的处理。
第一个参数：匹配模式字符串或字符串数组。了解 Globs
第二个参数：可选，通过glob-stream所传递给node-glob的参数。
返回：Vinyl files 的 stream。通过pipe(..)将文件流向后续插件传输。

gulp.dest

通过pipe(..)输入文件流，将文件写入硬盘，并输出所有数据，能继续向下游pipe，所以文件流可以继续被处理并被写入到其他地方。如果写入文件夹不存在，就会创建它。
第一个参数：文件被写入的路径
第二个参数：option.mode 默认0777 八进制权限字符串，定义输出目录中创建的目录的权限；

        `option.cwd` 输出目录的 `cwd` 参数，只在所给的输出目录是相对路径时候有效。

gulp.src("src/*.js") // 读取src文件夹下的所有.jpg文件
  .pipe(imagemin()) // 将所有文件用imagemin处理
  .pipe(gulp.dest("dist")) // 将处理到这一步的文件写入dist文件夹
  .pipe(minify()) // 将文件流用minify处理
  .pipe(gulp.dest("code")) // 将处理后的文件写入code文件夹

gulp.task

定义一个任务
第一个参数：任务的名字，如果你定义的任务需要在命令行中启动，那就不要使用空格。
第二个参数：Array，当前任务依赖的任务列表，依赖任务在当前任务运行之前完成。（gulp4已经去除）
第三个参数：fn，函数中定义任务需要执行的一些操作。

第三个参数fn可以接受一个参数，该参数接收一个callback，在函数中调用callback可以标识该任务是否执行完成。
返回一个stream或者promise，也有类似的作用。
gulp中实现任务依赖（任务并行或串行）的方法

gulp.task("one", function (cb) {
  setTimeout(() => {
    console.log(1)
    cb()
  }, 1000)
})

gulp.task("two", function (cb) {
  console.log(2)
  cb()
})

// 老版本序列化任务的方式
gulp.task("default", ["one"], function(cb){
  console.log("over")
  cb()
})

// gulp4实现串行任务的方式
gulp.task("default", gulp.series("one", "two", function(cb){
  console.log("over")
  cb()
}))
// gulp4实现并行任务的方式
gulp.task("default", gulp.parallel("one", "two", function(cb){
  console.log("over")
  cb()
}))

gulp.watch

监控文件的变化，执行相应的任务
第一个参数：要监视的glob（也可以理解成文件或文件夹）。
第二个参数：options
第三个参数：要执行的具体任务内容

gulp.watch("img", gulp.series("string"))

编写插件

从gulp的用时方法不难看出，gulp插件接收stream，处理后返回stream，但是在插件中可能使用到其他工具，其中处理文件的数据类型可能是Buffer，所以我们经常在写插件时用到throungh，他是一个可以Buffer和stream相互装换的工具，下面是一个压缩图片的插件例子。
images库是一个能处理图片的nodejs库，但是他的提供的api处理单张图片，将他封装成gulp插件，将他赋予批量处理图片的能力，并且能和其他处理工具一起使用，方便的实现一个工作流，比如将一个文件夹中的图片压缩后，在将其打包成一个压缩包。

var through = require("through2"); // Buffer和stream装换库
const images = require("images"); // 图片处理库

// 插件级别的函数（处理文件
function gulpPrefixer(options) {
  const {
    size
  } = options

  var stream = through.obj(function(file, enc, cb) {
    if (file.isBuffer()) {
      
      file.contents = images(file.contents)
        .size(size)
        .encode("png")
    }

    // 确保文件进入下一个 gulp 插件
    this.push(file);

    // 告诉 stream 引擎，我们已经处理完了这个文件
    cb();
  });

  // 返回文件 stream
  return stream;
};

// 导出插件主函数
module.exports = gulpPrefixer;

作者简介：叶茂，芦苇科技web前端开发工程师，代表作品：口红挑战网红小游戏、芦苇科技官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专注于前端框架、服务端渲染、SEO技术、交互设计、图像绘制、数据分析等研究。

欢迎和我们一起并肩作战： web@talkmoney.cn
访问 www.talkmoney.cn 了解更多

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101070.html

简简单单学习gulp的入门与使用

摘要：的使用首先，我们需要在官网下载插件，地址如下在这个网站我们可以寻找到自己需要的插件以为例，然后在项目下打开命令提示行，输入以下命令然后我们在里输入一下代码引入插件调用插件输出位置 gulp的入门与使用安装使用 gulp的入门安装安装gulp需要使用到nodo.js,安装链接如下：http://jingyan.baidu.com/arti... 安装完成之后我们以全局安装gu...

meteor199 2019-08-22 10:54 评论0 收藏0
gulp 入门配置

摘要：使用进行本地开发自动刷新，配合对和进行压缩处理，最终打包到目录安装以及其他插件代码示例安装依赖本地安装所用到的地方同步执行任务获取组件是否开启浏览器提示端口监听目录下所有文件清楚目录下所有文件定使用 browser-sync 进行本地开发自动刷新，配合gulp-uglify、gulp-minify-css对js和css进行压缩处理，最终打包到dist目录安装gulp 以及其他插件 ...

AlienZHOU 2019-08-20 18:36 评论0 收藏0
20分钟gulp快速入门

摘要：所以出现了各种前端构建化工具也应运而生等已经成为现在前端开发工程师的必备技能之一。结语今天的分享就告一段落啦希望能对大家有所帮助。在互联网告诉发展的今天，自node出现后，我们前端也越来越大（心里美美哒~），同样带来的Web业务日益复杂化和多元化，模式也都想webPage模式转向webApp模式，拼几个页面搞几个jquery的插件就能搞一个完成一个项目的日子已经是很久远的曾经了，而且...

RichardXG 2019-08-22 15:06 评论0 收藏0
Glup快速入门整理

摘要：下载打包插件引入引入的插件是个方法，必须记住调用。神来之笔其他的插件不用再引入了使用方法所有的插件用引出，其他插件的方法名统一为插件的功能名字即插件名字的最后一部分如将转换为将转换为的文件输出到下实时刷新 Gulp介绍中文主页: http://www.gulpjs.com.cn/ gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器能自动化...

HmyBmny 2019-08-20 18:12 评论0 收藏0
Glup快速入门整理

摘要：下载打包插件引入引入的插件是个方法，必须记住调用。神来之笔其他的插件不用再引入了使用方法所有的插件用引出，其他插件的方法名统一为插件的功能名字即插件名字的最后一部分如将转换为将转换为的文件输出到下实时刷新 Gulp介绍中文主页: http://www.gulpjs.com.cn/ gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器能自动化...

jhhfft 2019-08-29 12:58 评论0 收藏0