1.如何全局安裝一個(gè)node應(yīng)用？
npm install name -g
全局安裝，應(yīng)用被下載安裝到全局目錄中/usr/local/lib/node_modules
2.package.json有什么作用？
執(zhí)行npm init生成package.json文件，該文件對(duì)項(xiàng)目記錄了一些配置信息，主要是用來(lái)進(jìn)行包管理。包括name、version、description、author、private、scripts、dependencies、decDependencies。其中scripts定義模塊包的使用方式，dependencies和devDependencies是模塊包的依賴管理
package.json文件說(shuō)明：
- scripts指定了運(yùn)行腳本的npm命令行縮寫
"scripts": {
"preinstall": "echo here it comes!",
"postinstall": "echo there it goes!",
"start": "node index.js",
"test": "tap test/*.js"
}
- dependencies字段指定了項(xiàng)目運(yùn)行所依賴的模塊，devDependencies指定項(xiàng)目開(kāi)發(fā)所需要的模塊。
{
"devDependencies": {
"browserify": "~13.0.0",//模版名+版本
"karma-browserify": "~5.0.1"
}
}
- bin項(xiàng)用來(lái)指定各個(gè)內(nèi)部命令對(duì)應(yīng)的可執(zhí)行文件的位置。
"bin": {
"someTool": "./bin/someTool.js"
}
- main字段指定了加載的入口文件，require（‘moduleName’）就會(huì)加載這個(gè)文件。這個(gè)字段的默認(rèn)值是模塊根目錄下面的index.js。
- name：項(xiàng)目名稱
- version：版本
- description：描述說(shuō)明
- keywords：關(guān)鍵字
3.npm install --save app與 npm install --save-dev app有什么區(qū)別?
首先要區(qū)分dependencies和devDependencies。前者是項(xiàng)目開(kāi)發(fā)環(huán)境必需的依賴，后者是方便于項(xiàng)目使用開(kāi)發(fā)的工具如腳手架工具、測(cè)試工具等。
相同：都會(huì)在項(xiàng)目下的node_modules目錄下下載app
不同：在往package.json文件寫依賴時(shí)
--save 會(huì)寫在dependencies下
--save-dev 會(huì)寫在devDependencies下
4.node_modules的查找路徑是怎樣的?
在node.js中，模塊分為內(nèi)建模塊，本地模塊，node_module模塊
當(dāng)我們r(jià)equire一個(gè)模塊時(shí)，先查找是否為內(nèi)建模塊，然后是否為本地模塊，最后查找是否為node_module模塊
當(dāng)require的模塊既不是內(nèi)建模塊，也不是本地模塊，且在當(dāng)前目錄中的node_module中也找不到時(shí)，就會(huì)向上查找上一級(jí)的node_module，一直到根目錄
當(dāng)文件標(biāo)識(shí)不以'./ ../'開(kāi)頭，則跳過(guò)本地模塊查找，直接在node_module中查找。
5.webpack是什么？和其他同類型工具比有什么優(yōu)勢(shì)？
webpack是一個(gè)模塊加載器和打包工具，它可以將許多松散的模塊按照依賴和規(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 很快且在增量編譯上更加快
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 實(shí)現(xiàn)圖片壓縮、CSS 壓縮合并、JS 壓縮合并
gulp是一個(gè)以流為基礎(chǔ)的前端自動(dòng)化構(gòu)建工具，可以實(shí)現(xiàn)css的壓縮合并、js壓縮合并、圖片壓縮等等
使用 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
【個(gè)人總結(jié)，如有錯(cuò)漏，歡迎指出】
：>
