gulp入门

2023年4月8日 180次阅读 来源: 广州芦苇科技前端

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://segmentfault.com/a/1190000017907953
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