npm-npmscript-gulp-webpack

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

npm install -g 應(yīng)用名

2. package.json 有什么作用碴犬?

  1. 相當(dāng)于你本地項(xiàng)目的一個(gè)文檔說(shuō)明。
  2. 允許你指定你項(xiàng)目中所使用的node包的版本梆暮。
  3. 構(gòu)建你的項(xiàng)目更加容易服协,便于給其他人共享。
    如下:
{
        "name": "my_package",     //你的項(xiàng)目名稱惕蹄,全部小寫蚯涮,不能有空格,一個(gè)單詞卖陵,允許-和_. 如果是要發(fā)布自己的node插件遭顶,一般用github上面項(xiàng)目名稱。 下次有機(jī)會(huì)說(shuō)明 npm 上面的發(fā)布流程泪蔫。

        "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" : {//開(kāi)發(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ā)布才有用

    }


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

-save-dev是指將包信息添加到 package.json 里的 devDependencies節(jié)點(diǎn)讲婚,表示開(kāi)發(fā)時(shí)依賴的包尿孔。
-save 是指將包信息添加到 package.json 里的dependencies節(jié)點(diǎn),表示發(fā)布時(shí)依賴的包筹麸。
如:

gulp活合,gulp-less 等等編譯js或者css的包,運(yùn)行時(shí)是不需要的竹捉,所以建議安裝到 devDependencies 芜辕,
如jade尚骄,express等包块差,運(yùn)行時(shí)會(huì)用到,所以建議安裝到 dependencies

4.node_modules的查找路徑是怎樣的?

先從本地文件夾里找倔丈,找不到再一級(jí)級(jí)向上找憨闰,一直找到系統(tǒng)根目錄為止。
如:

/home/user/node_modules/foo/bar
 /home/node_modules/foo/bar
 /node_modules/foo/bar

5.npm3與 npm2相比有什么改進(jìn)需五?yarn和 npm 相比有什么優(yōu)勢(shì)? (選做題目)

npm2 安裝依賴的時(shí)候比較簡(jiǎn)單直接鹉动,直接按照包依賴的樹(shù)形結(jié)構(gòu)下載填充本地目錄結(jié)構(gòu)。

因?yàn)?npm 設(shè)計(jì)的初衷就是考慮到了包依賴的版本錯(cuò)綜復(fù)雜的關(guān)系宏邮,同一個(gè)包因?yàn)楸灰蕾嚨年P(guān)系原因會(huì)出現(xiàn)多個(gè)版本泽示,簡(jiǎn)單地填充結(jié)構(gòu)保證了無(wú)論是安裝還是刪除都會(huì)有統(tǒng)一的行為和結(jié)構(gòu)。

比如一個(gè) App 里模塊 A 和 C 都依賴 B蜜氨,無(wú)論被依賴的 B 是否是同一個(gè)版本械筛,都會(huì)生成對(duì)應(yīng)結(jié)構(gòu):


于是缺陷就凸顯出來(lái)了,太深的目錄樹(shù)結(jié)構(gòu)會(huì)嚴(yán)重影響效率飒炎,甚至在 Windows 下可能會(huì)超出系統(tǒng)路徑限制的長(zhǎng)度埋哟。另外,在 Windows 有刪 node_modules 目錄經(jīng)歷的可能都經(jīng)歷過(guò)漫長(zhǎng)的等待郎汪。
npm3
針對(duì) npm2 的問(wèn)題赤赊,npm3 加了點(diǎn)算法,直白的解釋就是:npm install 時(shí)會(huì)按照 package.json 里依賴的順序依次解析煞赢,遇到新的包就把它放在第一級(jí)目錄抛计,后面如果遇到一級(jí)目錄已經(jīng)存在的包,會(huì)先判斷版本照筑,如果版本一樣則忽略吹截,否則會(huì)按照 npm2 的方式依次掛在依賴包目錄下

可以看下 npm2 和 npm3 生成的結(jié)構(gòu)對(duì)比:


