Automated Build tools part 1: Getting started with Gulp

preface

Gulp is a very popular and powerful automated build tool. It can automate repetitive tasks in the development process and improve our development efficiency.

Based on using

Gulp defines the tasks that need to be repeated in our development process.

yarn init --yesCreate a Node project.
yarn add gulp --devInstallation and development rely on GULp.
code gulpfile.js. Create one in vscode IDEgulpfile.jsFile and edit. This file is the gulP entry file. As follows:

// Create a task foo
exports.foo = (done) = > {
  console.log("foo task working...");
  done(); // Indicate that the task is complete
};

// The task named default is executed by default
exports.default = (done) = > {
  console.log("default task working...");
  done();
};
Copy the code

Perform a task

yarn gulp foo: Executes the foo task
yarn gulp: The default task name is executeddefaultThe task of

Combination of task

Composite tasks allow us to control the serial and concurrent execution of a set of tasks. The series and Parallel apis are used primarily.

const { series, parallel } = require("gulp");

const task1 = (done) = > {
  setTimeout(() = > {
    console.log("task1 working...");
    done();
  }, 1000);
};

const task2 = (done) = > {
  setTimeout(() = > {
    console.log("task2 working...");
    done();
  }, 1000);
};

const task3 = (done) = > {
  setTimeout(() = > {
    console.log("task3 working...");
    done();
  }, 1000);
};

/ / serial
exports.foo = series(task1, task2, task3);

/ / parallel
exports.bar = parallel(task1, task2, task3);
Copy the code

Serial execution: yarn gulp foo
Parallel execution: yarn gulp bar

Asynchronous tasks

The core idea of handling asynchronous tasks is that you need to tell gulp when the current task ends. In gulp, it can be called by done callbacks, and asynchronous tasks can be implemented by returning promises, streams, and other objects in methods.

Done callback mode

exports.callback = (done) = > {
  console.log("callback task...");
  done();
};

exports.callback_error = (done) = > {
  console.log("callback_error task...");
  done(new Error("callback task failed!!!"));
};
Copy the code

Promise way

exports.promise = () = > {
  console.log("promise task...");
  return Promise.resolve();
};

exports.promise_error = () = > {
  console.log("promise task failed!!!");
  return Promise.reject(new Error("promise error"));
};
Copy the code

Used in conjunction with async syntax

const timeout = (time) = > {
  return new Promise((resolve) = > {
    setTimeout(resolve, time);
  });
};

exports.async = async() = > {await timeout(1000);
  console.log("async task...");
};
Copy the code

The stream way

const fs = require("fs");

exports.stream = () = > {
  const readStream = fs.createReadStream("package.json");
  const writeStream = fs.createWriteStream("temp.txt");
  readStream.pipe(writeStream);
  return readStream;
};

exports.streamWithDone = (done) = > {
  const readStream = fs.createReadStream("package.json");
  const writeStream = fs.createWriteStream("temp.txt");
  readStream.pipe(writeStream);
  Gulp listens for the end event of the stream and calls back done on success
  readStream.on("end".() = > {
    done();
  });
};
Copy the code

The working principle of

The core principle of GULp is to stream files. The main process is: input stream -> transform stream -> output stream. We keep gulp entry files and use Node’s file API in gulpfile.js to simulate this process.

const fs = require("fs");
const { Transform } = require("stream");

exports.default = () = > {
  /** * 1. Create file read stream, write stream * 2. Import read stream content to write stream * 3. Create a file conversion stream */
  const read = fs.createReadStream("normalize.css");
  const write = fs.createWriteStream("normalize.min.css");
  const transform = new Transform({
    transform: (chunk, encoding, callback) = > {
      // The conversion process
      // Read Buffer in the stream through chunk
      const input = chunk.toString();
      const output = input.replace(/\s+/g."").replace(/ / / *. +? *//g, "");
      callback(null, output); }});// Stream process
  read.pipe(transform).pipe(write);
  return read;
};
Copy the code

File manipulation API

Gulp extends the Stream API for Node.

const { src, dest } = require("gulp");
const cleanCss = require("gulp-clean-css");
const rename = require("gulp-rename");

exports.default = () = > {
  return src("src/*.css")
    .pipe(cleanCss())
    .pipe(rename({ extname: ".min.css" }))
    .pipe(dest("dist"));
};
Copy the code