gulp入门小记
由于我所在的项目组一直在用gulp构建工具,而我只是在前人搭好的环境下每次运行gulp packJs来打包js,对里面的东西全然不知,刚好最近有些时间就想自己从学学将gulp怎么用于构建前端项目中,这样也会对这个构建工具有一些深刻的理解。
首先,gulp是什么?gulp是基于nodejs的自动任务运行器,能自动地完成html js css sass image等文件的的检查、合并、压缩、浏览器自动刷新、部署文件生成,在实现上,借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,输入输出是基于流式的。gulp不需要复杂的配置文件(所以构建脚本是代码而不是配置文件),都是使用标准库(node.js standard library)来编写脚本;插件都很简单,只负责完成一件事-基本上都是 20 行左右的函数;任务都以最大的并发数来执行。
其次,安装和使用,网上有好多安装教程这里就简单说下。第一,node是环境需要,所以应首先安装;第二,全局安装gulp(npm install -g gulp)再在项目下局部安装gulp(npm install -save--dev gulp);第三,在项目目录下面新建基于nodejs不可少的package.json(也可以用命令行npm init)和gulp的配置文件gulpfile.js。然后需要什么插件安装后在gulpfile.js里面require一下操作就行。
最后,说说gulp最常用的api函数(下面只写一个大概,具体还需亲自去看api文档):
① gulp.task(name[, deps], fn):name是任务名称,deps是可选的数组(该任务依赖的任务),fn是调用插件操作;
② gulp.src(globs[, options]):指明处理的源文件路径,options是可选的,返回当前流至可用插件。
③ gulp.dest(path[, options]):指明处理后的输出路径;
④ gulp.watch(glob[, options], tasks) / gulp.watch(glob[, options, cb]):监视文件的变化并运行相应的任务。
最后最后再说一个自己搭建过程中遇到的一个小问题,就是用http-server和livereload在我的电脑上始终没起作用,后来换了一种方式改用gulp-connect就可以实现浏览器自动刷新了。后来还试了一下基本的js css压缩插件 也都没有问题,以后再慢慢深入吧。总体感觉gulp还是挺简洁使用的。
gulp入门小记的更多相关文章
- Gulp入门教程(转载)
本人转载自: Gulp入门教程
- (转)前端构建工具gulp入门教程
前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...
- 《Gulp 入门指南》 : 使用 gulp 压缩 JS
<Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打 ...
- Gulp入门与解惑
Gulp简介 Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.Gulp.js是基于 Node.js构建的,利用Node.js流的威力,你可以快速构建项目. 安装 ...
- gulp 入门使用
gulp 入门使用 使用场景 相信大家在传统的开发模式下 都是 html + css + js 然后静态文件不经过任何处理 部署到服务器,这样会有很多漏洞例如: 1.在网站上查看F12 就可以看到 ...
- 【转】Gulp入门基础教程
Gulp入门基础教程 原文在此 前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp, 真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用G ...
- gulp入门与一些基本设置
这里是gulp入门的一些操作,实现了编译sass文件.压缩.合并.添加版本号等基本功能. 友情提示,如果npm出现无法下载可以安装 cnpm.在安装完Nodejs 后 npm install cnpm ...
- gulp入门演练
一直想学习下gulp看了蛮多资料,然后总是感觉是是而非,突然开窍了,把自己学会的过程给大家分享下,入门超级简单的 gulp安装 安装gulp 如果参数-g 表示全局安装 $ npm install g ...
- 前端小白的gulp入门
gulp新手入门 全局安装 cnpm install -g gulp 本地安装cnpm install gulp -D 如果项目没有package.json,记得npm init 安装插件cnpm i ...
随机推荐
- 开源一个WEB版本GEF,基于SVG的网页流程图框架
8月开始断断续续的制作这个web gef,没有任何依赖,完全原生js开发,目前已经完成了雏形,基本上可以在项目里应用了. 下图展示的是demo1的效果,包括拖拽,生成连线,点击生成\取消墙体,整个de ...
- 1、利用蓝牙定位及姿态识别实现一个智能篮球场套件(一)——用重写CC2541透传模块做成智能手环
一.预言 要实现一个智能篮球场套件,需要设计一个佩戴在篮球运动员手臂上的可以检测投篮.记步的手环,以及一套可以根据RSSI定位运动员的蓝牙定位装置.下面是大致需要的步骤: 首先,需要用CC2541透传 ...
- Maven pom文件常用配置,转载
什么是POM Project Object Model,项目对象模型.通过xml格式保存的pom.xml文件.作用类似ant的build.xml文件,功能更强大.该文件用于管理:源代码.配置文件.开发 ...
- mongodb全套配置
1,下载&安装 MongoDB 提供了centos yum安装方式. 参考:http://docs.mongodb.org/manual/tutorial/install-mongodb-on ...
- 【.net 深呼吸】聊聊WCF服务返回XML或JSON格式数据
有时候,为了让数据可以“跨国经营”,尤其是HTTP Web有关的东东,会将数据内容以 XML 或 JSON 的格式返回,这样一来,不管客户端平台是四大文明古国,还是处于蒙昧时代的原始部落,都可以使用这 ...
- PHP 高级编程(1/5) - 编码规范及文档编写
PHP 高级程序设计学习笔记20140612 软件开发中的一个重要环节就是文档编写.他可以帮助未来的程序维护人员和使用者理解你在开发时的思路.也便于日后重新查看代码时不至于无从下手.文档还有一个重要的 ...
- 1、Python基础知识
输出print “houkai”,3.0版本后print修改为函数,print(‘houkai’) 数学运算:默认整数整除1/2=0而1.0/2=0.5,可以使用from __future__ imp ...
- [.NET] 开头不讲"Hello Word",读尽诗书也枉然 : Word 操作组件介绍 - Spire.Doc
开头不讲"Hello Word",读尽诗书也枉然 : Word 操作组件介绍 - Spire.Doc [博主]反骨仔 [原文地址]http://www.cnblogs.com/li ...
- Oracle --> Vertica 数据类型转换规则
需求:在Vertica数据库上建表,表结构来源于原Oracle数据库,故需要转换成Vertica数据库库表结构. 实际转换操作需要评估源库用到的所有数据类型和数据本身特性. 下面是总结的某场景下的 ...
- 使用session页面控制登录入口及购物车效果的实现
由于 Session 是以文本文件形式存储在服务器端的,所以不怕客户端修改 Session 内容.实际上在服务器端的 Session 文件,PHP 自动修改 Session 文件的权限,只 ...