Gulp - 组合任务

任务使 Gulp 的配置能够采用模块化方法。我们需要为每个依赖项创建任务，并在我们找到并安装其他插件时将其累加。Gulp 任务将具有以下结构：

gulp.task('task-name', function() {
   //do stuff here
});

其中“task-name”是字符串名称，“function()”执行您的任务。“gulp.task”将该函数注册为名称内的任务，并指定对其他任务的依赖关系。

安装插件

让我们以一个名为minify-css的插件为例，用于合并和压缩所有 CSS 脚本。可以使用 npm 安装它，如下面的命令所示：

npm install gulp-minify-css --save-dev

要使用“gulp-minify-css 插件”，您需要安装另一个名为“gulp-autoprefixer”的插件，如下面的命令所示：

npm install gulp-autoprefixer --save-dev

要连接 CSS 文件，请安装 gulp-concat，如下面的命令所示：

npm install gulp-concat --save-dev

安装插件后，需要在配置文件中编写依赖项，如下所示：

var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');

向 Gulp 文件添加任务

我们需要为每个依赖项创建任务，并在安装插件时将其累加。Gulp 任务将具有以下结构：

gulp.task('styles', function() {
   gulp.src(['src/styles/*.css'])
   .pipe(concat('styles.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'));
});

‘concat’ 插件连接 CSS 文件，‘autoprefix’ 插件指示所有浏览器的当前版本和先前版本。它压缩 src 文件夹中的所有 CSS 脚本，并通过调用带有参数的 ‘dest’ 方法将其复制到 build 文件夹，该参数表示目标目录。

要运行任务，请在项目目录中使用以下命令：

gulp styles

类似地，我们将使用另一个名为 ‘gulp-imagemin’ 的插件来压缩图像文件，可以使用以下命令安装：

npm install gulp-imagemin --save-dev

您可以使用以下命令将依赖项添加到配置文件中：

var imagemin = require('gulp-imagemin');

您可以为上面定义的依赖项创建任务，如下面的代码所示。

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’ 方法将其复制到 build 文件夹，该参数表示目标目录。

要运行任务，请在项目目录中使用以下命令：

gulp imagemin

组合多个任务

您可以通过在配置文件中创建默认任务来一次运行多个任务，如下面的代码所示：

gulp.task('default', ['imagemin', 'styles'], function() {

});

Gulp 文件已设置并准备执行。在项目目录中运行以下命令以运行上述组合任务：

gulp

使用上述命令运行任务时，您将在命令提示符下获得以下结果：

C:\work>gulp
[16:08:51] Using gulpfile C:\work\gulpfile.js
[16:08:51] Starting 'imagemin'...
[16:08:51] Finished 'imagemin' after 20 ms
[16:08:51] Starting 'styles'...
[16:08:51] Finished 'styles' after 13 ms
[16:08:51] Starting 'default'...
[16:08:51] Finished 'default' after 6.13 ms
[16:08:51] gulp-imagemin: Minified 0 images

打印页面