npm-npmscript-gulp-webpack

1.如何全局安装一个 node 应用?

在终端输入以下命令，即在全局安装应用，可在终端输入fanyi、webpack来执行命令

$ npm install -g fanyi
$ npm install -g webpack 

2.package.json 有什么作用？

package.json一般放置在项目的根目录下，定义这个项目所需要的各种模块，以及项目的配置信息。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。
信息

• name：项目名称
• version：项目版本
• description：描述内容
• main：主程序入口
• scripts：命令行工具，打造前端自动化流程
• dependencies：指定了项目运行所依赖的模块
• devDependencies：项目开发所需要的模块

3.npm install --save app 与 npm install --save-dev app有什么区别?

• npm install --save app在package.json中创建

"dependencies  ": {
    "app": "xxx",
}

发布之后，项目运行仍依赖这个模块，会被用户下载。

• npm install --save-dev app在package.json中创建

"devDependencies": {
    "app": "xxx",
}

开发时依赖于这个模块，项目正常运行时不需要这个模块，不会被用户所下载

4.node_modules的查找路径是怎样的?

require模块时，先在当前目录查找node_modules下的模块，如果没有，再往上一级目录中查询node_modules下的模块，层层递进，直到系统根目录。

5.npm3与 npm2相比有什么改进？

npm2 安装依赖的时候比较简单直接，直接按照包依赖的树形结构下载填充本地目录结构。
因为 npm 设计的初衷就是考虑到了包依赖的版本错综复杂的关系，同一个包因为被依赖的关系原因会出现多个版本，简单地填充结构保证了无论是安装还是删除都会有统一的行为和结构。
比如一个 App 里模块 A 和 C 都依赖 B，无论被依赖的 B 是否是同一个版本，都会生成对应结构：

npm2

npm2缺点：太深的目录树结构会严重影响效率，甚至在 Windows 下可能会超出系统路径限制的长度。

---

npm3加了点算法，直白的解释就是：npm install 时会按照 package.json 里依赖的顺序依次解析，遇到新的包就把它放在第一级目录，后面如果遇到一级目录已经存在的包，会先判断版本，如果版本一样则忽略，否则会按照 npm2 的方式依次挂在依赖包目录下。
npm3优点：这种构建方式会几乎把所有包放在一级目录下，很大程度上提升了效率以及节省了部分磁盘空间。
npm2 和 npm3 生成的结构对比：

对比图

6.webpack是什么？和其他同类型工具比有什么优势？

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。
它是高度可配置的，四个核心概念：入口(entry)、输出(output)、loader、插件(plugins)。

优点:

• 快速运行，Webpack 使用异步 I/O 和多级缓存提高运行效率
• 功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的
• Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件
• Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。

7.npm script是什么？如何使用？

npm scripts容许你在package.json文件的scripts字段定义脚本命令，通过终端使用。

"scripts": {
   "first": "node first.js", //npm run first = node firsr.js
}

8.使用 webpack 替换 入门-任务15中模块化使用的 requriejs

代码地址
预览链接

9.gulp是什么？使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并

它是前端自动化构建工作流的利器，可以使用多个插件实现代码打包、压缩、合并、检测、浏览器自动刷新等功能。

var gulp = require('gulp')
var cssnano = require('gulp-cssnano') //压缩css
var uglify = require('gulp-uglify') //压缩js
var concat = require('gulp-concat') //文件合并
var imagemin = require('gulp-imagemin') //图片压缩
gulp.task('css', function(){   //task定义一个任务，执行：gulp css
    gulp.src('./src/css/*.css') //获取该路径下的所有css文件
            .pipe(concat('index-merge.css')) //3个文件合并成一份
            .pipe(cssnano())  //压缩数据流
            .pipe(gulp.dest('./dist/css/'))  //放置文件
})
gulp.task('js', function(){
    gulp.src('./src/js/*.js')
            .pipe(concat('index-merge.js'))
            .pipe(uglify())
            .pipe(gulp.dest('./dist/js/'))
})
gulp.task('imgs', function(){
    gulp.src('./src/imgs/*.jpg')
            .pipe(imagemin())
            .pipe(gulp.dest('./dist/imgs/'))
})
gulp.task('default', ['css','js','imgs'])

test