nodejs 是什么?可以做什么?为什么擅长做?
JavaScript是一门脚本语言,包括围绕浏览器API的功能核心DOM,BOM以及JS的语法核心ECMAscript,所以浏览器就是JavaScript的解释器,脱离浏览器JS无法运行。
而发明node的Ryan Dahl一开始是想做一个非阻塞I/O,事件驱动的web服务器,找来找去发现Javascript历史包袱最少,语言也较为轻便于是和JS相结合(引用其语法核心ECMAscript)成为了今天的nodejs。官方解释是:NodeJS是基于chrome V8引擎的运行时。其特点为:
- 单线程(继承JavaScript的特性)
- 事件驱动(各种回调,所以必定不会锁死线程)
- 非阻塞I/O(由特性二)
由于它的这些特性,注定不能适用于CPU密集型的场景,而适用于I/O密集型的场合。所以现在NodeJs多用于做计算简单的后端处理或是中间层(来接受/发送请求,把客户的复杂请求交给纯后端去计算,同时将结果抛给前端去让其呈献给用户)。
npm 是什么? 如何安装 node 应用?全局安装和本地安装有什么区别? --save与--saveDev的区别? node_module的查找依赖的路线是怎样的?
npm(node package manager)顾名思义它是NodeJS的包管理器,能够让用户上传或下载第三方库或应用,用于node插件管理(包括安装、卸载、管理依赖等)。
安装node应用步骤:
- 首先,下载安装NodeJS(官网)
- 安装完毕后输入
node -v
以及npm -v
,如果出现版本号则安装成功。 - npm现在内置于NodeJS中,但由于服务器在USA,下载速度不稳定,所以国内可使用淘宝团队的cnpm作为替代,安装方式:在命令行输入:
npm install cnpm -g --registry=https://registry.npm.taobao.org
,同样命令行输入cnpm -v
来验证成功。如果执行该步,往下所有的npm均可用cnpm代替; - 使用npm安装插件,在命令行输入:
npm install <name> [-g][--save-dev]
(<>表示必填,[]表示选填):
name
:插件名;
-g
:全局安装。在windows系统中将会安装在C:\Users\Administrator\AppData\Roaming\npm,并且写入系统环境变量; 非全局安装:将会安装在当前定位目录;
全局安装可以通过命令行在任何地方调用它,本地安装将安装在定位目录的node_modules文件夹下,通过require()调用;
--save
:将安装信息保存在pacakge.json中,package.json是npm的项目配置文件,保存在项目根目录下。(项目开发过程中需要使用的插件大多相同,所以成功配置好package.json后应当保留,在有packge.json的当前目录下输入npm install
即可按照配置下载插件);
-dev
:将插件名版本号保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点。两者的区别在于,前者是生产环境,后者是开发环境。 - node_module的查找是从当前目录一直查找到根目录,所以这也是全局为什么能够生效的原因。
安装browser-sync并了解它的使用方式
browser-sync是一个npm上的插件,它能让浏览器快速响应即时修改的html,css,js的修改,省去了每次修改都要刷新浏览器的烦恼。
- 首先通过npm将其安装:
npm install browser-sync -g
; - 输入
browser-sync --version
,若响应版本号则表示安装成功; - 在项目文件下打开命令行输入
browser-sync start --server --files <file name>
(file name
为需要关联的文件名,若多个可用,
隔开如browser-sync start --server --files "*.css,*.html"
)。此时,该插件将自动创建端口号为3000的本地服务器,并监听关联文件的改动,对关联文件的每次改动都将直接体现至所在网页而无需刷新。 - 如果是动态网站,则需要绑定主机名,写法为:
browser-sync start --proxy "主机名" "<file name>"
; - 与gulp一起食用更佳。
全局安装server-mock 并了解它的使用方式
server-mock是用来模拟后端数据生成,方便前端写AJAX的一个小工具。
安装方法:
- 全局安装:
npm install server-mock -g
; - 安装完毕后,在项目文件的命令行中输入:
mock init
建立初始化文件; - 通过改变router.js中的代码来模拟数据,将index.html中所需的模拟方法置入自己的网页中;
- 输入:
server start
来启动服务器,地址为localhost:8000
。
具体方法mock-server
什么是前端构建,有哪些常见的前端构建工具?
提供一套工具来替代一些重复性操作,例如:我们在上线前一班会把各种文件压缩一遍,但如果突然发现了一个BUG需要回头修改,改完后需要再压缩一次才能上线。这里的压缩就是一次重复性劳动,我们完全可以用代码来让计算机自动的将文件压缩,而不是每次都需要手动压缩,所以用前端构建将大大地提高工作效率。
现在主流的工程化工具有:webpack,gulp(两者结合使用效果更好)。
gulp的简单使用
gulp是前端工程化中最便捷的工具之一,用户通过配置个性化的插件,来提高工程师的开发效率。gulp如同操作系统一般,本身不提供任何功能,只是作为底层基础,而基于gulp的插件就如同应用软件,能够实现各种功能。gulp又像是工厂的流水线,在完成其配置之后,只需要输入gulp
(默认的default配置)或是gulp xxx
(选择指定的插件),即可自动的完成所有的操作。所以,gulp的确是大大的方便!
先定一个小目标:用gulp进行一次简单的压缩操作。
1.在项目文件的根目录下输入npm init
,创建packge.json文件(可以为空)。
2.输入npm install gulp --save-dev
,此时你将在package.json文件中看到:
同时node_modules文件夹中会出现gulp文件夹。
3.安装插件
如requier-dir,gulp-concat,gulp-htmlmin等等。无论何种项目都推荐安装requier-dir,它能使项目的逻辑分层更加清晰。
4.根目录新建gulpfile.js 、 gulp文件夹
gulp文件夹里再新建一个tasks文件夹和config.js文件;
tasks文件夹里创建default.js,以及你认为所需要的执行工艺流程的js文件。
tasks文件里存放对应的任务、config.js配置任务的相关配置。
结构如下:
5.编写配置文件
- 配置gulpfile.js:
var requireDir = require('require-dir');
requireDir('./gulp/tasks', { recurse: true});
- 配置config.js(关键在于路径的正确设置,以压缩html和压缩css为例):
// gulp命令会由gulpfile.js运行,所以src和build文件夹路径如下(根目录下)
var src = './src'; //待操作的路径
var dest = './dist'; //操作完成后的路径
module.exports = {
html: { //这是单个任务名,对象中的src/dest为必须项
src: src + "/*.html",
dest: dest + "/",
settings: { //settings为可选项,其参数应当查阅具体插件的使用方法。
collapseWhitespace: true,
removeComments:true
}
},
css: {
all: src + "/**/*.css",
src: src + "/css/*.css",
dest:dest + "/css",
settings:{
}
}
}
- 配置单个任务js文件(同样以压缩html和压缩css为例):
在htmlmin.js中输入:
//添加依赖的模块
var gulp = require('gulp');
var htmlmin = require("gulp-htmlmin");
var config = require('../config').html;
//gulp的语法命令及待办事项
gulp.task('html', function(){
return gulp.src(config.src)
.pipe(htmlmin(config.settings))
.pipe(gulp.dest(config.dest))
});
在minify-css.js中输入:
//添加依赖的模块
var gulp = require("gulp"),
cssmin = require("gulp-minify-css"),
concat = require("gulp-concat");
var config = require('../config').css;
//gulp的语法命令及待办事项
gulp.task("css",function () {
return gulp.src(config.src)
.pipe(concat("merge.min.css"))
.pipe(cssmin(config.settings))
.pipe(gulp.dest(config.dest));
});
- 在default.js中将所有待办任务集中
var gulp = require('gulp');
gulp.task('default', ['html','css','image']);
6.执行gulp
大功告成,在项目文件中输入gulp
,所有的事就自动帮你做好了
这只是gulp的冰山一角,真正使用还得根据不同的需求去寻找合适的插件。