功能描述

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


插件安装

$ cnpm install run-sequence --save-dev
  • 1

使用方法

执行前端代码自动构建,一般会分为以下几个步骤 
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插件 run-sequence(同步执行任务)的更多相关文章

  1. 使用Gulp里面的浏览器同步插件browser-sync的注意事项

    使用Gulp里面的浏览器同步插件browser-sync的注意事项 第一步:打开你的开发者工具, 编写前端代码!图如下! 第二步:打开你当前工作目录的命令行窗口 第三步:输入浏览器同步执行的代码! b ...

  2. 将less编译成css的gulp插件

    简介:gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码, ...

  3. gulp插件学习01

    1.安装和使用 安装node环境:官网:https://nodejs.org: 命令行输入 npm i gulp -g ,gulp-v查看安装是否成功: 创建项目目录: 进入目录,并在目录中按住shi ...

  4. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  5. gulp插件(gulp-jmbuild),用于WEB前端构建

    源码地址:https://github.com/jiamao/gulp-jmbuild https://github.com/jiamao/gulp-jmbuild gulp-jmbuild gulp ...

  6. gulp插件gulp-nunjucks-render的使用及gulp4的简单了解

    之前写过一篇gulp的使用文章一篇迟到的gulp文章,代码合并压缩,less编译 最近有在用gulp,使用到一个gulp-nunjucks-render插件,感觉挺方便的 gulp-nunjucks- ...

  7. gulp 插件

    原文链接:http://www.mamicode.com/info-detail-517085.html gulp是什么? http://gulpjs.com/ 相信你会明白的! 与著名的构建工具gr ...

  8. gulp插件gulp-usemin简单使用

    关于什么是gulp,它和grunt有什么区别等问题,这里不做任何介绍.本文主要介绍如何使用gulp-usemin这款插件,同时也会简单介绍本文中用到的一些插件. 什么是gulp-usemin 用来将H ...

  9. 使用gulp插件来自动刷新页面。

    http://itakeo.com/blog/2016/05/19/gulpreload/?none=123 使用gulp插件来自动刷新页面.再也不用修改一次,按一下F5了. 首选通过npm inst ...

  10. ASP.NET MVC5学习笔记之Controller同步执行架构分析

    在开始之前,声明一下,由于ASP.NET MVC5正式发布了,后面的分析将基于ASP.NET MVC5最新的源代码.在前面的内容我们分析了怎样根据路由信息来确定Controller的类型,并最终生成C ...

随机推荐

  1. 慕课网 Ajax笔记

    Ajax技术实现: 运用HTML和CSS来实现页面,表达信息: 运用XMLHttpRequest和web服务器进行数据的异步交换: 运用JavaScript操作DOM,实现动态局部刷新: 同步:就是用 ...

  2. HTML利用posotion属性定位 小技巧

    1.居中效果 父级DIV (index-top )属性设置为 text-align:center; 子级DIV( tabIndex-main)属性设置为 margin:0 auto;   2.左右对齐 ...

  3. RPC簡介

    RPC 技术原理       RPC ( Remote Procedure Call Protocol,远程过程调用协议 ): 客户端在不知道调用细节的情况下,调用存在于远程计算机上的某个对象,就像调 ...

  4. android入门学习-天气预报app(一)

    引言 学习<android第一行代码>根据书本开发的天气预报app,主要用于熟练操作android开发(android studio3.0平台). 今天主要分享一下从服务器上获取天气信息, ...

  5. LeetCode题解之Missing Number

    1.题目描述 2.题目分析 将 [ 0 , n ]之间的整数放到 n 个元素的数组中去,必然缺失一个元素.在一次遍历中,将元素n[i] 放到 n[ n[i] ] ,位置.最后检查元素值和下标不相等的情 ...

  6. angular-动画。

    ngAnimate插件是做什么的? ngAnimate插件如其名字一样是为元素提供动画的. 怎么定义动画? 第一步必须是引入插件 <script src="//cdn.bootcss. ...

  7. SQLSERVER2012里的扩展事件初尝试(上)

    SQLSERVER2012里的扩展事件初尝试(上) SQLSERVER2012里的扩展事件初尝试(下) 周未看了这两篇文章: 扩展事件在Denali CTP3里的新UI(一) 扩展事件在Denali ...

  8. javaweb 读取properties配置文件参数

    场景1:在servlet中读取properties配置文件参数 protected void doGet(HttpServletRequest request, HttpServletResponse ...

  9. 使用CADisplayLink写秒表

    使用CADisplayLink写秒表 效果: 源码: StopWatch.h 与 StopWatch.m // // StopWatch.h // ShowTime // // Created by ...

  10. Windows平台使用Gitblit搭建Git服务器教程

    Windows平台使用Gitblit搭建Git服务器图文教程 Git服务现在独树一帜,相比与SVN有更多的灵活性,最流行的开源项目托管网站Github上面,如果托管开源项目,那么就是免费使用的,但是闭 ...