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使用新的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
您应该看到以下结果:
以下代码的作用如下:
- 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的插件页面上查看它们。
下面我们将在一个更实际的例子中使用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/
结论
Gulp是一个有用的工具包,可以帮助您提高生产力。 如果您对此工具感兴趣,我强烈建议您查看其文档页面,该页面可在此处找到 。