That's Cool

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

npm install -g <package>

package.json 有什么作用？

1. 可以理解為是文件種子
2. 記錄著一個(gè)應(yīng)用包的：名 / 版本 / 描述 / 入口文件（他人引用的入口） / 測(cè)試命令行 / git地址 / 關(guān)鍵字 / 作者 / 確定
3. 如果要發(fā)布一包师逸，就必須創(chuàng)建一個(gè) package.json 文件
   <pre>{ "name": "應(yīng)用名稱", "version": "版本號(hào)", "main": "index.js", //入口文件 // bin參數(shù)是{ 命令名：文件名 }的格式镰烧，指定了各個(gè)內(nèi)部命令對(duì)應(yīng)的可執(zhí)行文件的位置浸间，相當(dāng)于在user.local/bin下創(chuàng)建一個(gè)快捷方式 // 執(zhí)行server,mock或server-mock命令時(shí)拍顷，將運(yùn)行對(duì)應(yīng)文件（./bin/server） // ./bin/server文件頭部需添加 #!/usr/bin/env node, 表示將以node運(yùn)行這個(gè)文件 "bin":{ "server":"./bin/server", "mock":"./bin/mock", "server-mock":"./bin/server-mock" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1"撼港， //一般默認(rèn)一個(gè)test的空文件夾绅作、用作寫測(cè)試代碼芦圾，npm test即可運(yùn)行。 "make":"echo 'hello world!' " //自定義的命令名需加run才能與運(yùn)行俄认，> npm run make < }, "keywords": [], //項(xiàng)目的關(guān)鍵詞个少。 一般用不到，發(fā)布npm才用得到眯杏。 "author": "candy", //作者 "license": "ISC", //協(xié)議 "repository": { // 用來存放到 版本管理遠(yuǎn)程服務(wù)夜焦。 發(fā)布npm才有用 "type": "git", "url": "https://github.com/ashleygwilliams/my_package.git" }, "dependencies": { // 正式使用時(shí)依賴的包, npm install --save xXx 生成 "my_dep": "^1.0.0" }, "devDependencies" : { //開發(fā)或者測(cè)試時(shí)，依賴的包岂贩。npm install --save-dev xxx生成 "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)目主頁茫经、 發(fā)布才有用 }</pre>

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

npm install --save xxx

-1.可在當(dāng)前目錄下生成一個(gè)node_module包（文件夾）
-2.在package.json 下的 dependencies 生成該應(yīng)用包的信息（用于依賴）

npm install --save-dev xxx

-1.供于自己測(cè)試用的
-2.他人不會(huì)下載到該部分的（運(yùn)行npm install不會(huì)自動(dòng)下載，需要手動(dòng)下載萎津。）
-3安裝的是開發(fā)或者測(cè)試時(shí)依賴的包
-4在package.json的devDependencies參數(shù)里可以找到卸伞，

node_modules的查找路徑是怎樣的?

1.如果入口文件（main:index.js），需要用到依賴的應(yīng)用包锉屈，會(huì)再當(dāng)前目錄下查找 node_module荤傲，看看是否有對(duì)應(yīng)該包的這個(gè)文件夾，如有颈渊，即讀取這個(gè)文件夾里面的 package.json 文件遂黍，搵到里面的main參數(shù)终佛，加載對(duì)應(yīng)的路徑（文件入口）。
2.如果當(dāng)前路徑?jīng)]有 node_module （或者不屬于它的node_module） 妓湘，那么往父級(jí)目錄繼續(xù)找..找不到就一直找到根目錄..

npm3與 npm2相比有什么改進(jìn)查蓉？

npm3解析依賴關(guān)系不同于npm2。
npm2以嵌套的方式安裝所有依賴關(guān)系榜贴，npm3會(huì)嘗試減輕這種嵌套原因造成的深層樹和冗余豌研。npm3嘗試通過在與要求它的主要依賴關(guān)系相同的目錄中以平面方式安裝一些輔助依賴關(guān)系（依賴關(guān)系的依賴關(guān)系）。

主要的主要區(qū)別是：
目錄結(jié)構(gòu)中的位置不再預(yù)測(cè)依賴關(guān)系的類型（主唬党，輔助等）
依賴關(guān)系取決于安裝順序鹃共，或者安裝事情的順序?qū)⒏淖僴ode_modules 目錄樹結(jié)構(gòu)

yarn和 npm 相比有什么優(yōu)勢(shì)? (Yarn的優(yōu)勢(shì))

1.并行安裝
2.更簡(jiǎn)潔的輸出
Yarn vs npm：你需要知道的一切
Yarn
Npm

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

