Categories
Gulp教程

Gulp-合并任务

Gulp-合并任务


任务使模块化方法可以配置Gulp。我们需要为每个依赖项创建任务,我们会在找到并安装其他插件时将其加总。 Gulp任务将具有以下结构-

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

其中“任务名称”是字符串名称,“函数()”执行任务。 “ 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_src对象中。它通过管道传递给“ imagemin”构造函数创建的其他函数。它通过使用代表目标目录的参数调用’dest’方法来压缩src文件夹中的图像并将其复制到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
蜀ICP备20006366号
error: 内容受到保护 !!