一、问答
（一）、nodejs 是什么？可以做什么？为什么擅长做？
Node.js是一种JS运行平台（不是JS应用），Node.js采用了Google Chrome浏览器的V8引擎，性能很好，同时还提供了很多系统级的API，如文件操作、网络编程等。Node.js采用事件驱动及异步编程的方式设计，这种设计理念使得Node.js的优势是：无阻塞式执行任务，充分利用了系统资源，因此其特别适合后端网络服务编程。
（二）、npm 是什么? 如何安装 node 应用？全局安装和本地安装有什么区别？ --save与--saveDev的区别？ node_module的查找依赖的路线是怎样的?
- npm是Node.js的一个包管理器，它可以让我们方便的复用他人或分享自己的第三方包或命令行程序。其目前已内置在Node.js中。
- 全局安装：npm install -g 模块名。模块会被下载到到特定的系统目录下，安装的模块能够在所有目录下使用。本地安装：npm install 模块名。模块会被下载到当前所在目录，也只能在当前目录下使用。
- npm install 在安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件，一个是npm install --save另一个是 npm install --save-dev，他们表面上的区别是--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下，譬如：
{
"name": "yo",
"version": "0.0.0",
"dependencies": {},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.0",
"grunt-contrib-compass": "~0.7.0",
"grunt-contrib-jshint": "~0.7.0",
"grunt-contrib-cssmin": "~0.7.0",
}
}
不过这只是它们的表面区别。它们真正的区别是，devDependencies 下列出的模块，是我们开发时用的，比如 我们安装 js的压缩包gulp-uglify 时，
Paste_Image.png
我们采用的是 “npm install --save-dev gulp-uglify ” （见上图）命令安装，因为我们在发布后用不到它，而只是在我们开发才用到它。dependencies 下的模块，则是我们发布后还需要依赖的模块，譬如像jQuery库或者Angular框架类似的，我们在开发完后后肯定还要依赖它们，否则就运行不了。
另外需要补充的是：
正常使用npm install时，会下载dependencies和devDependencies中的模块，当使用npm install --production或者注明NODE_ENV变量值为production时，只会下载dependencies中的模块。
- node_module查找依赖的路线是：先在当前目录下找，找不到的话就向上依次遍历，直到根目录为止。
（三）、安装browser-sync并了解它的使用方式。
我们安装完最新的node.js后：
1、安装browser-sync
命令行输入npm install -g browser-sync即可全局安装browser-sync。
2、启动服务
- a、对于静态网站
我们可以使用服务器模式：
// --files 路径是相对于运行该命令的项目（目录）
browser-sync start --server --files "css/*.css, *.html"
// 若你的文件层级比较深，您可以考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件
browser-sync start --server --files "**/*.css, **/*.html"
- b、对于动态网站
如果您已经有其他本地服务器环境PHP或类似的，您需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站。
// 主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"
在本地创建了一个PHP服务器环境，并通过绑定Browsersync.cn来访问本地服务器，使用以下命令方式，Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn，并监听其css目录下的所有css文件。
browser-sync start --proxy "Browsersync.cn" "css/*.css"
Paste_Image.png
另外开启后我们可以进入http://localhost:3001/
Paste_Image.png
查看External项的网址，在移动端输入该网址，就可实现手机与电脑间的实时同步了~ 而且在Sync Options选项中我们还可以选择 点击、滚动或点击确认键等操作是否在这些设备间进行同步。
Paste_Image.png
以下事项需要特别注意：
- 1.开启之前，记得CD到你的Html所在的目录，再开启，要不然就会出现CANNOT GET；
- 2.直接start的话，然后你的Html名称不是index.html，也会出现CANNOT GET；
- 3.并不是IDE里面写什么马上浏览器就变了，要么是点击浏览器切换到浏览器，要么在IDE里面保存一下，浏览器才会改变
关于其与gulp间的配合使用可见：
http://www.browsersync.cn/docs/gulp/
（四）、全局安装server-mock 并了解它的使用方式。
安装
npm install -g server-mock
使用
- 切换到项目文件夹
cd myTargetFolder - 初始化使用范例
mock init
此时myTargetFolder下会自动生成 index.html 、router.js、user.ejs。 其中index.html是前端静态 html，里面有 ajax 的接口调用。 router.js 是后端对应的路由处理范例文件，当mock-server启动后请求会被该文件对应的路由接口处理。 user.ejs是模板范例，当需要开发模板时可以在 router.js里渲染该模板。 - 启动 webserver
mock start
在浏览器输入 http://localhost:8080 即可预览
详细使用方法
mock start --port 3000 // 设置服务器启动端口为3000
mock start --public public //设置静态文件路径为当前文件 public 目录。默认是当前文件夹
mock start --views views //设置模板路径为当前文件 views 目录。默认是当前文件夹
mock start --tpl ejs //设置模板，支持 ejs, jade, velocity
mock start --tpl ejs --port 3000" //设置模板为ejs,端口为3000。 默认端口是8080
更具体详见：https://github.com/jirengu/server-mock
Paste_Image.png
（五）、什么是前端构建，有哪些常见的前端构建工具?
实现前端代码的编译（sass、less）、压缩、测试；图片的压缩以及浏览器自动刷新等等功能的过程就叫做前端构建。常见的前端构建工具有gulp、Grunt、webpack、Yeoman及百度的fis3。
另：除了npm，其实还有Yarn包管理工具，其与npm间的对比可见Yarn vs npm: 你需要知道的一切
二、代码
使用 gulp，实现一个项目的自动化构建, 要求：
1、项目中包括多个 css 文件, 多个 js 文件，多个图片
2、操作 src 目录，css 需要压缩合并，js 需要压缩合并，图片需要压缩，处理后放入 dist 目录
3、以下是范例，推荐构建前面的任务中包含 css js和图片的项目
+ dist
+ css
- merge.min.css
+ js
- merge.min.js
+ img
- a.png
- b.png
+ src
+ css
- a.css
- b.css
+ js
- a.js
- b.js
+ img
- a.png
- b.png
- index.html
注意事项：
1.全局安装gulp之后，再你CD到的目录之后，再npm init一下，要不然你的目录没有package.json；
2.如果不做第一步，npm install -save-dev module-name之后，只会提示你找不到package.json；
3.html中，把css和js的src都给改写成被压缩后的地址；
4.如果同时依赖模块，然后text/javascript又要去用，必须在gulpfile.js中的每一个task中加一个return，要不然你依赖模块的接口，就是未定义；
5.最后一项的任务名记得填dafault，即：gulp.task('default',['html','css','js','pic','font']);否则会报错！
6、我在压缩html时报错，但是由于html的里面的字太多把错误信息给挤掉了，后来通过body里的所有内容，发现正常，然后我再通过“二分法”，将body里的一半内容又放进去，发现是<a> < </a>及<a> > </a>（<和>是我之前设置轮播向前后切换的按钮。。。）报错，没有使用< 及> 进行转义。
7、我压缩js时报错，发现我在函数return时加了{},导致压缩js包报错。
代码预览地址：https://github.com/have-not-BUG/task/tree/master/renwu/task41/dist/index.html
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
网友评论