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

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