gulp以task的形式组织任务。

在每一个任务中,从gulp.src()指定文件源头开始,经过一系列pipe管道处理, 最后结果保存到gulp.dest指定的目录中,(或输出到stream)

任务的顺序用runSequence来组织,把可以并行的的任务放在一个数组里面, 数组之间是串行的
runSequence(['clean'], ['copy-to-one-folder'], ['publish'], callback);

(备注: 加形参callback彻底变成串行)

把需要发布的从多处汇总到一个目录dist/src
gulp.task("copy-to-one-folder", function(){
gulp.src(["c:/labs3/TestLab/NodeServer/routes/**/*"], {base: "c:/labs3/TestLab/"})
.pipe(gulp.dest('dist/src'));

return gulp.src(["c:/labs3/TestLab/HomeFinder/**/*"], {base:"c:/labs3/TestLab/HomeFinder/"})
.pipe(gulp.dest('dist/src'));
});

把汇总后的文件zip到 dist/release目录下

如何需要rename文件的名称,
对于单个文件 .pipe(rename("main/text/ciao/goodbye.md"))
对于模式修改:
.pipe(rename(function (path) {
path.dirname += "/ciao";
path.basename += "-goodbye";
path.extname = ".md"
}))

如何需要replace文件中的字符串,(支持正则表达式),(最好以单个文件作为gulp.src源, 以减少计算量)
.pipe(replace('bar', 'foo'))
.pipe(replace(/foo(.{3})/g, '$1foo'))

用if添加, 限定repalce和rename,会更加有效率
如果是 *.html文件, .pipe(gulpif('*.html', do-sth, else-do-sth))
.pipe($.if('*.html', do-sth, else-do-sth))

注意选用 gulp-系列的模块'gulp-replace'不是 'replace', 这是两个不同的模块!!!

var gulpIgnore = require('gulp-ignore');
.pipe(gulpIgnore.exclude(condition))

加!前缀排除指定的目录
gulp.src(['./*.js', '!./node_modules/**'])

文件合并与minify

1) useref以html文件中的标记为参考, 提取其中的文件路径,合并成一个大文件,
并且minify和uglify。 (可以修改文件名称, 文件中的字符串)
gulp.task("concat", function(){
return gulp.src(["c:/labs3/TestLab/Css3Test/index.html"], {base:"c:/labs3/TestLab/Css3Test"})
.pipe(useref())
.pipe($.if('*.html', $.replace('head', 'my head is from $' )))
.pipe(gulpif('*.html', $.replace('div', 'from gulpif' )))
.pipe(gulpif('*.css', $.rename("my-conbinted.css")))
.pipe(gulpif('*.css', minifyCss()))
.pipe(gulp.dest('dist/raw'));
});

最新版本的^3.0.7 (老版本用法稍繁琐)

用gulp建立自动工具,完成软件的编译、测试、打包和发布流程的更多相关文章

  1. Gulp和Webpack工具的区别

    引用知乎的回答:https://www.zhihu.com/question/37020798 怎么解释呢?因为 Gulp 和 browserify / webpack 不是一回事 Gulp应该和Gr ...

  2. 在Linux下使用RAID--使用mdadm工具创建软件Raid 0(1)

    在Linux下使用RAID--使用mdadm工具创建软件Raid 0(1) RAID即廉价磁盘冗余阵列,其高可用性和可靠性适用于大规模环境中,相比正常使用,数据更需要被保护.RAID是一些磁盘的集合, ...

  3. APICloud支持Atom编辑器,并建立开发工具核心库

    APICloud支持Atom编辑器开发工具 APICloud始终坚持多开发工具支持策略,开发者无论使用Sublime Text3.Eclipse还是Webstorm,都可以在APICloud平台中找到 ...

  4. CROSSTOOL-NG建立交叉编译工具链

    CROSSTOOL-NG建立交叉编译工具链 因为考试和学习的原因我已经一段时间没有玩我的JZ2440,现在终于考完试了,我再次找出了我的JZ2440.我之前学习的时候使用的是韦东山老师提供的开发工具, ...

  5. 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)

    一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...

  6. 面试总结之MISC(操作系统,网络,数学,软件开发,测试,工具,系统设计,算法)

    操作系统 解释堆和栈的区别. 分配在堆的内存与分配在堆栈的内存有什么不同 分配在堆的内存要手动去释放 线程与进程的区别 多线程中栈与堆是公有的还是私有的 在多线程环境下,每个线程拥有一个栈和一个程序计 ...

  7. gulp 前端构建工具入门

    gulp 前端构建工具入门 标签(空格分隔): gulp 1. 安装gulp npm i -g gulp 2. 创建gulp项目 2.1 Hello world 使用npm init初始化项目文件夹. ...

  8. (转译)2019年WEB漏洞扫描工具和软件前十名推荐

    这些工具都有助于发现漏洞,从而最大限度地提高测试人员的时间和效率.这些工具,2019年更新,也可用于寻找漏洞. 为何扫描? 这资源是什么? Web应用程序对黑客具有极大的吸引力,并且出于百万种不同的原 ...

  9. APICloud重磅支持Atom编辑器,并建立开发工具核心库

    APICloud技术再次升级,不仅支持Atom编辑器开发工具,并推出核心开发工具库,使开发者进行App开发更便捷高效. APICloud支持Atom编辑器开发工具 APICloud始终坚持多开发工具支 ...

