gulp入门

栏目: Node.js · 发布时间: 5年前

内容简介:安装编写

gulp

简介

  • 用自动化构建 工具 增强你的工作流程。
  • 通过代码优于配置的策略, Gulp 让简单的任务简单,复杂的任务可管理。
  • 利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。
  • Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
  • 通过最少的 API ,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。

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

demo

安装

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

编写 gulpfile.jsgulp 默认执行 gulpfile.js 文件

var gulp = require('gulp');

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

  cb()
})

gulp.src

读取需要处理的文件,以便进行后续的处理。

第一个参数:匹配模式字符串或字符串数组。 了解 Globs

第二个参数:可选,通过 glob-stream 所传递给 node-glob 的参数。

返回: Vinyl filesstream 。通过 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 ,他是一个可以 Bufferstream 相互装换的工具,下面是一个压缩图片的插件例子。

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 了解更多


以上所述就是小编给大家介绍的《gulp入门》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Using Google App Engine

Using Google App Engine

Charles Severance / O'Reilly Media / 2009-5-23 / USD 29.99

With this book, you can build exciting, scalable web applications quickly and confidently, using Google App Engine - even if you have little or no experience in programming or web development. App Eng......一起来看看 《Using Google App Engine》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

在线进制转换器
在线进制转换器

各进制数互转换器

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试