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_srcobject 中。它通过管道传输到 imagemin 构造函数创建的其他函数。它压缩 src 文件夹中的图像,并通过使用代表目标目录的参数调用dest方法将图像复制到构建文件夹。
运行任务
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%)