Gulp – 自动化开发中的痛苦任务的工具包

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

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

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

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

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

# node --version# npm --version

检查NodeJS和NPM版本

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

如何在Linux中安装Gulp

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

# npm install --global gulp-cli

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

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

# mkdir myproject# cd myproject

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

# npm init

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

初始化NPM项目

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

# npm install --save-dev gulp

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

请注意， devDependencies需要在开发期间解析，而在运行时需要依赖。 由于gulp是一种帮助我们开发的工具，因此需要在开发时解决。

创建Gulp文件

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

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

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

保存文件，现在尝试运行它：

# gulp hello

您应该看到以下结果：

运行Gulp项目

以下代码的作用如下：

• var gulp = require（’gulp’）; – 导入gulp模块。
• gulp.task（’hello’，function（done）{ – 定义一个可从命令行获得的任务。
• console.log（’Hello world！’）; – 只需打印“ Hellow world！ “到屏幕上。
• ()完成; – 我们使用此回调函数来指示gulp我们的任务已完成。

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

# gulp --tasks

列出Gulp任务

Gulp插件

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

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

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

你可以让你的gulpfile.js看起来像这样：

# cat gulpfile.js

样本输出

// including pluginsvar gulp = require('gulp'), minifyHtml = require("gulp-minify-html");// taskgulp.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/

缩小HTML文件

结论

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