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个函数的更多相关文章

  1. 用gulp构建你的前端项目

    前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动 ...

  2. express+gulp构建项目(二)启动项目和主文件

    这一次整理的内容是项目主文件和如何启动项目. 启动项目 通过nodejs官网的例子https://nodejs.org/docs/latest-v4.x/doc/api/synopsis.html我们 ...

  3. express+gulp构建项目(一)项目目录结构

    express是基于nodejs平台的web框架,它可以让我们快速开发出web引用.而gulp是一种自动构建工具,非常强大,有了它,能帮我们完成很多繁琐的工作,例如,静态文件的压缩,为静态文件加上哈希 ...

  4. Gulp构建前端自动化工作流之:常用插件介绍及使用

    在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及 ...

  5. 使用 gulp 构建一个项目

    本章将介绍 gulp-watch-path stream-combiner2 gulp-sourcemaps gulp-autoprefixer 您还可以直接学习以下模块: 安装 Node 和 gul ...

  6. [翻译]在gulp构建工具中使用PostCSS

    前言 PostCSS已经在一段时间内迅速普及,如果你还不知道PostCSS或还没有使用它,我建议你看一下之前的一篇介绍文章<PostCSS简介>,其中介绍了使用PostCSS的基本方法,包 ...

  7. 使用gulp构建微信小程序工作流

    前言 刚入门微信小程序的时候,一切都基于微信web开发者工具,没有使用其他框架,也没有工程化的概念.当时做的项目都比较简单,单单用微信web开发者工具倒也得心应手.学了些东西后,就按捺不住地想跳出原生 ...

  8. Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用

    Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用 Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.cs ...

  9. Angular企业级开发(6)-使用Gulp构建和打包前端项目

    1.gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 ...

随机推荐

  1. 洛谷-拼数-NOIP1998提高组复赛

    题目描述 Description 设有n个正整数(n≤20),将它们联接成一排,组成一个最大的多位整数. 例如:n=3时,3个整数13,312,343联接成的最大整数为:34331213 又如:n=4 ...

  2. hdu1536Nim

    sg函数打表的基础应用,第一道ac的sg函数打表题纪念下,直接上代码: hdu1536题目连接 #include<iostream> #include<cstdio> #inc ...

  3. WinForm 无边框窗体和timer控件

    一.无边框窗体 1.控制按钮如何制作就是放置可以点击的控件,不局限于使用按钮或是什么别的,只要可以点击能触发点击事件就可以了 做的好看一点,就是鼠标移入,移出,按下三个事件会让按钮改变样式 如何获取图 ...

  4. 清除HTML标记

    public static string DropHTML(string Htmlstring)        {            if (string.IsNullOrEmpty(Htmlst ...

  5. underScore学习1:匿名函数中call(this)的作用

    匿名函数中(function(){}).call(this) 中的.call(this) 有什么用? 我们都知道,.call()可以改变函数执行时的context,即this的指向,源码中的.call ...

  6. linux下安装tomcat,并设置自动启动

    在linux系统下,设置某个服务自启动的话,需要在/etc/rcX.d下挂载,还要在/etc/init.d/下写启动脚本的 在/etc/init.d/下新建一个文件tomcat(需要在root权限下操 ...

  7. 树莓派+Android Things

    在开始之前 谷歌前不久发布了Android Things面向物联网的系统,用意是想让android开发者用原来开发app的方式开发硬件相关的应用,扩展了android开发的方向和前景,而谷歌的Andr ...

  8. Java中获取当前日期

    java.util.Date date = new Date();java.Text.SimpleDateFormat df = new SimpleDateFormat("yyyyMMdd ...

  9. Zend Studio 无法打开的解决办法

    今天郁闷的...正在写代码,突然 computer 嗝屁了,断电后自动重启了一次,开机后就悲剧了,Zend Studio 9 无法打开了,每次运行只弹窗个 请查看项目错误日志的提示 然后就没反应了.. ...

  10. js--面向对象继承

    Object.create()方法可以传入一个原型对象,并创建一个基于该原型的新对象,但是新对象什么属性都没有. // 原型对象: var Student = { name: 'Robot', hei ...