- npm的使用
- 開發(fā)node應(yīng)用
- gulp介紹及實(shí)踐
- npm scripts打造前端工作流
- webpack

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

npm install -g xxx,模塊將會(huì)安裝在電腦的全局目錄中，安裝的模塊能夠在所有目錄下使用。

npm install express # 本地安裝
npm install express -g # 全局安裝
本地安裝

1. 將安裝包放在 ./node_modules 下（運(yùn)行 npm 命令時(shí)所在的目錄），如果沒有 node_modules 目錄，會(huì)在當(dāng)前執(zhí)行 npm 命令的目錄下生成 node_modules 目錄。
2. 可以通過(guò) require() 來(lái)引入本地安裝的包。 

全局安裝

1. 將安裝包放在 /usr/local 下或者你 node 的安裝目錄。
2. 可以直接在命令行里使用。

如果你希望具備兩者功能，則需要在兩個(gè)地方安裝它或使用 npm link。

2、package.json 有什么作用？####

每個(gè)項(xiàng)目的根目錄下面，一般都有一個(gè)package.json文件，定義了這個(gè)項(xiàng)目所需要的各種模塊，以及項(xiàng)目的配置信息（比如名稱、版本、許可證等元數(shù)據(jù)）。npm install命令根據(jù)這個(gè)配置文件，自動(dòng)下載所需的模塊，也就是配置項(xiàng)目所需的運(yùn)行和開發(fā)環(huán)境。

下面是一個(gè)更完整的package.json文件：

{
"name": "Hello World",
"version": "0.0.1",
"author": "張三",
"description": "第一個(gè)node.js程序",
"keywords":["node.js","javascript"],
"repository": {
    "type": "git",
    "url": "https://path/to/url"
},
"license":"MIT",
"engines": {"node": "0.10.x"},
"bugs":{"url":"http://path/to/bug","email":"bug@example.com"},
"contributors":[{"name":"李四","email":"lisi@example.com"}],
"scripts": {
    "start": "node index.js"
},
"dependencies": {
    "express": "latest",
    "mongoose": "~3.8.3",
    "handlebars-runtime": "~1.0.12",
    "express3-handlebars": "~0.5.0",
    "MD5": "~1.2.0"
},
"devDependencies": {
    "bower": "~1.2.8",
    "grunt": "~0.4.1",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-jshint": "~0.7.2",
    "grunt-contrib-uglify": "~0.2.7",
    "grunt-contrib-clean": "~0.5.0",
    "browserify": "2.36.1",
    "grunt-browserify": "~1.3.0",
}
}

package.json文件可以手工編寫，也可以使用npm init命令自動(dòng)生成。

$ npm init

有了package.json文件，直接使用npm install命令，就會(huì)在當(dāng)前目錄中安裝所需要的模塊。

$ npm install

如果一個(gè)模塊不在package.json文件之中，可以單獨(dú)安裝這個(gè)模塊，并使用相應(yīng)的參數(shù)，將其寫入package.json文件之中。

$ npm install express --save
$ npm install express --save-dev

• 上面代碼表示單獨(dú)安裝express模塊，--save參數(shù)表示將該模塊寫入dependencies屬性，--save-dev表示將該模塊寫入devDependencies屬性。*

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

- 他們表面上的區(qū)別是--save 會(huì)把依賴包名稱添加到 package.json 文件 dependencies 鍵下；
--save-dev 則添加到 package.json 文件 devDependencies 鍵下；

- 其實(shí)它們真正的區(qū)別是，devDependencies 下列出的模塊，是我們開發(fā)時(shí)用的；
- dependencies 下的模塊，則是我們發(fā)布后還需要依賴的模塊，譬如像jQuery庫(kù)或者Angular框架類似的，我們?cè)陂_發(fā)完后后肯定還要依賴它們，否則就運(yùn)行不了。

4、nodule_modules的查找路徑是怎樣的?####

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

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

webpack是一個(gè)module bundler(模塊打包工具)，其可以兼容多種js書寫規(guī)范，且可以處理模塊間的依賴關(guān)系，具有更強(qiáng)大的js模塊化的功能。Webpack對(duì)它們進(jìn)行統(tǒng)一的管理以及打包發(fā)布。

優(yōu)勢(shì)：
1. 對(duì) CommonJS 、 AMD 、ES6的語(yǔ)法做了兼容
2. 對(duì)js、css、圖片等資源文件都支持打包
3. 串聯(lián)式模塊加載器以及插件機(jī)制，讓其具有更好的靈活性和擴(kuò)展性，例如提供對(duì)CoffeeScript、ES6的支持
4. 有獨(dú)立的配置文件webpack.config.js
5. 可以將代碼切割成不同的chunk，實(shí)現(xiàn)按需加載，降低了初始化時(shí)間
6. 支持 SourceUrls 和 SourceMaps，易于調(diào)試
7. 具有強(qiáng)大的Plugin接口，大多是內(nèi)部插件，使用起來(lái)比較靈活
8.webpack 使用異步 IO 并具有多級(jí)緩存。這使得 webpack 很快且在增量編譯上更加快

7、npm script是什么？如何使用？####

npm script允許在package.json中使用scripts字段定義腳本命令。

{
  //...
  "scripts": {
       "run": "npm install -g npm"
  }
}

執(zhí)行npm run命令就等同于執(zhí)行npm install -g npm命令。

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

代碼
預(yù)覽

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

• gulp是一個(gè)自動(dòng)化構(gòu)建工具,開發(fā)者可以使用它在項(xiàng)目開發(fā)過(guò)程中自動(dòng)執(zhí)行常見任務(wù)

• 使用 gulp 實(shí)現(xiàn)圖片壓縮、CSS 壓縮合并、JS 壓縮合并:

  1. 安裝壓縮插件
      安裝圖像壓縮插件
      npm install gulp-imagemin --save-dev
      安裝文件合并插件
      npm install gulp-concat --save-dev
      安裝css壓縮插件
      npm install gulp-cssnano --save-dev
      安裝js規(guī)范檢查插件
      npm install jshint gulp-jshint --save-dev
      安裝js壓縮插件
      npm install uglify --save-dev
  
  2. 載入插件
    var gulp = require('gulp');
    var cssnano = require('gulp-cssnano');
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify'); // js壓縮
    var imagemin = require('gulp-imagemin'); // image壓縮
    var jshint = require('gulp-jshint'); // js代碼規(guī)范性檢查
  
  3. 定義任務(wù)
     定義css合并壓縮任務(wù)
     gulp.task('build:css', function() {
         gulp.src('./src/css/*.css')
             .pipe(concat('index-merge.css'))
            .pipe(cssnano())
            .pipe(gulp.dest('dist/css/')); // 
     })
  
    定義js合并壓縮任務(wù)
     gulp.task('build:js', function() {
        gulp.src('src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('merge.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js/'));
    })
  
     定義圖片壓縮任務(wù)
    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']);
  
   4. 執(zhí)行任務(wù)
     在命令行中執(zhí)行命令:
     gulp build