gulp 创建一个应用

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));
});

这些图像位于保存在img_srcobject中的src / images / ** / *中。它被传递给由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%)