在前面的章节中,您已经了解了 Gulp安装和 Gulp基础知识,包括Gulp构建系统,包管理器,任务运行器,Gulp结构等.
在本章中,我们将看到基础知识用于开发应用程序,其中包括以下 :
声明所需的依赖项
创建任务for dependencies
运行任务
观察任务
依赖关系声明
在为应用程序安装插件时,需要指定插件的依赖关系.依赖关系由包管理器处理,例如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'将函数注册为name中的任务,并指定对其他任务的依赖.
您可以为上面定义的依赖项创建任务,如下面的代码所示.
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%)