Gulp是一个可以自动执行重复任务的小工具包。这些重复性任务通常是编译 CSS、JavaScript 文件,或者基本上当您使用处理非标准 JavaScript/CSS 文件的框架时,您将需要使用自动化工具来获取这些文件,将它们打包在一起并编译所有内容,以便您的浏览器可以轻松理解它。
Gulp对于自动化以下任务很有用:
- 编译 JS 和 CSS 文件
- 保存文件时刷新浏览器页面
- 运行单元测试
- 代码分析
- 将修改后的文件复制到目标目录
要跟踪创建 gulp 文件、开发自动化工具或自动化任务所需的所有文件,您需要生成package.json文件。该文件基本上包含对项目内部内容的解释,以及使项目正常运行所需的依赖项。
在本教程中,您将学习如何安装 Gulp 以及如何自动执行项目的一些基本任务。我们将使用npm – 它代表节点包管理器。它随Node.js一起安装,您可以使用以下命令检查是否已安装 Nodejs 和 npm:
# 节点--版本 # npm --版本
![](https://www.alaica.com/wp-content/uploads/linux-461.png)
如果您的系统上尚未安装它,我建议您查看教程:在 Linux 系统中安装最新的 Nodejs 和 NPM 版本。
如何在 Linux 中安装 Gulp
可以使用以下命令通过npm完成gulp-cli的安装。
# npm install --global gulp-cli
如果您想在本地安装gulp 模块(仅适用于当前项目),您可以使用以下说明:
创建一个项目目录并在其中导航:
# mkdir 我的项目 # cd 我的项目
接下来,使用以下命令来初始化您的项目:
# npm 初始化
运行上述命令后,系统会询问您一系列问题,为您的项目提供名称、版本描述等。最后确认您所提供的所有信息:
![](https://www.alaica.com/wp-content/uploads/linux-462.png)
现在我们可以在我们的项目中安装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('你好', 函数(完成) { console.log('世界你好!'); 完毕(); });
保存文件,然后尝试使用以下命令运行它:
# 咕噜咕噜你好
您应该看到以下结果:
![](https://www.alaica.com/wp-content/uploads/linux-463.png)
这是上面代码的作用:
- var gulp = require('gulp'); – 导入 gulp 模块。
- gulp.task('hello', function(done) { – 定义可从命令行使用的任务。
- console.log('世界你好!'); – 简单地打印“ Hello world! ”到屏幕上。
- 完毕(); – 我们使用这个回调函数来指示 gulp 我们的任务已经完成。
当然,上面只是一个示例,用于展示如何组织gulpfile.js 。如果您想从gulpfile.js查看可用任务,可以使用以下命令:
# gulp --任务
![](https://www.alaica.com/wp-content/uploads/linux-464.png)
吞咽插件
Gulp有数千个可用插件,所有插件都提供不同的功能。你可以在Gulp 的插件页面查看它们。
下面我们将在一个更实际的例子中使用minify-html插件。使用下面的功能,您可以缩小 HTML 文件并将它们放置在新目录中。但首先,我们将安装gulp-minify-html插件:
# npm install --save-dev gulp-minify-html
你可以让你的gulpfile.js看起来像这样:
# 猫 gulpfile.js
样本输出
// 包括插件 var gulp = require('gulp') , minifyHtml = require("gulp-minify-html"); // 任务 gulp.task('minify-html', 函数 (完成) { gulp.src('./src/*.html') // 文件路径 .pipe(minifyHtml()) .pipe(gulp.dest('./dest')); 完毕() });
然后您可以使用以下命令缩小 HTML 文件。
# gulp minify-html # du -sh /src 目标/
![](https://www.alaica.com/wp-content/uploads/linux-465.png)
结论
Gulp是一个有用的工具包,可以帮助您提高工作效率。如果您对此工具感兴趣,我强烈建议您查看其文档页面,可在此处找到。