Gulp初探

Grunt

 2018/06/30 

概述

Gulp 是基于 NodeJS 的自动任务运行器，它可以自动化地完成测试、合并、压缩、格式化、生成文件、监听文件等任务

相比于 Grunt 的频繁 IO 操作，Gulp 的流操作更快，Gulp 还借鉴了 Unix 的管道(pipe)思想，前一级的输出直接变成后一级的输入

前提准备

在项目下安装gulp和需要使用的插件，比如下例中使用的 gulp-less 和 gulp-livereload

配置文件 gulpfile.js

// 引入插件
var gulp = require("gulp"),
  less = require("gulp-less"),
  livereload = require("gulp-livereload");

// testless 自定义任务名称
gulp.task("testless", function() {
  gulp
    .src("src/less/*.less") // 来源文件
    // .pipe(sourcemaps.init()) // 如果在编译less的同时执行其他操作，有可能引起页面刷新而不是将样式植入页面
    .pipe(less()) // 调用插件
    // .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest("src/css")) // 在 src/css 目录下生成 css 文件
    .pipe(livereload()); // 热重载
});

gulp.task("watch", function() {
  livereload.listen();
  gulp.watch("src/less/**/*.less", ["testless"]);
});

gulp.task("default", ["watch"]); // 默认执行任务
// gulp.task(name[, deps], fn) 定义任务 name: 任务名称 deps: 依赖任务名称 fn: 回调函数
// gulp.src(globs[, options]) 来源文件 globs: 处理的文件路径，字符串或字符串数组
// gulp.dest(path[， options]) 生成文件

运行 gulp

gulp watch(gulp也会执行 default 任务，即 watch)

创建插件

编写插件内容

先用npm init创建package.json，然后在入口建立 main 所对应的 js 文件

// 引入插件需要的包
var through = require("through2");

// 定义gulp插件主函数
// prefix_text: 调用插件传入的参数
module.exports = function gulp_prefix(prefix_text) {
  if (!prefix_text) {
    prefix_text = "";
  }
  var prefix = new Buffer(prefix_text);

  // 创建stream对象，每个文件都会经过这个stream对象
  var stream = through.obj(function(file, encoding, callback) {
    // 文件经过stream时要执行的代码
    // 如果file类型不对则退出不作处理
    if (!file.isBuffer()) {
      return callback();
    }

    // 将字符串加到文件数据开头
    file.contents = Buffer.concat([prefix, file.contents]);

    // 确保文件会传给下一个插件
    this.push(file);

    // 告诉stream引擎，已经处理完成
    callback();
  });

  // 返回stream对象
  return stream;
};

through.obj传入的参数会覆盖stream._transform函数，file:文件数据，encoding:编码方式，callback(error,data)回调函数

使用插件

在要使用该插件的项目里编写gulpfile.js

var gulp = require("gulp"),
  prefix = require("gulp-prefix");

gulp.task("default", function() {
  gulp
    .src("src/*.js")
    .pipe(prefix("prefix data"))
    .pipe(gulp.dest("js"));
});

运行gulp就 ok 啦

原文作者：Yizhou Shen

原文链接：http://shenyizhou.github.io/2018/06/30/2018-6-30-Gulp%E5%88%9D%E6%8E%A2/

发表日期：June 30th 2018, 11:58:36 am

更新日期：September 6th 2023, 3:04:23 pm

Next Post

Node初探
Previous Post

Grunt初探

CATALOG

1. 概述
2. 前提准备
3. 配置文件 gulpfile.js
4. 运行 gulp
5. 创建插件
1. 5.1. 编写插件内容
2. 5.2. 使用插件