zuiyuexuan / article Goto Github PK

What ?
Gulp是基于Node.js的一个构建工具（自动任务运行器），开发者可以使用它构建自动化工作流程（前端集成开发环境）。一些常见、重复的任务，例如：网页自动刷新、CSS预处理、代码检测、压缩图片、等等…… 只需用简单的命令就能全部完成。使用它，可以简化工作，让你把重点放在功能开发上；同时减少人为失误，提高开发效率和项目质量。如果你之前接触过Grunt，那上手Gulp就会觉得非常容易理解。

Why ?
易用 Gulp相比Grunt更简洁，而且遵循代码优于配置策略，维护Gulp更像是写代码。
高效 Gulp相比Grunt更有设计感，核心设计基于Unix流的概念，通过管道连接，不需要写中间文件。
高质量 Gulp的每个插件只完成一个功能，这也是Unix的设计原则之一，各个功能通过流进行整合并完成复杂的任务。例如：Grunt的imagemin插件不仅压缩图片，同时还包括缓存功能。他表示，在Gulp中，缓存是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性。目前官方列出的有673个插件。
易学 Gulp的核心API只有4个，掌握了4个API就学会了Gulp，之后便可以通过管道流组合自己想要的任务。（注：Gulp之前有5个核心API，但随着Gulp 3.5的更新，gulp.run()方法早已被弃用。）

具体gulp和grunt差异可参考 https://segmentfault.com/a/1190000002491282

API

Gulp的核心API只有4个：src、dest、task、watch

gulp.src(globs[, options])：指明源文件路径
globs：类型 String 或 Array
options：可选参数；

gulp.dest(path[, options])：指明处理后的文件输出路径
path：路径（一个任务可以有多个输出路径）；
options：可选参数；

gulp.task(name[, deps], fn)：注册任务
name：任务名称（通过 gulp name 来执行这个任务）；
deps：可选的数组，在本任务运行中所需要所依赖的其他任务（当前任务在依赖任务执行完毕后才会执行）；
fn：任务函数（function方法）；

gulp.watch(glob [, opts], tasks)：监视文件的变化并运行相应的任务
glob：路径模式匹配；
opts：可以选配置对象；
taks：执行的任务；

Node
使用gulp需要nodejs环境，所以要先安装nodeJs。

1. 安装

首先去Node.js官网，下载并安装。安装完成后，通过下面两个命令检测是否安装成功

  node -v    //查看 Node.js 版本号
  npm -v    //查看 npm 版本号：

注： Node.js会自动安装npm,npm 是 Node.js 的包管理器，Gulp和Gulp插件就通过 npm 安装并管理

1. npm常用命令

安装插件：npm install [-g] [--save-dev]
更新插件：npm update [-g] [--save-dev]
卸载插件：npm uninstall [-g] [--save-dev]
指定版本：npm install @VERSION [--save-dev]（其中VERSION就是你所需要的版本号）
-g： 全局安装
--save：将保存配置信息至package.json-dev 是本地安装
-dev：将它作为你的项目依赖添加到中devDependencies内

Gulp安装

1. 进入项目文件夹
   cd gulp-demo
2. 安装gulp
   npm install gulp --save-dev
   安装完成后，我们同样可以通过gulp -v 命令，来查看Gulp的版本号。
   这时项目文件夹中生成了一个node_modules文件夹，其里面就是对应的Gulp和Gulp插件。
3. 通过命令 npm init 初始化package.json

{
  "name": "gulp", // 模块名称：只能包含小写字母数字和中划线，如果为空则使用项目文件夹名称代替（必填）
  "version": "3.8.11", // 版本号（必填）
  "description": "The streaming build system", // 描述：会在npm搜索列表中显示（必填）
  "homepage": "http://gulpjs.com", // 项目主页
  "repository": { // 资源库
    "type": "git",
    "url": "git://github.com/gulpjs/gulp"
  },
    "author": { // 作者信息
    "name": "Ryan",
    "email": "[email protected]",
    "url": "http://www.bluesdream.com/"
  },
  "licenses": [{ // 开源协议
    "type": "MIT",
    "url": "https://raw.githubusercontent.com/gulpjs/gulp/master/LICENSE"
  }],
  "devDependencies": { // 这里面的参数，指定了项目依赖的Gulp和Gulp插件版本。
    "gulp": "^3.8.11"
  }
}

4.在项目根目录下创建一个名为 gulpfile.js 的文件

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

5.运行 gulp
$ gulp
默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。
想要单独执行特定的任务（task），请输入 gulp <task> <othertask>。

动态类型

JavaScript 是一种弱类型或者说动态语言。这意味着你不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

数据类型

最新的 ECMAScript 标准定义了 7 种数据类型:

• 6 种 原始类型:
• - Boolean
• - Null
• - Undefined
• - Number
• - String
• - Symbol (ECMAScript 6 新定义)
• - 和 Object

