Gulp - 用于自动化开发中的痛苦任务的工具包

Gulp 是一个自动执行重复任务的小工具包。这些重复性任务通常是编译 CSS、JavaScript 文件，或者基本上当您使用处理非标准 JavaScript/CSS 文件的框架时，您将需要使用自动化工具来获取这些文件，将它们打包在一起并编译所有内容，以便您的浏览器可以轻松理解它。

Gulp 对于自动执行以下任务非常有用：

编译 JS 和 CSS 文件
保存文件时刷新浏览器页面
运行单元测试
代码分析
将修改后的文件复制到目标目录

要跟踪创建 gulp 文件、开发自动化工具或自动化任务所需的所有文件，您需要生成 package.json 文件。该文件基本上包含对项目内部内容的解释，以及使项目正常运行所需的依赖项。

在本教程中，您将学习如何安装 Gulp 以及如何自动执行项目的一些基本任务。我们将使用 npm – 它代表节点包管理器。它随 Node.js 一起安装，您可以使用以下命令检查是否已安装 Nodejs 和 npm：

node --version
npm --version

如果您的系统上尚未安装它，我建议您查看教程：在 Linux 系统中安装最新的 Nodejs 和 NPM 版本。

如何在 Linux 中安装 Gulp

可以使用以下命令通过 npm 完成 gulp-cli 的安装。

npm install --global gulp-cli

如果您想在本地安装gulp模块（仅适用于当前项目），您可以使用以下说明：

创建一个项目目录并在其中导航：

mkdir myproject
cd myproject

接下来，使用以下命令来初始化您的项目：

npm init

运行上述命令后，系统会询问您一系列问题，为您的项目提供名称、版本描述等。最后确认您所提供的所有信息：

现在我们可以在我们的项目中安装 gulp 包：

npm install --save-dev gulp

--save-dev 选项告诉 npm 使用新的 devDependency 更新 package.json 文件。

请注意，devDependency 需要在开发期间解决，而 Dependency 在运行时需要解决。既然gulp是一个帮助我们开发的工具，那么在开发的时候就需要解决这个问题。

创建 Gulp 文件

现在让我们创建一个gulpfile。我们想要运行的任务将在该文件中找到。使用gulp命令时会自动加载它。使用文本编辑器创建一个名为 gulpfile.js 的文件。出于本教程的目的，我们将创建一个简单的测试。

您可以将以下代码插入到 gulpfile.js 中：

var gulp = require('gulp');

gulp.task('hello', function(done) {
        console.log('Hello world!');
        done();
});

保存文件，然后尝试使用以下命令运行它：

gulp hello

您应该看到以下结果：

这是上面代码的作用：

var gulp=require('gulp'); – 导入 gulp 模块。
gulp.task(‘hello’, function(done) { – 定义可从命令行执行的任务。
console.log('Hello world!'); – 只需在屏幕上打印“Hellow world!”。
done(); – 我们使用此回调函数来指示 gulp 我们的任务已完成。

当然，上面只是一个示例，用于展示如何组织 gulpfile.js。如果您想查看 gulpfile.js 中的可用任务，可以使用以下命令：

gulp --tasks

吞咽插件

Gulp 有数千个可用插件，所有插件都提供不同的功能。你可以在 Gulp 的插件页面查看它们。

下面我们将在一个更实际的例子中使用 minify-html 插件。使用下面的功能，您可以缩小 HTML 文件并将它们放置在新目录中。但首先，我们将安装 gulp-minify-html 插件：

npm install --save-dev gulp-minify-html

您可以使您的 gulpfile.js 看起来像这样：

cat gulpfile.js

样本输出

// including plugins
var gulp = require('gulp')
, minifyHtml = require("gulp-minify-html");

// task
gulp.task('minify-html', function (done) {
    gulp.src('./src/*.html') // path to your files
    .pipe(minifyHtml())
    .pipe(gulp.dest('./dest'));
    done()
});

然后您可以使用以下命令缩小 HTML 文件。

gulp minify-html
du -sh /src dest/

结论

Gulp 是一个有用的工具包，可以帮助您提高工作效率。如果您对此工具感兴趣，我强烈建议您查看其文档页面，可在此处找到。