在包版本差異化不太嚴(yán)重的情況下录豺,這種構(gòu)建方式會(huì)幾乎把所有包放在一級(jí)目錄下,很大程度上提升了效率以及節(jié)省了部分磁盤空間饭弓。

但npm3也存在開(kāi)發(fā)環(huán)境和測(cè)試環(huán)境的 node_modules 目錄結(jié)構(gòu)不一樣以及其他的問(wèn)題双饥,因此FaceBook搞了 yarn 用來(lái)替代 npm了。
yarn 構(gòu)建步驟如下:
Resolution: 向倉(cāng)庫(kù)請(qǐng)求依賴關(guān)系
Fetching: 看看本地緩存了沒(méi)有弟断,否則把包拉到緩存里
Linking: 直接全部從緩存里構(gòu)建好目錄樹(shù)放到 node_modules 里


6.webpack是什么咏花?和其他同類型工具比有什么優(yōu)勢(shì)?

webpack是一個(gè)“模塊打包工具”阀趴,它可以編譯各種語(yǔ)言成為瀏覽器可以執(zhí)行的css昏翰,js,html刘急;也可以模塊化引入文件進(jìn)行壓縮合并等操作棚菊,還可以通過(guò)插件來(lái)實(shí)現(xiàn)一些其他的前端工作流操作例如將文件名加上hash以避免緩存等。
它具有以下優(yōu)勢(shì)

代碼拆分
Webpack 有兩種組織模塊依賴的方式叔汁,同步和異步统求。異步依賴作為分割點(diǎn),形成一個(gè)新的塊据块。在優(yōu)化了依賴樹(shù)后码邻,每一個(gè)異步區(qū)塊都作為一個(gè)文件被打包。
Loader
Webpack 本身只能處理原生的 JavaScript 模塊另假,但是 loader 轉(zhuǎn)換器可以將各種類型的資源轉(zhuǎn)換成 JavaScript 模塊像屋。這樣,任何資源都可以成為 Webpack 可以處理的模塊边篮。

智能解析
Webpack 有一個(gè)智能解析器己莺,幾乎可以處理任何第三方庫(kù),無(wú)論它們的模塊形式是 CommonJS戈轿、 AMD 還是普通的 JS 文件凌受。甚至在加載依賴的時(shí)候,允許使用動(dòng)態(tài)表達(dá)式 require(“./templates/“ + name + “.jade”)凶杖。

插件系統(tǒng)
Webpack 還有一個(gè)功能豐富的插件系統(tǒng)胁艰。大多數(shù)內(nèi)容功能都是基于這個(gè)插件系統(tǒng)運(yùn)行的,還可以開(kāi)發(fā)和使用開(kāi)源的 Webpack 插件智蝠,來(lái)滿足各式各樣的需求腾么。

快速運(yùn)行
Webpack 使用異步 I/O 和多級(jí)緩存提高運(yùn)行效率,這使得 Webpack 能夠以令人難以置信的速度快速增量編譯杈湾。


7. npm script是什么解虱?如何使用?

  • npm script 是package.json的一個(gè)屬性漆撞,可以在scripts里面定義一些腳本命令

  • 除了npm可以直接執(zhí)行的以外(例如:npm start殴泰,npm test)于宙,其余的都要通過(guò)npm run xxx


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

代碼地址:https://github.com/zhanghan0529/modular-page-1
預(yù)覽:https://zhanghan0529.github.io/modular-page-1/index.html


9.gulp是什么?使用 gulp 實(shí)現(xiàn)圖片壓縮悍汛、CSS 壓縮合并捞魁、JS 壓縮合并

var gulp = require("gulp");
var cssnano = require("gulp-cssnano"),//css壓縮
    concat = require("gulp-concat"),//合并文件
    uglify = require("gulp-uglify"),//壓縮js文件    
    // rename = require("gulp-rename"),//重命名
    clean = require("gulp-clean"),//清空文件
    imagemin = require("gulp-imagemin");//壓縮圖片
    jshint = require("gulp-jshint");//js規(guī)范檢查
    minhtml = require("gulp-minhtml");//壓縮html

