使用gulp构建nodejs,你只需要记住5个函数
gulp
gulp是一个nodejs的streaming构建工具,所谓的streaming大致意思就是把构建流程想成一个个链接的管道(pipe)。
为什么要这样做呢?
要解释原因,就不得不提到unix。unix本身只提供了数量相对较少的命令,但是你可以命令的组合完成很强大的功能。命令和命令之间的衔接通常就用的是pipe。
类似,使用gulp,你仅仅只需要记住5个命令。这5个命令就是gulp提供给我们的一套streaming构建的架子,也就相当于提供了unix中的pipe功能。至于说pipe中每个命令的功能,则可以使用现有的plugin或者自定义完成。
安装gulp
如果npm版本比较老,可能会遇到安装gulp失败的情况
更新/安装npm:
curl https://www.npmjs.org/install.sh | sudo sh
安装npm:
npm install -g gulp
npm install--save-dev gulp
安装完成以后,可以用gulp -v试一试是否正确
[20:29:16] CLI version 3.8.5
[20:29:16] Local version 3.8.5
一个最简单的gulp脚本
gulpfile.js
---
var gulp = require('gulp')
gulp.task('default', function() {
console.log('this is the default task')
})
运行:gulp
[20:29:02] Starting 'default'...
this is the default task
[20:29:02] Finished 'default' after 74 μs
gulp和大多数的构建工具类似,都是由task组成的,上面的例子中,default是task名字,也表示是默认的task。也可以用gulp default运行,执行的是同一task。
一个第二简单的gulp脚本(src, pipe)
安装jasmine插件
npm install --save-dev gulp-jasmine
gulpfile.js
---
var gulp = require('gulp');
var jasmine = require('gulp-jasmine');
gulp.task('default', function () {
return gulp.src('spec/google.spec.js')
.pipe(jasmine());
});
安装superagent方便测试
spec/google.spec.js
---
var superagent = require('superagent')
describe ('google', function() {
it("should return the google homepage", function(done) {
superagent.get('http://www.google.com/')
.end(function(e, res) {
expect(e).toBe(null)
expect(res.status).toBe(200)
done();
})
})
})
运行测试
[21:01:07] Starting 'default'...
[21:01:07] Finished 'default' after 79 ms
.
Finished in 0.41 seconds
1 test, 2 assertions, 0 failures
gulp有比较多的插件,比如上面用到的gulp-jasmine就是其中的一个。
gulp.src('spec/google.spec.js')
.pipe(jasmine());
有意思的东西来了,什么是src和pipe?
我们先看一个unix命令:
cat gulpfile.js | wc -l
这是两个独立的命令,cat gulpfile.js用来获取gulpfile.js的文件内容,wc -l用来统计文件中的行数,他们中间用“|”相连。把cat gulpfile.js的输出作为wc -l的输入。这是再常见不过的unix命令
gulp中吸取了这样的想法,上面gulp命令可以想作:
'spec/google.spec.js' | jasmine()
这样应该就非常好理解了吧。
你仅仅需要知道的5个gulp命令
gulp.task(name, fn)这个你应经见过了
gulp.run(tasks...)尽可能多的并行运行多个task
gulp.watch(glob, fn)当glob内容发生改变时,执行fn
gulp.src(glob)返回一个可读的stream
gulp.dest(glob)返回一个可写的stream
知道这些以后,你再看https://github.com/gulpjs/gulp中的例子,就显得容易了很多
使用gulp构建nodejs,你只需要记住5个函数的更多相关文章
- 用gulp构建你的前端项目
前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动 ...
- express+gulp构建项目(二)启动项目和主文件
这一次整理的内容是项目主文件和如何启动项目. 启动项目 通过nodejs官网的例子https://nodejs.org/docs/latest-v4.x/doc/api/synopsis.html我们 ...
- express+gulp构建项目(一)项目目录结构
express是基于nodejs平台的web框架,它可以让我们快速开发出web引用.而gulp是一种自动构建工具,非常强大,有了它,能帮我们完成很多繁琐的工作,例如,静态文件的压缩,为静态文件加上哈希 ...
- Gulp构建前端自动化工作流之:常用插件介绍及使用
在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及 ...
- 使用 gulp 构建一个项目
本章将介绍 gulp-watch-path stream-combiner2 gulp-sourcemaps gulp-autoprefixer 您还可以直接学习以下模块: 安装 Node 和 gul ...
- [翻译]在gulp构建工具中使用PostCSS
前言 PostCSS已经在一段时间内迅速普及,如果你还不知道PostCSS或还没有使用它,我建议你看一下之前的一篇介绍文章<PostCSS简介>,其中介绍了使用PostCSS的基本方法,包 ...
- 使用gulp构建微信小程序工作流
前言 刚入门微信小程序的时候,一切都基于微信web开发者工具,没有使用其他框架,也没有工程化的概念.当时做的项目都比较简单,单单用微信web开发者工具倒也得心应手.学了些东西后,就按捺不住地想跳出原生 ...
- Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用
Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用 Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.cs ...
- Angular企业级开发(6)-使用Gulp构建和打包前端项目
1.gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 ...
随机推荐
- php 问答
1,如何设置长生命期的session ? 将 session.cookie_lifetime ,session.gc_maxlifetime 的时间设置长一点. 2,为什么初始化session的时候报 ...
- js检测对象中是否存在某个属性
1.使用in关键字.该方法可以判断对象的自有属性和继承来的属性是否存在. 2.使用对象的hasOwnProperty()方法.该方法只能判断自有属性是否存在,对于继承属性会返回false. 3.用un ...
- ViewPagerIndicator的使用方法
使用方法: 1.引用library,并解决support v4 jar包冲突 2.布局文件中添加viewpager和viewpagerindicator,布局文件: <LinearLay ...
- 【Python之路】第十一篇--CSS
css CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一.css的四种引入方式 1.行内式 行内式是在标记的 ...
- Python学习之旅--第二周--元组、字符串、运算、字典
一.元组 另一种有序列表叫元组:tuple.tuple和list非常类似,但是tuple一旦初始化就不能修改,比如同样是列出同学的名字: # Author:Tim Gu tuple = (" ...
- redis11--java_jedis-test
使用Java开发项目的时候使用Redis的话,目前有一些开源API可以使用.最常用的就是jedis,它提供了许多基于Java的对象和方法来调用Redis的指令.jedis的jar包下载地址http:/ ...
- 获取所有input值 处理成json格式再利用$.post提交
<script>$(document).ready(function(){ $("#sub").click(function(){ var ...
- spring No adapter for handler 错误
为了实现controller对JSON数据的自动解析,在spring-mvc.xml文件中增加了 <bean class="org.springframework.web.servle ...
- HDU2571 命运 动态规划
好久没更新博客了. 校内练习的一道水题 HDU2571 命运. 简单DP. 穿过幽谷意味着离大魔王lemon已经无限接近了! 可谁能想到,yifenfei在斩杀了一些虾兵蟹将后,却再次面临命运大迷宫 ...
- BeanUtils属性
1.copyproperties:拷贝方法 (1).当源对象(a)中存在一个java.sql.Date类型的属性并且值为null,目标对象(b)中也存在这个同名同类型的属性.把a对象属性值c ...