1： 如何全局安裝一個(gè) node 應(yīng)用?
npm install -g app
2： package.json 有什么作用髓考？
相當(dāng)于你本地項(xiàng)目的一個(gè)文檔說(shuō)明涨享。
允許你指定你項(xiàng)目中所使用的node包的版本铛绰。
構(gòu)建你的項(xiàng)目更加容易浙垫，便于給其他人共享兜畸。
{
"name": "my_package", //你的項(xiàng)目名稱疫鹊，全部小寫拆吆，不能有空格砌庄，一個(gè)單詞娄昆，允許-和_.
//如果是要發(fā)布自己的node插件，一般用github上面項(xiàng)目名稱缝彬。
"version": "1.0.0", //你的項(xiàng)目版本號(hào)萌焰，最好遵守 GNU 版本號(hào)管理。
"main": "index.js", //目錄中啟動(dòng)文件名稱谷浅“歉或者稱之為入口文件，一般都是 index.js
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
//一般默認(rèn)一個(gè)test的空文件夾一疯、用作寫測(cè)試代碼撼玄。
},
"keywords": [], //項(xiàng)目的關(guān)鍵詞。 一般用不到墩邀，發(fā)布npm才用得到掌猛。
"author": "ag_dubs", //作者名稱
"license": "ISC", //協(xié)議
"repository": { // 用來(lái)存放到 版本管理遠(yuǎn)程服務(wù)。 發(fā)布npm才有用
"type": "git",
"url": "https://github.com/ashleygwilliams/my_package.git"
},
"dependencies": { // 正式使用時(shí)眉睹，依賴的包
"my_dep": "^1.0.0"
},
"devDependencies" : {//開發(fā)或者測(cè)試時(shí)荔茬，依賴的包。
"my_test_framework": "^3.1.0"
}
"bugs": { //同repository
"url": "https://github.com/ashleygwilliams/my_package/issues"
},
"homepage": "https://github.com/ashleygwilliams/my_package"
//項(xiàng)目主頁(yè)竹海、 發(fā)布才有用
}
一般情況慕蔚，如果是自己的項(xiàng)目，特別是前端的人斋配，會(huì)使用到gulp或者grunt來(lái)打包自己的項(xiàng)目孔飒，并且一般不會(huì)吧node_modules上傳到git上面，所以需要package來(lái)管理自己打包所需的插件许起，以便于項(xiàng)目中其他人員共享十偶，這個(gè)文件的好處就是一個(gè)人添加某個(gè)插件后，更改了這個(gè)文件园细，其他人員只需要同步此文件，然后執(zhí)行npm install命令接校，即可安裝同樣的包猛频。
3： npm install --save app 與 npm install --save-dev app有什么區(qū)別?
--save 會(huì)把依賴包名稱添加到 package.json 文件 dependencies 鍵下狮崩，--save-dev 則添加到 package.json 文件 devDependencies 鍵下
區(qū)別是，devDependencies 下列出的模塊鹿寻，是我們開發(fā)時(shí)用的睦柴；dependencies 下的模塊，則是我們發(fā)布后還需要依賴的模塊毡熏，譬如像jQuery庫(kù)或者Angular框架類似的坦敌，我們?cè)陂_發(fā)完后后肯定還要依賴它們，否則就運(yùn)行不了痢法。
4： node_modules的查找路徑是怎樣的?
node_modules的查找路徑：先從本地目錄下尋找狱窘，不存在就依次向上級(jí)目錄中查詢，直到系統(tǒng)根目錄财搁。node全局安裝在系統(tǒng)根目錄下蘸炸，所以全局安裝后可在所有目錄下使用
5：npm3 與 npm2相比有什么改進(jìn)？
這個(gè)問(wèn)題如果在很久以前打開你的node-moudles文件夾一探究竟的同學(xué)就會(huì)有感覺(jué)尖奔，當(dāng)時(shí)里面的目錄很清晰搭儒，一個(gè)packages就是一個(gè)目錄，里面再包括自身文件和依賴包提茁。 后來(lái)有一天再打開驚呆了淹禾，里面一堆目錄，當(dāng)時(shí)覺(jué)得這很不neat茴扁，很不優(yōu)雅稀拐。google的是npm更新到了npm3之后才發(fā)現(xiàn)自己的愚蠢，我們來(lái)看一張圖丹弱。
現(xiàn)在我們看到的是npm2的包依賴的目錄構(gòu)成形式德撬，很容易發(fā)現(xiàn)一個(gè)問(wèn)題，如果一個(gè)鏈?zhǔn)揭蕾嚪浅Ｉ疃愀欤夸浵鄳?yīng)也會(huì)越來(lái)越深蜓洪，在我們定義css樣式的時(shí)候就接觸到一個(gè)概念: 層級(jí)查找是很慢的.
html>body>div.container>ul.gallery>li.item>img.image => 慢到爆炸!!！
同樣的遞進(jìn)目錄查找同樣慢坯苹，越深越慢隆檀。而且還會(huì)存在一個(gè)問(wèn)題，（黃色圈）當(dāng)我們的不同modules對(duì)相同的包進(jìn)行依賴時(shí)粹湃，會(huì)出現(xiàn)重復(fù)恐仑，而且很有可能它們的版本不一樣(二次開發(fā)）但他們的層級(jí)是一樣的(很不logical).
再看看npm3的扁平式目錄結(jié)構(gòu)策略： 將所有的依賴優(yōu)先放置第一級(jí)目錄(即'/node-modules'/下），看圖解釋：
APP依賴Module A
Module A 依賴 Module B ----------------- ./node-modules
Module A 依賴 Module C ----------------- ./node-modules
Module B 依賴 Module D version 1.0 ----- ./node-modules
Module C 依賴 Module D version 2.0 ----- ./node-modules/ModuleC/
很清晰：So为鳄，當(dāng)遇到版本不同時(shí)裳仆，npm3會(huì)將更高版本者放入依賴它的Module之下，層級(jí)關(guān)系映射版本關(guān)系孤钦，有種漸進(jìn)增強(qiáng)的感覺(jué)歧斟，低版本作為基礎(chǔ)依賴纯丸，版本遞進(jìn)則深入一層目錄。 而其他的不存在版本遞進(jìn)的Module一律放入第一層目錄静袖，大大減少了查找時(shí)間觉鼻，提高效率。
yarn和 npm 相比有什么優(yōu)勢(shì)?
yarn是facebook為自己的sandbox形式的開發(fā)環(huán)境創(chuàng)造的包管理器队橙，既然是sandbox坠陈，摒棄外部環(huán)境時(shí)，對(duì)于離線形式的包安裝的支持就很重要捐康，這也是它的最大特點(diǎn)： 對(duì)所有已經(jīng)安裝過(guò)的包進(jìn)行cache緩存仇矾，下次安裝這些包時(shí)直接從緩存里拉取，對(duì)比與npm對(duì)網(wǎng)絡(luò)環(huán)境的依賴吹由，yarn解決了這個(gè)痛點(diǎn)若未。
More advantages over npm:
相對(duì)于npm的隊(duì)列式安裝（當(dāng)一個(gè)包安裝完畢后才會(huì)執(zhí)行下一個(gè)），yarn支持Parallel Installation倾鲫，速度更快粗合。
yarn.lock: 這是一個(gè)版本鎖，它記錄了所有包的版本信息乌昔，也就是說(shuō)隙疚，它保證了在任何一臺(tái)設(shè)備上，你對(duì)于包的拉取安裝都是嚴(yán)格遵循這個(gè)版本信息磕道，從而保證不出現(xiàn)： But it works on my computer 這樣煩人的問(wèn)題供屉。
clean： yarn支持清理命令，可以清理node-modules目錄下的包文件溺蕉，比如一些捆綁進(jìn)入的廣告以及不必要的文件伶丐。
網(wǎng)絡(luò)恢復(fù)： 一個(gè)單獨(dú)的請(qǐng)求并不會(huì)導(dǎo)致整個(gè)安裝失敗，這些請(qǐng)求可以重試直到請(qǐng)求恢復(fù)正常疯特。
不得不說(shuō)哗魂，F(xiàn)家還是很任性的，一言不合就造個(gè)輪子給自己用漓雅，而且還比市面的大輪子更好.
6： webpack是什么录别？和其他同類型工具比有什么優(yōu)勢(shì)？
Webpack 是當(dāng)下最熱門的前端資源模塊化管理和打包工具邻吞。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源组题。還可以將按需加載的模塊進(jìn)行代碼分隔，等到實(shí)際需要的時(shí)候再異步加載抱冷。通過(guò) loader 的轉(zhuǎn)換崔列，任何形式的資源都可以視作模塊，比如 CommonJs 模塊徘层、 AMD 模塊峻呕、 ES6 模塊利职、CSS趣效、圖片瘦癌、 JSON、Coffeescript跷敬、 LESS 等讯私。
優(yōu)勢(shì):
- 對(duì) CommonJS 、 AMD 西傀、ES6的語(yǔ)法做了兼容
- 對(duì)js斤寇、css、圖片等資源文件都支持打包
- 串聯(lián)式模塊加載器以及插件機(jī)制拥褂，讓其具有更好的靈活性和擴(kuò)展性娘锁，例如提供對(duì)CoffeeScript、ES6的支持
- 有獨(dú)立的配置文件webpack.config.js
- 可以將代碼切割成不同的chunk饺鹃，實(shí)現(xiàn)按需加載莫秆，降低了初始化時(shí)間
- 支持 SourceUrls 和 SourceMaps，易于調(diào)試
- 具有強(qiáng)大的Plugin接口悔详，大多是內(nèi)部插件镊屎，使用起來(lái)比較靈活
- webpack 使用異步 IO 并具有多級(jí)緩存。這使得 webpack 很快且在增量編譯上更加快
7：npm script是什么茄螃？如何使用缝驳？
npm script 是 package.json 中的一個(gè)屬性，可以在這個(gè)屬性中自定義npm命令腳本归苍，簡(jiǎn)化操作用狱。
"scripts": {
"run": "npm install -g npm",
"webpack":"webpack",
"start":"npm run build"
}
在package.json的scripts內(nèi)添加鍵值對(duì)("name":"命令")，之后便可以使用了拼弃。
命令可以是命令行命令夏伊，npm程序，也可以是scripts內(nèi)自定義的命令肴敛。
start和test命令可以不用加run署海，直接輸入npm start/npm test即可操作，其他自定義命令設(shè)置完成医男，在終端內(nèi)便可以通過(guò)npm run name來(lái)執(zhí)行砸狞。
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 壓縮合并.
var gulp = require('gulp')
var cssnano = require('gulp-cssnano'), //css壓縮
uglify = require('gulp-uglify'), //js壓縮
concat = require('gulp-concat'), //合并文件
rename = require('gulp-rename'), //重命名
clean = require('gulp-clean'), //清空文件夾
minhtml = require('gulp-htmlmin'), //html壓縮
jshint = require('gulp-jshint'), //js代碼規(guī)范檢查
imagemin = require('gulp-imagemin') //圖片壓縮
gulp.task('html', function() {
return gulp.src('src/*.html')
.pipe(minhtml({ collapseWhitespace: true }))
.pipe(gulp.dest('dist'))
})
gulp.task('css', function() {
return gulp.src('src/css/*.css')
.pipe(concat('merge.min.css'))
.pipe(cssnano())
.pipe(gulp.dest('dist/css/'))
})
gulp.task('js', function() {
return gulp.src('src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('merge.js'))
.pipe(rename({
suffix: '.min' //換個(gè)名字
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js/'))
})
gulp.task('img', function() {
return gulp.src('src/imgs/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/imgs/'))
})
gulp.task('clear', function() {
return gulp.src('dist/*', { read: false })
.pipe(clean())
})
gulp.task('build', ['html', 'css', 'js', 'img'])
//命令行
gulp build
