1.如何全局安裝一個node應(yīng)用柑蛇？
npm install name -g
全局安裝裕照，應(yīng)用被下載安裝到全局目錄中/usr/local/lib/node_modules
2.package.json有什么作用？
執(zhí)行npm init生成package.json文件，該文件對項目記錄了一些配置信息肿嘲，主要是用來進行包管理。包括name筑公、version睦刃、description、author十酣、private涩拙、scripts际长、dependencies、decDependencies兴泥。其中scripts定義模塊包的使用方式工育，dependencies和devDependencies是模塊包的依賴管理
package.json文件說明：
- scripts指定了運行腳本的npm命令行縮寫
"scripts": {
"preinstall": "echo here it comes!",
"postinstall": "echo there it goes!",
"start": "node index.js",
"test": "tap test/*.js"
}
- dependencies字段指定了項目運行所依賴的模塊，devDependencies指定項目開發(fā)所需要的模塊搓彻。
{
"devDependencies": {
"browserify": "~13.0.0",//模版名+版本
"karma-browserify": "~5.0.1"
}
}
- bin項用來指定各個內(nèi)部命令對應(yīng)的可執(zhí)行文件的位置如绸。
"bin": {
"someTool": "./bin/someTool.js"
}
- main字段指定了加載的入口文件，require（‘moduleName’）就會加載這個文件旭贬。這個字段的默認值是模塊根目錄下面的index.js怔接。
- name：項目名稱
- version：版本
- description：描述說明
- keywords：關(guān)鍵字
3.npm install --save app與 npm install --save-dev app有什么區(qū)別?
首先要區(qū)分dependencies和devDependencies。前者是項目開發(fā)環(huán)境必需的依賴稀轨，后者是方便于項目使用開發(fā)的工具如腳手架工具扼脐、測試工具等。
相同：都會在項目下的node_modules目錄下下載app
不同：在往package.json文件寫依賴時
--save 會寫在dependencies下
--save-dev 會寫在devDependencies下
4.node_modules的查找路徑是怎樣的?
在node.js中奋刽，模塊分為內(nèi)建模塊瓦侮，本地模塊，node_module模塊
當我們require一個模塊時佣谐，先查找是否為內(nèi)建模塊肚吏，然后是否為本地模塊，最后查找是否為node_module模塊
當require的模塊既不是內(nèi)建模塊狭魂，也不是本地模塊罚攀，且在當前目錄中的node_module中也找不到時，就會向上查找上一級的node_module雌澄，一直到根目錄
當文件標識不以'./ ../'開頭斋泄，則跳過本地模塊查找，直接在node_module中查找掷伙。
5.webpack是什么是己？和其他同類型工具比有什么優(yōu)勢？
webpack是一個模塊加載器和打包工具任柜，它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源卒废。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載宙地。通過 loader 的轉(zhuǎn)換摔认，任何形式的資源都可以視作模塊，比如 CommonJs 模塊宅粥、 AMD 模塊参袱、 ES6 模塊、CSS、圖片抹蚀、 JSON剿牺、Coffeescript、 LESS 等环壤。
優(yōu)勢：
- 對CommonJS晒来、AMD、ES6的語法兼容
- 對js郑现、css湃崩、圖片等資源文件都支持打包
- 串聯(lián)式模塊加載器以及插件機制，讓其具有更好的靈活性和擴展性接箫，例如提供對CoffeeScript攒读、ES6的支持
- 有獨立的配置文件webpack.config.js
- 可以將代碼切割成不同的chunk，實現(xiàn)按需加載辛友，降低了初始化時間
- 支持 SourceUrls 和 SourceMaps薄扁，易于調(diào)試
- 具有強大的Plugin接口，大多是內(nèi)部插件瞎领，使用起來比較靈活
- webpack 使用異步 IO 并具有多級緩存泌辫。這使得 webpack 很快且在增量編譯上更加快
6.npm script是什么随夸？如何使用九默？
npm script允許在package.json中使用scripts字段定義腳本命令
"scripts" : {
"test": "echo hello"，
"build": “npm install -g package”
}
執(zhí)行npm run build命令就等于執(zhí)行npm install -g package命令宾毒。
7.使用 webpack
8.gulp是什么驼修？使用 gulp 實現(xiàn)圖片壓縮、CSS 壓縮合并诈铛、JS 壓縮合并
gulp是一個以流為基礎(chǔ)的前端自動化構(gòu)建工具乙各，可以實現(xiàn)css的壓縮合并、js壓縮合并幢竹、圖片壓縮等等
使用 gulp 實現(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
【個人總結(jié)焕毫，如有錯漏蹲坷，歡迎指出】
：>
