npm/gulp

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的冰山一角，真正使用还得根据不同的需求去寻找合适的插件。