We know there are so many tasks we do manually while building a Vue project or any front end applications. We can automate all the repetitive tasks with the help of gulp. With Gulp, we can automate and enhance your workflow.

我们知道在构建Vue项目或任何前端应用程序时，我们需要手动完成许多任务。 我们可以借助gulp使所有重复性任务自动化。 借助Gulp，我们可以自动化和增强您的工作流程。

In this post, we will see two example projects one is a basic javascript project to get familiar with gulp and another is a full-blown Vue.js project. In the Vue project, we can see how we can automate builds.

在本文中，我们将看到两个示例项目，一个是熟悉gulp的基本javascript项目，另一个是功能完善的Vue.js项目。 在Vue项目中，我们可以看到如何自动化构建。

• What is Gulp

  什么是Gulp

• Installing Gulp

  安装Gulp

• Example Project With Basic Gulp

  具有基本Gulp的示例项目

• Example Project With Vue

  Vue的示例项目

• Summary

  概要

• Conclusion

  结论

什么是Gulp(What is Gulp)

Gulp is a toolkit to automate and enhance your workflow and you can use gulp and the flexibility of Javascript to automate slow, repetitive workflows and compose them into efficient build pipelines. It is flexible, comparable, and efficient. For example, if you are building a typescript project you can use gulp to transpile into a Javascript before running your project or you can use some plugins to optimize images for your project or you can watch files and build the project automatically.

Gulp是用于自动化和增强工作流程的工具包，您可以使用gulp和Javascript的灵活性来自动化缓慢的重复工作流程，并将其组合为有效的构建管道。 它具有灵活性，可比性和高效性。 例如，如果您正在构建一个打字稿项目，则可以在运行项目之前使用gulp将其转换为Javascript，或者可以使用一些插件来优化项目的图像，或者可以观看文件并自动构建该项目。

You can automate a lot more tasks like above with gulp. There are a lot of plugins built by the community. These plugins do some tasks efficiently and you can use these as building blocks and chain them to get the desired result.

您可以使用gulp自动执行更多类似上述的任务。 社区构建了许多插件。 这些插件可以高效地完成某些任务，您可以将它们用作构建基块并链接它们以获得所需的结果。

安装Gulp (Installing Gulp)

We need a node installed on our machine as a prerequisite. If you don’t have node installed check this link to install it. Once installed, check the version with this command to make sure you have installed it correctly.

我们需要先在计算机上安装一个节点。 如果您尚未安装节点，请检查此链接以进行安装。 安装完成后，请使用此命令检查版本以确保已正确安装。

node --version
npm --version

Once you have a node on your machine install the gulp globally so that you can use the command gulp anywhere you want. Once installed, check the version.

在计算机上拥有节点后，请在全球范围内安装gulp，以便可以在任何需要的地方使用gulp命令。 安装后，检查版本。

npm install -g gulp-cli
gulp --version

具有基本Gulp的示例项目 (Example Project With Basic Gulp)

Let’s run some example scenarios with some basic gulp project here and clone the below project.

让我们在此处运行一些带有基本gulp项目的示例场景，并克隆以下项目。

// clone the project
git clone https://github.com/bbachi/gulp-examples.git// install dependencies
npm install

生成文件，文件夹和移动文件 (Generating Files, Folders, and Moving Files)

This is a simple scenario where you can general a file an folder, moving the file into that folder, and finally, delete the file. Since all these tasks are done one by one we need to execute in series. You need to run with this command gulp --gulpfile gulpfile1.js

这是一个简单的方案，您可以将一个文件通用为一个文件夹，然后将该文件移入该文件夹，最后删除该文件。 由于所有这些任务都是一个接一个地完成的，因此我们需要依次执行。 您需要使用以下命令运行gulp --gulpfile gulpfile1.js

// Moving files and Generating Folders
const { src, dest, series } = require('gulp');
const fs   = require('fs');
var exec = require('child_process').exec;
const log = require('fancy-log');
const del = require('del');




function createFile(cb) {


    return exec('touch index.js', function (err, stdout, stderr) {
        log(stdout);
        log(stderr);
        cb(err);
    })
}


function createFolder() {


    const dir = 'dir1'
    log(`Creating the folder if not exist  ${dir}`)
    if(!fs.existsSync(dir)) {
      fs.mkdirSync(dir);
      log('