typeof 检测数据类型

typeof用来检测给定变量的数据类型，返回下列某个==字符串==：

• "boolean" --- 变量是布尔值（true／false）
• "undefined" --- 变量未定义
• "string" --- 变量是字符串
• "number" --- 变量是数值
• "function" --- 变量是函数
• "object" --- 变量是对象或null
• "symbol" --- 变量是Symbol

有这样一道题目，考察 typeof 返回值类型。

typeof(typeof(new Date())) //string

但是在实际项目中，typeof 也只是用来判断变量是undefined 和 function。
因为很多类型不能精确的判断出来，例如：

注意
typeof /s/ ===function; // Chrome 1-12 , 不符合 ECMAScript 5.1
typeof /s/ === object; // Firefox 5+ , 符合 ECMAScript 5.1

由上得出结论，当使用检测结果是object或function时，我们并不能看出实际的数据类型。

推荐使用 Object.prototype.toString()，结合call去实现对变量类型的精准判断。

Object.prototype.toString.call(null);      //”[object Null]”
Object.prototype.toString.call(undefined); //”[object Undefined]”
Object.prototype.toString.call(“abc”);     //”[object String]”
Object.prototype.toString.call(123);       //”[object Number]”
Object.prototype.toString.call(true);      //”[object Boolean]”

简单封装如下：

function _typeof(obj){

   if(typeof obj == object || typeof obj == function){
    var type =Object.prototype.toString.call(obj).split("")[1].toLowerCase();
    return type.match(/[a-z]/g).join("");  //正则去除字符串的］
  }

  return typeof obj; 

}

上面代码在标准浏览器中可以完全兼容，但是IE6（虽然现在不必兼容，也要了解下）中，却会出现以下问题：

_typeof(null);        //object
_typeof(undefined);   //object

原因在于IE6下

Object.prototype.toString.call(undefined);  //”[object Object]”
Object.prototype.toString.call(null);       //”[object Object]”

所以要先添加判断，使用String()对象将 undefined，null转为字符串。
代码如下：

function _typeof (obj){

//注意到这里是 == 而不是 === ，
//undefined 值是派生自 null 值的，所以null == undefined 返回true 
if(obj == null){
    return String(obj)
}

if(typeof obj == "object"; || typeof obj == "function"){
  var type =Object.prototype.toString.call(obj).split(" ")[1].toLowerCase();
  return type.substring(0,type.length-1); 
}

return typeof obj; 

}

String()函数遵循下列转换规则:
如果值有 toString()方法,则调用该方法(没有参数)并返回相应的结果;
如果值是 null,则返回"null";
如果值是 undefined,则返回"undefined"。

这样对 typeof 的扩展就封装好了。代码还有优化空间，这里不再继续。

jquery已经实现了类型检测的封装，jquery.type()的内部实现如下：

//实例对象是能直接使用原型链上的方法的
var class2type = {};
var toString = class2type.toString;

jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
  class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

$.type = function( obj ) {
  //如果是null或者undefined，直接转成String返回
  //注意到这里是==而不是===，
  //undefined 值是派生自 null 值的，所以null == undefined 返回true 
  if ( obj == null ) {
    return String( obj );
  }
  //当typeof 返回 object或function， 进入core_toString 
  return typeof obj === "object" || typeof obj === "function" ?
    class2type[ core_toString.call(obj) ] || "object":
    typeof obj;
},

Undefined

Undefined 类型只有一个值,即特殊的 undefined。在使用 var 声明变量但未对其加以初始化时,这个变量的值就是 undefined，例如：

var foo;
alert(foo == undefined);  //true

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。
典型用法是：

1. 变量被声明了，但没有赋值时，就等于 undefined。
2. 调用函数时，应该提供的参数没有提供，该参数等于 undefined。
3. 对象没有赋值的属性，该属性的值为 undefined。
4. 函数没有返回值时，默认返回 undefined。

var name;
alert(name) // undefined

function f(x){console.log(x)}
f() // undefined

var  o = new Object();
alert(o.p) // undefined

var x = f();
alert(x) // undefined

Null

Null 类型是第二个只有一个值的数据类型,这个特殊的值是 null。
如果定义的变量准备在将来用于保存对象,那么最好将该变量初始化为 null。

null 有时会被当作一种对象类型，但是这其实只是语言本身的一个bug，即对 null 执行 typeof null 时会返回字符串"object"。

原理是这样的，不同的对象在底层都表示为二进制，在JavaScript中二进制前三位都为0的话会被判断为object类型，null的二进制表示是全0，自然前三位也是0，所以执行 typeof 时会返回“object”。——《你不知道的JavaScript》

使用null的情况:

1.DOM,试图获取一个不存在的元素返回一个null值，而不是undefined。
2.初始化一个对象的值，一般设为null。
3.通过分配null值，有效地清除引用，并假设对象没有引用其他代码，指定垃圾收集，确保回收内存。