📜  Gulp-开发应用程序

📅  最后修改于: 2020-10-25 06:22:47             🧑  作者: Mango


在前面的章节中,您研究了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
});

其中“任务名称”是字符串名称,“函数()”执行任务。 ‘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构造函数创建的其他函数。它通过调用带有代表目标目录的参数的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%)