### Node.Js入门教程
---
> 简单的说 Node.js 就是运行在服务端的 JavaScript,起初段定位是后端开发语言,由于技术的不够成熟,一般小型项目会完全使用node.js作为后台支撑,大项目中,运行不够稳定,不会轻易使用。具有高并发优良特性,Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。
> node.js 现在今可以替换很多小型的php项目 ,但是虽然定位为后端语言,但常用于前后端但中间件,例如用于搭建前端服务器,用于替换代理请求等,前端工程化的工具环境等使用。
我们作为前端,需要掌握什么东西?
掌握node.js基本使用,前期不是为了开发后端,主要能够掌握其常规语法,和基础的内置的功能,能够满足一个前端对于前端工具的使用。(不懂语法规范,那么就没有办法去使用前端自动化各种工具)
---
浏览器中的javascript:主要是window窗口中都一些基于事件、DOM操作等功能
后端中NodeJS:不存在window对象与DOM操作,窗口事件
共同特性:都遵循着ECMAScript都标准语法规范
node中没有window对象,它有一个自己的全局对象:global
## #
主要模块:
1.fs 文件操作
目录的创建与删除
文件的读取写入
重命名...
2.http ,http服务 ,创建服务器
response 响应
request 请求
3.global 全局对象(类似于window对象)
4.module(commonJS模块开发工具)
阮一峰node简化教程 :http://javascript.ruanyifeng.com/nodejs/fs.html
可以使用Express 框架快速搭建一个后台服务器
---
npm (node package manage) 简单的说就说nodejs 包管理工具。集成于nodejs的安装包上
install : 安装用于npm包管理工具安装包使用命令
如果一个基于node 环境的项目,都会具有一个package.json的项目配置文件 (包含了项目的基本信息:项目的名称、描述 、版本号、作者、依赖第三方的包,与配置)
package.json 好处可以实现项目的快速移植 ,使用 【npm install】 可以快速进行项目依赖的安装
创建项目的package.json (初始化项目):
~~~
npm init 然后后面直接按照提示按 y / n , 注意: -y 表示一切默认
~~~
安装项目依赖包:
~~~
npm install express 注意: --save 将安装记录写入到package.json的项目依赖中
~~~
卸载依赖包:
~~~
npm uninstall express
~~~
更新依赖包:
~~~
npm update express
~~~
搜索依赖包:
~~~
npm search express
~~~
---
#### 前端工程化
通俗:“什么叫工程化,大概就是能有个方法,让一大堆人,有组织有纪律地一起干活,目的是提高效率,保证质量。 ”
提高效率:使用【前端自动化工具】,完成项目端各项处理工作(less编译,css压缩,补充前缀,js压缩,合并,雪碧图生成...等等静态资源端处理)
###### 1.项目包管理工具
1) npm( node package mananger) nodejs 自带node包管理工具
2)bower 前端各类插件库管理工具 (第三方的,使用时,需要先安装bower)
##### 2.项目构建工具
1)gulp:(推荐)基于任务的项目构建工具,可以实现:搭建前端服务器,项目静态资源文件的处理(js,css,图片等) ,使用简单,上手简单(中小型项目)
2)grunt:出于gulp之前,使用简易,与gulp相似
3).Browserify 项目的模块打包工具,功能也可以实现对静态资源的处理,及打包。(逐渐淘汰的玩意)
4).webpack:(热门+主流) 具有所有gulp的功能+ 模块管理 ,打包 ,学习有难度,一般的中大型项目,比较依赖
5)rollup.js (打包工具)
现在主流的前端框架: vue 、 React 、Angular 理想的开发环境,都是基于webpack的。
---
##### Gulp使用
中文官网手册:https://www.gulpjs.com.cn/
1.安装(全局安装 + 项目目录安装)
~~~
npm install gulp -g (全局安装)
~~~
2.项目依赖安装
~~~
npm install gulp --save-dev (安装到项目文件目录)
~~~
3.在项目根目录下创建一个gulpfile.js 文件(所有gulp任务的清单文件)
4.需要配置任务(gulpfile.js文件中添加)
~~~
const gulp = require("gulp");//引入gulp
//创建任务 , 配置一个编译less文件的任务
gulp.task("Test",function(){
console.log("Test任务执行中....");
})
~~~
5.安装各种需要使用的插件 ( 此处以 gulp-less为例)
~~~
npm install gulp-less --save-dev
~~~
6.使用工具实现任务
~~~
//gulp 工具默认执行任务的清单文件
const gulp = require("gulp");//引入gulp
const less = require("gulp-less");//引入gulp-less插件
//创建任务 , 配置一个编译less文件的任务
gulp.task("less",function(){
//先通过src()方法 匹配到需要执行处理的文件
gulp.src("./src/style/**/*.less")
.pipe(less())
.pipe(gulp.dest("./dist/css/"));
})
~~~
7.执行任务
~~~
gulp 任务名称 (如果不加名称,则执行task 中名字为default 的任务)
~~~