webpack 是一款模塊加載器兼打包工具霜浴，它能把各種資源 JS、CSS蓝纲、圖片等都作為模塊來使用和處理阴孟。
優(yōu)勢(shì)：

用 commonJS 來書寫，對(duì) AMD/CMD 支持也很全面税迷，
方便其他模塊也兼容使用永丝，擴(kuò)展性強(qiáng)，插件機(jī)制完善箭养，能被模塊化處理的資源多
開發(fā)便捷慕嚷，能替代部分 grunt/gulp 的工作，比如打包毕泌，壓縮喝检。

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

webpack是一款模塊加載器兼打包工具挠说，它能把各種資源JS/CSS/圖片等都作為模塊來使用和處理。優(yōu)勢(shì)如下：

webpack 是以 commonJS 的形式來書寫腳本愿题，但對(duì) AMD/CMD 的支持也很全面损俭，方便舊項(xiàng)目進(jìn)行代碼遷移。
webpack可以將代碼拆分成多個(gè)區(qū)塊抠忘，每個(gè)區(qū)塊包含一個(gè)或多個(gè)模塊撩炊，它們可以按需異步加載外永，極大地減少了頁面初次加載時(shí)間崎脉。
webpack 本身只能處理原生的 JS 模塊，但是 loader 轉(zhuǎn)換器可以將各種類型的資源轉(zhuǎn)換成 JS 模塊伯顶。這樣囚灼，任何資源都可以成為 webpack 可以處理的模塊骆膝。
webpack 有一個(gè)智能解析器，幾乎可以處理任何第三方庫灶体，無論它們的模塊形式是 CommonJS阅签、 AMD 還是普通的 JS 文件。
webpack 還有一個(gè)功能豐富的插件系統(tǒng)蝎抽。大多數(shù)內(nèi)容功能都是基于這個(gè)插件系統(tǒng)運(yùn)行的政钟，還可以開發(fā)和使用開源的 webpack 插件，來滿足各式各樣的需求樟结。
webpack使用異步 I/O 和多級(jí)緩存提高運(yùn)行效率养交，使得它能夠快速增量編譯。

npm script是什么瓢宦？如何使用碎连？

npm script 是package.json文件里面一個(gè)屬性，使用該屬性自定義腳本命令驮履。
【執(zhí)行命令】 ： npm run xXx ——如果xXx是test或start鱼辙，則無需加 run ，因?yàn)槭?npm 內(nèi)置的命令

<pre>// package.json { // ... "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "upload": "git add .; git commit -m \"modify\"; git push" } } // commond window npm run upload</pre>

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

PS： 使用sass / less 時(shí)切記切記要安裝全局...否則報(bào)錯(cuò)無法找出問題-0.-【后續(xù)才發(fā)現(xiàn)并補(bǔ)充0.-】

Code
效果展示～-玫镐。-

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

1.屬于一種Node 應(yīng)用峭梳。
2.前端工作流利器。
3.作用：打包/壓縮/合并/git/遠(yuǎn)程操作蹂喻。
4.特點(diǎn)：簡(jiǎn)單易用 / 速度快 / 高質(zhì)量插件
5.數(shù)據(jù)流傳遞方式
En文檔
中文文檔

<pre>var gulp = require('gulp');

var minifycss = require('gulp-minify-css'), // CSS壓縮 uglify = require('gulp-uglify'), // js壓縮 imagemin = require('gulp-imagemin'); // 圖片壓縮 concat = require('gulp-concat'), // 合并文件 cssnano = require('gulp-cssnano');

//gulp.src | gulp.dest | gulp.task | gulp.watch

gulp.task('css', function() {
gulp.src('../../css/Apr_3.css') //要處理文件的路徑 .pipe(concat('index-merge.css')) //通過pipe把數(shù)據(jù)流傳遞給concat進(jìn)行合并為一葱椭，并取名為。 .pipe(minifycss()) //進(jìn)行壓縮 .pipe(gulp.dest('../../dist/css/')) //輸出到這里 });
gulp.task('js', function(argument) { gulp.src('../../js/com/*.js') .pipe(concat('merge.js')) .pipe(uglify()) .pipe(gulp.dest('../../dist/js/')); });
gulp.task('img', function(argument){ gulp.src('../../img/web-phone/*') .pipe(imagemin()) .pipe(gulp.dest('../../dist/imgs/')); });
gulp.task('default',['css','js','img'])</pre>

終圖

自制簡(jiǎn)單的NPM天氣包

過程起伏～

npm set registry=http://registry.npm.taobao.org 如果使用npm下載過程緩慢口四，可切換淘寶的節(jié)點(diǎn)下載