<commit_before>---
layout: post
title:  "NodeJs前端工程化基础——框架搭建"
date:   2016-01-25
categories: frontend
permalink: /frontend/IECompatible
---

> 前端工程化已经不是什么新鲜事了，今天就来记录一下一个工程化解决方案，NodeJs + gulp 环境的搭建。

## 一、下载安装NodeJs
官网： [https://nodejs.org/en/](https://nodejs.org/en/)  
中文网： [http://nodejs.cn/](http://nodejs.cn/)  
根据自己的系统，找一个自己喜欢的版本下载安装就可以了，下面是一段摘自官网的介绍  

```
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. 
Node.js uses an event-driven, non-blocking I/O model that makes it light
weight and efficient. Node.js' package ecosystem, npm, is the largest 
ecosystem of open source libraries in the world.
```
```
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一
个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是
全球最大的开源库生态系统。
```
`注意：本文以windows为例，下载的64位安装包 v5.5.0 Stable`

## 二、使用npm

### 简介：

> Node Package Manager  
NPM的全称是Node Package Manager[1]  ，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。
如果你熟悉ruby的gem，Python的pypi、setuptools，PHP的pear，那么你就知道NPM的作用是什么了。
Nodejs自身提供了基本的模块，但是开发实际应用过程中仅仅依靠这些基本模块则还需要较多的工作。幸运的是，Nodejs库和框架
为我们提供了帮助，让我们减少工作量。但是成百上千的库或者框架管理起来又很麻烦，有了NPM，可以很快的找到特定服务要使用
的包，进行下载、安装以及管理已经安装的包。*摘自百度百科*

1. 测试node是否安装成功。*测试安装是否成功都可以用 -v 命令*  
    `node -v`  
    如果报错，可以先尝试重启cmd工具，再不行，检查node的安装目录是否添加到环境变量中。
2. 安装cnpm。由于npm的服务器在国外，二国内网络环境，导致访问npm的速度有些慢，所以就有了cnpm，是淘宝对npm的镜像。
只起到加速的作用，安全可靠。  
    `npm install -g cnpm`
    <commit_msg>NodejsFrontend<commit_after>---
layout: post
title:  "NodeJs前端工程化基础——框架搭建"
date:   2016-01-25
categories: frontend
permalink: /frontend/NodejsFrontend
---

> 前端工程化已经不是什么新鲜事了，今天就来记录一下一个工程化解决方案，NodeJs + gulp 环境的搭建。

## 一、下载安装NodeJs
官网： [https://nodejs.org/en/](https://nodejs.org/en/)  
中文网： [http://nodejs.cn/](http://nodejs.cn/)  
根据自己的系统，找一个自己喜欢的版本下载安装就可以了，下面是一段摘自官网的介绍  

```
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. 
Node.js uses an event-driven, non-blocking I/O model that makes it light
weight and efficient. Node.js' package ecosystem, npm, is the largest 
ecosystem of open source libraries in the world.
```
```
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一
个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是
全球最大的开源库生态系统。
```
`注意：本文以windows为例，下载的64位安装包 v5.5.0 Stable`

## 二、使用npm

### 简介：

> Node Package Manager  
NPM的全称是Node Package Manager[1]  ，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。
如果你熟悉ruby的gem，Python的pypi、setuptools，PHP的pear，那么你就知道NPM的作用是什么了。
Nodejs自身提供了基本的模块，但是开发实际应用过程中仅仅依靠这些基本模块则还需要较多的工作。幸运的是，Nodejs库和框架
为我们提供了帮助，让我们减少工作量。但是成百上千的库或者框架管理起来又很麻烦，有了NPM，可以很快的找到特定服务要使用
的包，进行下载、安装以及管理已经安装的包。*摘自百度百科*

1. 测试node是否安装成功。*测试安装是否成功都可以用 -v 命令*  
    `node -v`  
    如果报错，可以先尝试重启cmd工具，再不行，检查node的安装目录是否添加到环境变量中。
    
2. 安装cnpm。由于npm的服务器在国外，二国内网络环境，导致访问npm的速度有些慢，所以就有了cnpm，是淘宝对npm的镜像。
只起到加速的作用，安全可靠。  
    `npm install -g cnpm`
    
3. node的包安装命令就是 `npm install xxx` ,如上条命令，-g表示全局安装

4. 项目初始化：`npm init`  
  `git init` 其实是初始化一个node包的命令，在这个工程里，我们将它看作一个npm的包。  
  该命令会以问答的方式填写一些东西，最后在项目文件夹中生成一个package.json文件，刚开始（联系）的时候可以一路回车。
  
5. 安装gulp: `cnpm install gulp --save-dev`   
  在cmd的运行该命令的时候，要先进入项目目录 `E:\EventNote> cnpm install gulp --save-dev`  
  在工程中安装gulp包，`--sava` 会在package.json文件中依赖项字段中添加gulp属性，`-dev`表示开发版
  
## 三、Package.json

### 简介：
 
package.json 是 Node 的一个包描述文件，用于该包在npm的行为。关于package.json的详细信息，可以参考[package.json for NPM 文件详解](http://ju.outofmemory.cn/entry/130809)。

下面是babel的package.json，可以用来参考一下

  
  ```
// package.json
{
  "name": "babel",
  "version": "6.3.26",
  "description": "Turn ES6 code into readable vanilla ES5 with source maps",
  "author": {
    "name": "<NAME>",
    "email": "<EMAIL>"
  },
  "homepage": "https://babeljs.io/",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/babel/babel/tree/master/packages/babel"
  },
  "preferGlobal": true,
  "bin": {
    "babel": "./cli.js",
    "babel-node": "./cli.js",
    "babel-external-helpers": "./cli.js"
  },
  "_id": "babel@6.3.26",
  "scripts": {},
  "_shasum": "7bf8967bd2de7c3645a107080094c2c9df706886",
  "_from": "babel@*",
  "_npmVersion": "2.14.7",
  "_nodeVersion": "4.2.2",
  "_npmUser": {
    "name": "amasad",
    "email": "<EMAIL>"
  },
  "maintainers": [
    {
      "name": "amasad",
      "email": "<EMAIL>"
    },
    // 此处删除一波贡献者
  ],
  "dist": {
    "shasum": "7bf8967bd2de7c3645a107080094c2c9df706886",
    "size": 1222,
    "noattachment": false,
    "tarball": "http://registry.npm.taobao.org/babel/download/babel-6.3.26.tgz"
  },
  "directories": {},
  "publish_time": 1450854726817,
  "_cnpm_publish_time": 1450854726817,
  "_resolved": "https://registry.npm.taobao.org/babel/download/babel-6.3.26.tgz"
}


  ```
  
## 四、使用gulp

### 简介：

> [[摘]](http://www.dbpoo.com/getting-started-with-gulp/)Gulp 是一款基于任务的设计模式的自动化工具，通过插件的配合解决全套前端解决方案，如静态页面压缩、图片压缩、JS合并、SASS同步编译并压缩CSS、服务器控制客户端同步刷新。

前面 gulp 已经安装好了，但有时候会失败，最大的可能是权限不够，可以尝试一下用“命令提示符（管理员）”即cmd的管理员版，再安装gulp。  
gulp的使用和简单，就是引用插件，使用插件。  

### 1、第一次使用：新建任务

在项目的根目录下新建一个名为 “gulpfile.js” 的文件，这是 gulp 的启动文件  

```
// gulpfile.js

// 插件引用：引用即将用的插件（依赖包）
// 类似于java中的 "import java.util.Map;" 
// 　　　 C# 中的 "using System.Web;"
var gulp = require('gulp');

gulp.task("demo",function(){
  console.log("my first gulp demo");
})
```
在当前目录下打开cmd ，运行 `gulp demo`

```
// output:

E:\EventNote>gulp demo
[22:55:16] Using gulpfile E:\EventNote\gulpfile.js
[22:55:16] Starting 'demo'...
-- my first gulp demo --
[22:55:16] Finished 'demo' after 131 μs
```

### 2、第二次使用：引用插件

其实到此，gulp 就已经入门了，后面都是gulp插件的使用。要使用一个插件，先去找到这个插件，然后看该插件的教程。插件的本质也是一个npm包，所以我们去npm的包管理网站搜索该包。  

npm 的网站 [www.npmjs.com](www.npmjs.com)

我们以 [babel](http://babeljs.io/) 插件为例 (用于解析jsx 或 es6 的插件)

1. 查找 babel：https://www.npmjs.com/package/gulp-babel

2. 安装 babel： `cnpm install --save-dev gulp-babel babel-preset-es2015`

3. gulofile.js

  ```
  var gulp = require('gulp');
  var babel = require('gulp-babel');

  gulp.task("demo",function(){
    console.log("-- my first gulp demo --");
  });

  gulp.task('es6', () => {
    return gulp.src('src/app.js')
      .pipe(babel({
        presets: ['es2015']
      }))
      .pipe(gulp.dest('dist'));
  });
  ```

4. 在根目录下新建 src/app.js 文件

  ```
  // app.js

  function printName(params) {
    let name = 'zjruan';
    console.log(name);
  }

  printName();
  ```
  
5. 在 cmd 中执行 `gulp es6`   
查看结果：（在根目录下生成一个 dist/app.js ）

  ```
  // app.js
  'use strict';

  function printName(params) {
    var name = 'zjruan';
    console.log(name);
  }

  printName();
  ```
  
### 3、举一反三

多看“一”，才能反“三”，如果有好的“一”，可以留言


{'fraction_non_alphanumeric': 0.16326530612244897, 'fraction_numerical': 0.030534351145038167, 'mean_word_length': 4.223759153783564, 'pattern_counts': {'":': 37, '<': 7, '<?xml version=': 0, '>': 15, 'https://': 8, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3872345', 'n_tokens_mistral': 3799, 'n_tokens_neox': 3973, 'n_words': 454}