Gulp教程

Gulp 开发应用程序

在前面的章节中,您学习了Gulp 安装和Gulp 基础知识 其中包括 Gulp 的构建系统、包管理器、任务运行器、Gulp 的结构等。
在本章中,我们将看到开发应用程序的基础知识,包括以下内容-
声明所需的依赖项 为依赖项创建任务 运行任务 观看任务

依赖声明

当您为应用程序安装插件时,您需要为插件指定依赖项。依赖项由包管理器处理,例如 bower 和 npm。
让我们使用一个名为 gulp-imagemin 的插件在配置文件中为其定义依赖项。此插件可用于压缩图像文件,并可使用以下命令行安装-
npm install gulp-imagemin--save-dev
您可以将依赖项添加到您的配置文件中,如以下代码所示。
var imagemin = require('gulp-imagemin');
上一行包含插件,它作为名为 imagemin 的对象包含在内。

为依赖项创建任务

Task 启用了配置 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_src 对象中。它通过管道传输到由 imagemin 构造函数创建的其他函数。它从 src 文件夹压缩图像,并通过调用 dest 方法和一个表示目标目录的参数复制到 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%)
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4