gulp插件(12) - run-sequence(同步执行任务)

本文介绍如何使用run-sequence插件来控制gulp任务的顺序执行,包括清理目录、代码压缩打包及监控等步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

功能描述

gulp默认使用最大并发数执行任务,也就是说所有的任务几乎都是同时执行,而不会等待其它任务。但很多时候,任务是需要有先后次序的,比如要先清理目标目录,然后再执行打包。
run-sequence 的作用就是控制多个任务进行顺序执行或者并行执行
gulp-run-sequence 也是实现相同功能,但已经被标记为deprecated


插件安装

$ cnpm install run-sequence --save-dev

使用方法

执行前端代码自动构建,一般会分为以下几个步骤
1. 清理目标目录(任务:clean)
2. 代码压缩打包,这其中包括对JS,CSS,HTML以及图片的处理(任务:minify:js,minify:css,minify:html,minify:image)
3. 监控(任务:watch)

首先执行第一步操作,清理目标目录,清理完成后方可执行打包动作。
然后执行第二步操作,这个步骤里又可以细分为几个任务,但是几个任务相互之间并没有依赖关系,因此可以并行。
最后执行第三步操作,监控代码变改,必须在第二步所有任务全部执行完成后方可执行

最终代码

var gulp        = require('gulp'),
    runSequence = require('run-sequence'),
    pump        = require('pump');

gulp.task('default', function(cb) {
    runSequence(
        'clean', // 第一步:清理目标目录
        ['minify:js', 'minify:css', 'minify:html', 'minify:image'], // 第二步:打包 
        'watch', // 第三步:监控
        cb
    );
});
这是一款 Gulp插件,其功能是使源目录和目标目录之间的文件操作保持同步,当检测到源目录的文件有增加/删除/更新时,会自动同步到目标目录。Github:https://github.com/kayo5994/gulp-file-sync安装npm install --save-dev gulp-file-sync使用var gulp = require('gulp'),     fileSync = require('gulp-file-sync'); gulp.task('sync', function() {   gulp.watch(['src/*.*'], function() {     fileSync('src', 'dest', {recursive: false});   }); });API 列表fileSync('source directory', 'destination directory', options)'source directory' and 'destination directory'type: String当 'source directory' 目录发生任何文件变化时会自动同步到 'destination directory' 目录。options.recursivetype: Booleandefault: true是否对目录递归调用。options.ignoretype: string or array or regex or function排除特定的文件,支持字符串,正则,函数(返回值是被排除的文件),例如:// ignore all .log files fileSync('source directory', 'destination directory', {   ignore: '.log'   }) fileSync('source directory', 'destination directory', {   ignore: [/^\.log$/i, '.cache'] // Exclude all .log and .cache files }) fileSync('source directory', 'destination directory', {   ignore: /^\.log$/i  }) fileSync('source directory', 'destination directory', {   ignore: function(dir, file) {             return file === '.log';           }  })options.addFileCallbacktype: function(fullPathSrc, fullPathDest)default:var gutil = require('gulp-util'); function(fullPathSrc, fullPathDest) {   gutil.log('同步增加文件到 '   fullPathDest); }当 source directory 有新增文件时会调用该方法。fullPathSrc - source directory 目录中新增文件的路径。fullPathDest - destination directory 目录中同步新增的文件的路径。options.deleteFileCallbacktype: function(fullPathSrc, fullPathDest)default:var gutil = require('gulp-util'); function(fullPathSrc, fullPathDest) {   gutil.log('同步删除文件 '   fullPathDest); }当 source directory 有文件被删除时会调用该方法。fullPathSrc - source directory 目录中被删除文件的路径。fullPathDest - destination directory 目录中同步删除的文件的路径。options.updateFileCallbacktype: function(fullPathSrc, fullPathDest)default:var gutil = require('gulp-util'); function(fullPathSrc, fullPathDest) {   gutil.log('同步修改文件 '   fullPathDest); }当 source directory 有文件被修改时会调用该方法。fullPathSrc - source directory 目录中被修改文件的路径。fullPathDest - destination directory 目录中同步修改的文件的路径。options.beforeAddFileCallbacktype: function(fullPathSrc)当 source directory 有新增文件,但并未开始同步时调用该方法。fullPathSrc - source directory 目录中新增文件的路径。options.beforeDeleteFileCallbacktype: function(fullPathSrc)当 source directory 有文件被删除,但并未开始同步删除时调用该方法。fullPathSrc - source directory 目录中被删除文件的路径。options.beforeUpdateFileCallbacktype: function(fullPathSrc)当 source directory 有文件被修改,但并未开始同步修改时调用该方法。fullPathSrc - source directory 目录中被修改文件的路径。 标签:GulpFileSync
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值