gulp.task("bulid:css",function(){
    gulp.src("*.css")//找到某路徑下的css文件
    .pipe(concat("index-merge.css"))//合并需要合并的css文件
    .pipe(cssnano())//壓縮合并后的css文件
    .pipe(gulp.dest("dist/css/"));//輸出
});

gulp.task("bulid:js",function(){
    gulp.src("src/js/*.js")
    .pipe(jshint())//檢查格式
    .pipe(concat("merge.js"))//合并js文件
    // .pipe(rename({
    //     suffix: '.min'
    // }))
    .pipe(uglify())//壓縮
    .pipe(gulp.dest("dist/js/"));
});

gulp.task("bulid:img",function(){
    gulp.src("pic/*")
      .pipe(imagemin())
      .pipe(gulp.dest("dist/img/"));
});

// gulp.task("clear",function(){
//     gulp.src("dist/*",{read: false})
//     .pipe(clean());
// });


gulp.task("default",["bulid:css","bulid:img","bulid:js"])

10.開(kāi)發(fā)一個(gè) node 命令行天氣應(yīng)用用于查詢用戶當(dāng)前所在城市的天氣,發(fā)布到 npm 上去离咐∑准螅可以通過(guò)如下方式安裝使用(可使用api.jirengu.com里提供的查詢天氣接口) (選做題目)

包地址:https://www.npmjs.com/package/weatherdemo0529

使用
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市宵蛀,隨后出現(xiàn)的幾起案子昆著,更是在濱河造成了極大的恐慌,老刑警劉巖术陶,帶你破解...
    沈念sama閱讀 216,496評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件凑懂,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡梧宫,警方通過(guò)查閱死者的電腦和手機(jī)接谨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)祟敛,“玉大人疤坝,你說(shuō)我怎么就攤上這事兆解」萏” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 162,632評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵锅睛,是天一觀的道長(zhǎng)埠巨。 經(jīng)常有香客問(wèn)我,道長(zhǎng)现拒,這世上最難降的妖魔是什么辣垒? 我笑而不...
    開(kāi)封第一講書人閱讀 58,180評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮印蔬,結(jié)果婚禮上勋桶,老公的妹妹穿的比我還像新娘。我一直安慰自己侥猬,他們只是感情好例驹,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著退唠,像睡著了一般鹃锈。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上瞧预,一...
    開(kāi)封第一講書人閱讀 51,165評(píng)論 1 299
  • 那天屎债,我揣著相機(jī)與錄音仅政,去河邊找鬼。 笑死盆驹,一個(gè)胖子當(dāng)著我的面吹牛圆丹,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播躯喇,決...
    沈念sama閱讀 40,052評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼运褪,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了玖瘸?” 一聲冷哼從身側(cè)響起秸讹,我...
    開(kāi)封第一講書人閱讀 38,910評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎雅倒,沒(méi)想到半個(gè)月后璃诀,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,324評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蔑匣,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評(píng)論 2 332
  • 正文 我和宋清朗相戀三年劣欢,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片裁良。...
    茶點(diǎn)故事閱讀 39,711評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡凿将,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出价脾,到底是詐尸還是另有隱情牧抵,我是刑警寧澤,帶...
    沈念sama閱讀 35,424評(píng)論 5 343
  • 正文 年R本政府宣布侨把,位于F島的核電站犀变,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏秋柄。R本人自食惡果不足惜获枝,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望骇笔。 院中可真熱鬧省店,春花似錦、人聲如沸笨触。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,668評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)旭旭。三九已至谎脯,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間持寄,已是汗流浹背源梭。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 32,823評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工来庭, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蜀备,地道東北人婉弹。 一個(gè)月前我還...
    沈念sama閱讀 47,722評(píng)論 2 368
  • 正文 我出身青樓列林,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親烛愧。 傳聞我的和親對(duì)象是個(gè)殘疾皇子油宜,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容