随机推荐

  1. linux 下调试 汇编

    gcc: -c 编译后汇编,不连接 -S 编译后停止,不进行汇编 -o 编译,汇编,连接 -g 生成调试信息 -gstabs 标识符 main gdb break *标识符 :设置断点 info re ...

  2. 字符串hash算法

    http://www.cnblogs.com/zyf0163/p/4806951.html hash函数对大家来说不陌生吧 ? 而这次我们就用hash函数来实现字符串匹配. 首先我们会想一下二进制数. ...

  3. OpenGL渲染管线

    OpenGL渲染管线具有一系列顺序处理阶段.两个图形信息数据,顶点数据与像素数据,在管线中被处理.组合,最终写入帧缓存.注意,OpenGL可以将处理过的数据送回到你的程序中.(参考灰色区域) Open ...

  4. 关于python如何简单跳出多层循环

    上述代码的逻辑是,在跳出子循环之前定义一个变量flag为Ture,第一层循环跳出之后,如果要跳出第二个循环,直接调用变量flag,可以直接跳出第二层循环.这里要注意的是缩进,不然会出错误. 如果是多层 ...

  5. Nginx和Apache配置日志格式记录Cookie

    记录Cookie有什么用? 有时候我们需要通过web服务器的访问日志来统计UV(独立访客),并据此分析用户的行为.而UV是依据cookie数据得出的统计.UV相对于IP的好处是:IP是一个反映网络虚拟 ...

  6. ProcessOn

    1.地址:http://www.processon.com/ 2.简介:在线创作流程图.BPMN.UML图.UI界面原型设计.iOS界面原型设计等. 3.优势:无需安装,简单易用.可以替代VISO,学 ...

  7. Linux入侵检查思路及其命令 转自https://yq.aliyun.com/articles/24250?spm=5176.100239.blogcont24249.12.rbBrIh

    摘要: 若Linux操作系统被非法入侵,那么有哪些思路和系统命令用于检查系统当前的状态呢?主要包括对关键进程.关键服务.关键文件的检测,同时及时备份硬盘数据用于持续分析.详细的检查思路和Linux命令 ...

  8. [MySQL5.6 新特性] 全局事务标示符(GTID)

    GTID的全称为 global transaction identifier  , 可以翻译为全局事务标示符,GTID在原始master上的事务提交时被创建.GTID需要在全局的主-备拓扑结构中保持唯 ...

  9. D3树状图给指定特性的边特别显示颜色

    D3作为前端图形显示的利器,功能之强,对底层技术细节要求相对比较多. 有一点,就是要理解其基本的数据和节点的匹配规则架构,即enter,update和exit原理,我前面的D3基础篇中有介绍过,不明白 ...

  10. 使用C#/.net语言进行ProE/Creo二次开发

    随便哪个版本的Visual studio 设置系统环境变量 通常这个环境变量在安装ProE的时候如果选择安装VBAPI就会自动设置 注意32位和64位操作系统路径是不同的.我的是64位操作系统. 然后 ...