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

Gulp是一个自动执行重复任务的工具包,通常编译CSS,JavaScript文件或使用处理非标准JavaScript / CSS文件的框架。

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

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

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

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

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

# node --version
# npm --version
检查NodeJS和NPM版本

检查NodeJS和NPM版本

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

如何在Linux中安装Gulp

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

# npm install --global gulp-cli

如果要在本地安装gulp模块 (仅适用于当前项目),可以使用以下说明:

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

# mkdir myproject
# cd myproject

接下来,使用以下命令初始化项目:

# npm init

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

初始化NPM项目

初始化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项目

运行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有数千个插件可用,所有插件都提供不同的功能。 您可以在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/
缩小HTML文件

缩小HTML文件

结论

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

分享按钮