Gulp - 开发应用程序

在前面的章节中，您已经学习了 Gulp 安装 和 Gulp 基础，其中包括 Gulp 的构建系统、包管理器、任务运行器、Gulp 的结构等。

在本章中，我们将了解开发应用程序的基础知识，包括以下内容 −

• 声明所需的依赖项
• 为依赖项创建任务
• 运行任务
• 监视任务

依赖项声明

在为应用程序安装插件时，需要为插件指定依赖项。依赖项由包管理器(例如 bower 和 npm)处理。

我们以一个名为 gulp-imagemin 的插件为例，在配置文件中为其定义依赖项。此插件可用于压缩图像文件，可使用以下命令行 − 进行安装。

npm install gulp-imagemin --save-dev

您可以按照以下代码所示将依赖项添加到配置文件中。

var imagemin = require('gulp-imagemin');

上面一行包含插件，它作为名为 imagemin 的对象包含在内。

为依赖项创建任务

任务启用了配置 Gulp 的模块化方法。我们需要为每个依赖项创建一个任务，在找到并安装其他插件时，我们会将其添加。Gulp 任务将具有以下结构 −

gulp.task('task-name', function() {
    //do stuff here
});

其中 'task-name' 是字符串名称，'function()' 执行您的任务。'gulp.task' 将函数注册为名称内的任务，并指定对其他任务的依赖关系。

您可以为上面定义的依赖项创建任务，如以下代码所示。

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';

   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

图像位于 src/images/**/* 中，保存在 img_srcobject 中。它通过管道传输到 imagemin 构造函数创建的其他函数。它通过调用 dest 方法并使用参数(代表目标目录)压缩 src 文件夹中的图像并将其复制到 build 文件夹。

运行任务

Gulp 文件已设置并准备执行。在项目目录中使用以下命令运行任务 −

gulp imagemin

使用上述命令运行任务时，您将在命令提示符中看到以下结果 −

C:\work>gulp imagemin
[16:59:09] Using gulpfile C:\work\gulpfile.js
[16:59:09] Starting 'imagemin'...
[16:59:09] Finished 'imagemin' after 19 ms
[16:59:09] gulp-imagemin: Minified 2 images (saved 80.81 kB - 16.9%)