如何全局安裝一個(gè) node 應(yīng)用?

• npm install -g app-name

package.json有什么作用？

• package.json存儲(chǔ)在項(xiàng)目的根目錄下，保存鏈項(xiàng)目的名稱、版本、描述、關(guān)鍵字、作者等相關(guān)信息以及該項(xiàng)目的依賴信息（運(yùn)行依賴環(huán)境、開發(fā)依賴環(huán)境）

{
  "name": "demo1",      //項(xiàng)目名稱
  "version": "1.0.1",   //項(xiàng)目版本
  "description": " ",   //項(xiàng)目描述
  "main": "index.js",   //項(xiàng)目入口
  "scripts": {          //npm script 命令行
    "test":  "echo\"Eorr: no test specified\" && exit 1"
  }
  "bin": {              //項(xiàng)目執(zhí)行文件的位置
    "demo1": "./index.js"
  }
  "keyword": [          //項(xiàng)目關(guān)鍵字
    "demo1"
  ],  
  "author": "xxx",      //項(xiàng)目作者
  "license": "ISC",     //項(xiàng)目認(rèn)證信息
  "dependencies": {     //項(xiàng)目運(yùn)行依賴環(huán)境，當(dāng)安裝該項(xiàng)目時(shí)，運(yùn)行依賴環(huán)境也會(huì)安裝
    "marked": "^0.3.6"
  },
  "devDependencies": {  //項(xiàng)目開發(fā)依賴環(huán)境，只在本地測試有效，安裝該項(xiàng)目時(shí)，開發(fā)依賴環(huán)境不會(huì)安裝
    "easytpl": "^1.0.4"
  }
}

npm install --save app 與 npm install --save-dev app有什么區(qū)別?

• npm install --save app將項(xiàng)目運(yùn)行時(shí)需要的依賴環(huán)境下載到package.json的dependencies中，項(xiàng)目發(fā)布之后還要繼續(xù)使用。
• npm install --save-dev app將項(xiàng)目的開發(fā)依賴環(huán)境下載到package.json的devDependencies中，在本地測試的時(shí)候使用，項(xiàng)目發(fā)布之后不會(huì)使用。

node_modules的查找路徑是怎樣的?

• 查找依賴的路線是：先從本地目錄下尋找，不存在就依次向上級目錄中查詢，直到系統(tǒng)根目錄。node全局安裝在系統(tǒng)根目錄下，所以全局安裝后可在所有目錄下使用。

npm3與 npm2相比有什么改進(jìn)？yarn和 npm 相比有什么優(yōu)勢?

npm3相比npm2主要改進(jìn)了依賴管理方案

• npm2安裝依賴的時(shí)候比較簡單直接，直接按照包的依賴的樹形結(jié)構(gòu)下載填充至本地目錄，缺陷在于太深的目錄樹結(jié)構(gòu)會(huì)嚴(yán)重影響效率，甚至在window下可能會(huì)超出系統(tǒng)路徑限制的長度，另外有刪node_modules目錄經(jīng)歷的可能都漫長的等待。

• 針對 npm2 的問題，npm3 加了點(diǎn)算法，直白的解釋就是：npm install 時(shí)會(huì)按照 package.json 里依賴的順序依次解析，遇到新的包就把它放在第一級目錄，后面如果遇到一級目錄已經(jīng)存在的包，會(huì)先判斷版本，如果版本一樣則忽略，否則會(huì)按照 npm2 的方式依次掛在依賴包目錄下。
  在包版本差異化不太嚴(yán)重的情況下，這種構(gòu)建方式會(huì)幾乎把所有包放在一級目錄下，很大程度下提升了效率以及節(jié)省了部分磁盤空間。

• yarn優(yōu)點(diǎn)在于只要通過Yarn安裝過的套件都會(huì)在本地目錄產(chǎn)生Cache，也就是說只要安裝過一次，下次重新安裝都會(huì)從Cache重新讀取， 安裝速度會(huì)提升很多。

webpack是什么？和其他同類型工具比有什么優(yōu)勢？

• webpack是一款模塊加載器兼打包工具，它能把各種資源JS/CSS/圖片等都作為模塊來使用和處理。

優(yōu)勢如下：

• webpack 是以 commonJS 的形式來書寫腳本，但對 AMD/CMD 的支持也很全面，方便舊項(xiàng)目進(jìn)行代碼遷移。
  webpack可以將代碼拆分成多個(gè)區(qū)塊，每個(gè)區(qū)塊包含一個(gè)或多個(gè)模塊，它們可以按需異步加載，極大地減少了頁面初次加載時(shí)間。
• webpack 本身只能處理原生的 JS 模塊，但是 loader 轉(zhuǎn)換器可以將各種類型的資源轉(zhuǎn)換成 JS 模塊。這樣，任何資源都可以成為 webpack 可以處理的模塊。
• webpack 有一個(gè)智能解析器，幾乎可以處理任何第三方庫，無論它們的模塊形式是 CommonJS、 AMD 還是普通的 JS 文件。
• webpack 還有一個(gè)功能豐富的插件系統(tǒng)。大多數(shù)內(nèi)容功能都是基于這個(gè)插件系統(tǒng)運(yùn)行的，還可以開發(fā)和使用開源的 -
• webpack 插件，來滿足各式各樣的需求。
• webpack使用異步 I/O 和多級緩存提高運(yùn)行效率，使得它能夠快速增量編譯。

npm script是什么？如何使用？

npm script 是供 npm 使用的腳本命令，儲(chǔ)存于package.json 內(nèi)的 scripts 字段內(nèi)

要使用 npm script ，只需執(zhí)行命令npm run <command>即可，部分 npm 內(nèi)置的關(guān)鍵字（如 start 、 test 等）可以省略 run

使用 webpack 替換 入門-任務(wù)15中模塊化使用的 requriejs

代碼地址

gulp是什么？使用 gulp 實(shí)現(xiàn)圖片壓縮、CSS 壓縮合并、JS 壓縮合并

• gulp是前端開發(fā)過程中對代碼進(jìn)行構(gòu)建的工具，是自動(dòng)化項(xiàng)目的構(gòu)建利器
• 不僅能對網(wǎng)站資源進(jìn)行優(yōu)化，而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成。
• gulp是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器， 能自動(dòng)化地完成javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合并、壓縮、格式化、瀏覽器自動(dòng)刷新、部署文件生成，并監(jiān)聽文件改動(dòng)。

//安裝插件
npm install gulp-imagemin --save-dev //圖片壓縮
npm install gulp-cssnano --save-dev //css壓縮
npm install uglify --save-dev //js壓縮
npm install gulp-jshint --save-dev //js規(guī)范檢查
npm install gulp-concat --save-dev //文件合并
npm install gulp-rename --save-dev //重命名

//gulpfile.js
//引入插件
var gulp = require('gulp'),
    cssnano = require('gulp-cssnano'),
    concat = require('gulp-concat'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
 
  //css合并壓縮
  gulp.task('build:css', function() {
      gulp.src('./src/css/*.css')
        .pipe(concat('merge.css'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(cssnano())
        .pipe(gulp.dest('dist/css/'));
  })

  //js合并壓縮
   gulp.task('build:js', function() {
      gulp.src('src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('merge.js'))
        .pipe(rename({
          suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js/'));
  })

  //圖片壓縮
  gulp.task('build:image', function() {
      gulp.src('src/imgs/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/imgs/'));
  })

gulp.task('build', ['build:css', 'build:js', 'build:image']);

//命令行
gulp build