Gulp 组合任务
Task 启用模块化方法来配置 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-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' 方法来构建文件夹，该参数表示目标目录。
要运行任务，请在项目目录中使用以下命令-
组合多个任务
您可以通过在配置文件中创建默认任务一次运行多个任务，如以下代码所示-
gulp.task('default', ['imagemin', 'styles'], function() {
});
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
