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'插件指示所有浏览器的当前版本和先前版本.它通过调用带有参数的'dest'方法缩小src文件夹中的所有CSS脚本并复制到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