1： 如何全局安裝一個(gè) node 應(yīng)用?
npm是一個(gè)node包管理和分發(fā)工具，有了npm，可以很快的找到特定服務(wù)要使用的包，進(jìn)行下載冰木、安裝以及管理已經(jīng)安裝的包。
node的安裝分為全局模式和本地模式笼恰。
全局安裝命令為$npm install -g moduleName踊沸。
在全局模式下，Node包會(huì)被安裝到Node的安裝目錄下的node_modules下社证。
2： package.json 有什么作用逼龟？
作用：
1.相當(dāng)于你本地項(xiàng)目的一個(gè)文檔說(shuō)明。
2.允許你指定你項(xiàng)目中所使用的node包的版本追葡。
3.構(gòu)建你的項(xiàng)目更加容易腺律，便于給其他人共享。
一個(gè)比較完整的package.json文件
{
"name": "Hello World", //項(xiàng)目名稱(chēng)（必須）
"version": "0.0.1", //項(xiàng)目版本（必須）
"author": "張三", //項(xiàng)目作者信息
"description": "第一個(gè)node.js程序", //項(xiàng)目描述（必須）
"homepage": "", //項(xiàng)目主頁(yè)
"keywords":["node.js","javascript"], //關(guān)鍵詞數(shù)組宜肉，方便在 npm search中搜索
"repository": { //項(xiàng)目資源庫(kù)
"type": "git",
"url": "https://path/to/url"
},
"license":"MIT", //項(xiàng)目許可協(xié)議
"engines": {"node": "0.10.x"}, //指定工作的node的版本
"bugs":{"url":"http://path/to/bug","email":"bug@example.com"},//項(xiàng)目的提交問(wèn)題的url和（或）郵件地址
"contributors":[{"name":"李四","email":"lisi@example.com"}], //貢獻(xiàn)者列表
"scripts": {
"start": "node index.js"
},
"dependencies": { //指定了項(xiàng)目運(yùn)行所依賴(lài)的模塊
"express": "latest",
"mongoose": "~3.8.3",
"handlebars-runtime": "~1.0.12",
"express3-handlebars": "~0.5.0",
"MD5": "~1.2.0"
},
"devDependencies": { //指定項(xiàng)目開(kāi)發(fā)所需要的模塊
"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",
}
}
3： npm install --save app 與 npm install --save-dev app有什么區(qū)別?
-save-dev 是指將包信息添加到 package.json 里的 devDependencies節(jié)點(diǎn)匀钧，表示開(kāi)發(fā)時(shí)依賴(lài)的包。
-save 是指將包信息添加到 package.json 里的dependencies節(jié)點(diǎn)谬返，表示發(fā)布時(shí)依賴(lài)的包之斯。
舉個(gè)例子
gulp，gulp-less 等等編譯js或者css的包遣铝，運(yùn)行時(shí)是不需要的佑刷，所以建議安裝到 devDependencies 莉擒，
如jade，express等包项乒，運(yùn)行時(shí)會(huì)用到啰劲，所以建議安裝到 dependencies
4： node_modules的查找路徑是怎樣的?
從當(dāng)前目錄開(kāi)始逐級(jí)向上查找node_modules
5： npm3與 npm2相比有什么改進(jìn)？yarn和 npm 相比有什么優(yōu)勢(shì)?
npm3相比npm2主要改進(jìn)了依賴(lài)管理方案
npm 2.0 時(shí)代各個(gè)模塊中的公共模塊沒(méi)有做到復(fù)用檀何，都有自己的一份依賴(lài)，這些模塊造成了很大的冗余廷支。這種方式的一大弊端就是導(dǎo)致 node_modules 的目錄層級(jí)非常的深频鉴，以至在 windows 下會(huì)出現(xiàn) node_modules 路徑過(guò)長(zhǎng)，無(wú)法刪除
npm3版本npm install 時(shí)會(huì)按照 package.json 里依賴(lài)的順序依次解析恋拍，遇到新的包就把它放在第一級(jí)目錄垛孔，后面如果遇到一級(jí)目錄已經(jīng)存在的包，會(huì)先判斷版本施敢，如果版本一樣則忽略周荐，否則會(huì)按照 npm2 的方式依次掛在依賴(lài)包目錄下
yarn和 npm 相比的優(yōu)勢(shì)
- 急速
下載速度快，下載任務(wù)是并行下載僵娃，而npm是按順序一個(gè)一個(gè)下載 - 緩存
會(huì)緩存下載過(guò)的包概作，下載過(guò)的包甚至可以離線下載，npm不能 - 清晰
輸出不冗余默怨，進(jìn)度條形象 - 安全
下載前檢查簽名及包的完整性 - 可靠
各平臺(tái)依賴(lài)一致性讯榕，yarn.lock自動(dòng)更新 - 優(yōu)化
下載失敗自動(dòng)重新請(qǐng)求，對(duì)網(wǎng)絡(luò)資源最大化利用匙睹，避免無(wú)用請(qǐng)求
6： webpack是什么愚屁？和其他同類(lèi)型工具比有什么優(yōu)勢(shì)？
什么是Webpack
WebPack可以看做是模塊打包機(jī)：它做的事情是痕檬，分析你的項(xiàng)目結(jié)構(gòu)霎槐，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Scss，TypeScript等）梦谜，并將其打包為合適的格式以供瀏覽器使用丘跌。支持AMD和CommonJS，以及其他的一些模塊系統(tǒng)改淑，并且兼容多種JS書(shū)寫(xiě)規(guī)范碍岔，可以處理模塊間的依賴(lài)關(guān)系。
WebPack和Grunt以及Gulp相比有什么特性
Grunt和Gulp的工作方式是：在一個(gè)配置文件中朵夏，指明對(duì)某些文件進(jìn)行類(lèi)似編譯蔼啦，組合，壓縮等任務(wù)的具體步驟仰猖，這個(gè)工具之后可以自動(dòng)替你完成這些任務(wù)捏肢。
Webpack的工作方式是：把你的項(xiàng)目當(dāng)做一個(gè)整體奈籽，通過(guò)一個(gè)給定的主文件（如：index.js），Webpack將從這個(gè)文件開(kāi)始找到你的項(xiàng)目的所有依賴(lài)文件鸵赫，使用loaders處理它們衣屏，最后打包為一個(gè)瀏覽器可識(shí)別的JavaScript文件。
Webpack的處理速度更快更直接辩棒，能打包更多不同類(lèi)型的文件狼忱。
7：npm script是什么？如何使用一睁？
npm 允許在package.json文件里面钻弄，使用scripts字段定義腳本命令。供 npm 直接調(diào)用者吁。
{
// ...
"scripts": {
"build": "node build.js"
}
}
上面代碼是package.json文件的一個(gè)片段窘俺，里面的scripts字段是一個(gè)對(duì)象。它的每一個(gè)屬性复凳，對(duì)應(yīng)一段腳本瘤泪。比如，build命令對(duì)應(yīng)的腳本是node build.js育八。
命令行下使用npm run命令对途，就可以執(zhí)行這段腳本。
$ npm run build
# 等同于執(zhí)行
$ node build.js
8： 使用 webpack 替換 入門(mén)-任務(wù)15中模塊化使用的 requriejs
9：gulp是什么单鹿？使用 gulp 實(shí)現(xiàn)圖片壓縮掀宋、CSS 壓縮合并、JS 壓縮合并
gulp是前端開(kāi)發(fā)過(guò)程中對(duì)代碼進(jìn)行自動(dòng)化構(gòu)建的利器仲锄。它不僅能對(duì)資源進(jìn)行優(yōu)化劲妙，而且在開(kāi)發(fā)過(guò)程中能夠通過(guò)配置自動(dòng)完成很多重復(fù)的任務(wù)，讓我們可以專(zhuān)注于代碼儒喊，提高工作效率镣奋。
使用gulp可以做什么：
1.編譯 sass
2.合并優(yōu)化壓縮 css
3.校驗(yàn)壓縮 js
4.優(yōu)化圖片
5.添加文件指紋（md5）
6.組件化頭部底部（include html）
7.實(shí)時(shí)自動(dòng)刷新…
各種插件及使用
var gulp = require('gulp'), // 必須先引入gulp插件
del = require('del'), // 文件刪除
sass = require('gulp-ruby-sass'), // sass 編譯
cached = require('gulp-cached'), // 緩存當(dāng)前任務(wù)中的文件，只讓已修改的文件通過(guò)管道
uglify = require('gulp-uglify'), // js 壓縮
rename = require('gulp-rename'), // 重命名
concat = require('gulp-concat'), // 合并文件
notify = require('gulp-notify'), // 相當(dāng)于 console.log()
filter = require('gulp-filter'), // 過(guò)濾篩選指定文件
jshint = require('gulp-jshint'), // js 語(yǔ)法校驗(yàn)
rev = require('gulp-rev-append'), // 插入文件指紋（MD5）
cssnano = require('gulp-cssnano'), // CSS 壓縮
imagemin = require('gulp-imagemin'), // 圖片優(yōu)化
browserSync = require('browser-sync'), // 保存自動(dòng)刷新
fileinclude = require('gulp-file-include'), // 可以 include html 文件
autoprefixer = require('gulp-autoprefixer'); // 添加 CSS 瀏覽器前綴
圖片壓縮
1怀愧、基本使用
var gulp = require('gulp'),
imagemin = require('gulp-imagemin');
gulp.task('testImagemin', function () {
gulp.src('src/img/*.{png,jpg,gif,ico}')
.pipe(imagemin())
.pipe(gulp.dest('dist/img'));
});
2侨颈、gulp-imagemin其他參數(shù)
var gulp = require('gulp'),
imagemin = require('gulp-imagemin');
gulp.task('testImagemin', function () {
gulp.src('src/img/*.{png,jpg,gif,ico}')
.pipe(imagemin({
optimizationLevel: 5, //類(lèi)型：Number 默認(rèn)：3 取值范圍：0-7（優(yōu)化等級(jí)）
progressive: true, //類(lèi)型：Boolean 默認(rèn)：false 無(wú)損壓縮jpg圖片
interlaced: true, //類(lèi)型：Boolean 默認(rèn)：false 隔行掃描gif進(jìn)行渲染
multipass: true //類(lèi)型：Boolean 默認(rèn)：false 多次優(yōu)化svg直到完全優(yōu)化
}))
.pipe(gulp.dest('dist/img'));
});
命令提示符執(zhí)行：gulp testImagemin
CSS 壓縮合并
var gulp = require('gulp'),
cssnano = require('gulp-cssnano'),
concat = require('gulp-concat');
gulp.task('cssmin',function(){
gulp.src('src/css/*.css')
.pipe(concat(min.css)) //合并后的文件名
.pipe(cssnano())
.pipe(gulp.dest(dist/css));
});
JS 壓縮合并
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat');
gulp.tast('jsmin',function(){
gulp.src('src/js/*.js')
.pipe(jsmin())
.pipe(concat('all.js'))
.pipe(gulp.dest('dist/js'));
});
