gulp构建

2017-01-01 本文已影响0人 GarenWang

问答

Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引擎执行Javascript的速度非常快，性能非常好。Node.js对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。
Node.js是一个基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动，非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。
特性
1.单线程
2.非阻塞IO
3.事件驱动
4.RESTful API
5.V8虚拟机
应用：
1.Web开发：Express + EJS + Mongoose/MySQL
2.REST开发：Restify
3.Web聊天室(IM)：Express + Socket.io
4.Web爬虫：Cheerio/Request
5.Web博客：Hexo
6.Web论坛: nodeclub
7.Web幻灯片：Cleaver
8.前端包管理平台: bower.js
9.操作系统: node-os
10.客户端应用工具: node-webwit
nodejs的几大特性奠定了node.js开发上述应用的优势
1.动态语言：开发效率非常高，并有能力构建复杂系统，如ql.io。
2.性能和I/O负载：Nodejs非常好的解决了IO密集的问题，通过异步IO来实现。
3.连接的内存开销：每个Node.js进程可以支持超过12万活跃的连接，每个连接消耗大约2K的内存。
4.操作性：实现了Nodejs对于内存堆栈的监控系统。

npm（node package manager）是NodeJS的包管理器，能够让用户上传或下载第三方库或应用，用于node插件管理（包括安装、卸载、管理依赖等）。
全局安装可以计算机的任意目录下调用nodejs.本地安装只能在安装相应的目录下运行nodejs.
1.全局安装命令npm install gulp -g 或 npm install gulp --global
2.本地安装命令npm install gulp 或 npm install gulp --save-dev
npm install 在安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件，npm install --save 或 npm install --save-dev，区别如下：
1.--save 会把依赖包名称添加到 package.json 文件 dependencies 键下,--save-dev 则把依赖包名称添加到 package.json 文件 devDependencies 键下
2.dependencies键下的模块一般是生产环境下使用，devDependencies 键的模块一般是开发环境下使用
nodemoudle的查找路径是从当前的项目目录一直向上查找到系统的nodemoule根目录，这也解释了全局安装为什么生效

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是** Browsersync可以同时在PC、平板、手机等设备下进项调试**。
安装方式（命令行）
1.npm install browser-sync -g
2.查看版本browser-sync --version,若有版本号则表示安装成功
3.启动 BrowserSync
3.1 如果您只希望在对某个css文件进行修改后会同步到浏览器里。那么您只需要运行命令行工具，进入到该项目（目录）下，并运行相应的命令：browser-sync start --server --files "css/*.css"
3.2 如果您需要监听多个类型的文件，您只需要用逗号隔开例如我们再加入一个.html文件.browser-sync start --server --files "css/*.css, *.html"
3.3 如果您已经有其他本地服务器环境PHP或类似的，您需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站.browser-sync start --proxy "主机名" "css/*.css"
建议结合gulp或grunt来使用,效果更加

server-mock 是一个简单好用的用于前后端分离的 mock 利器，基于 express 开发，可方便的 mock 数据,和一般基于配置的 mock 工具不同，server-mock可以创建使用范例，让使用者可让使用者模仿范例简单快捷的实现需求
安装方式（npm命令）
1.全局安装npm install server-mock -g
2.安装完毕，命令行打开项目的文件，输入mock init
3.server-mock还支持页面路由解析与模板渲染，在router.js里设置好对应路由下需要展示的数据以及对应的模板文件，即可通过浏览器看到渲染后的效果
4.启动 webserver:mock start,在浏览器输入 http://localhost:8080 即可预览
参考文档：server-mock

前端构建就是实现前端性能优化自动化、工程化的过程，前端构建工具就是用来让我们不再做机械重复的事情，解放我们的双手的，比如我们会用 Less /Sass去写 CSS，会用 Jade 去写 HTML，会用 Browserify 去模块化、为非覆盖式部署的资源加 MD5 戳等,工作性质重复机械，浪费大量人力物力，前端工具就是为了解决这个问题，
常见的前端构建工具有gulp,grunt,Yeoman, WebPack等

1.使用 gulp，实现一个项目的自动化构建, 要求：