九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

自動(dòng)化構(gòu)建

• 1、自動(dòng)化構(gòu)建簡(jiǎn)介

• 2、自動(dòng)化構(gòu)建初體驗(yàn)

• 3、常用的自動(dòng)化構(gòu)建工具

1、自動(dòng)化構(gòu)建簡(jiǎn)介

重復(fù)工作本應(yīng)自動(dòng)化。自動(dòng)化：通過(guò)機(jī)器代替手工完成一些工作。構(gòu)建：理解成轉(zhuǎn)換。
源代碼----自動(dòng)化構(gòu)建----生產(chǎn)代碼。這個(gè)抓換的過(guò)程稱作自動(dòng)化構(gòu)建工作流。作用：脫離運(yùn)行環(huán)境兼容帶來(lái)的問(wèn)題，開(kāi)發(fā)階段使用提高效率的語(yǔ)法、規(guī)范和標(biāo)準(zhǔn)。如：ECMAScript Next提高編碼效率和質(zhì)量、Sass增強(qiáng)css的可編程性、模板引擎抽象頁(yè)面中重復(fù)的html。這些用法大都不被瀏覽器直接支持。自動(dòng)化構(gòu)建工具 構(gòu)建轉(zhuǎn)換那些不被支持的代碼特性轉(zhuǎn)成能夠直接運(yùn)行的代碼。

2、自動(dòng)化構(gòu)建初體驗(yàn)

1、sass不能在瀏覽器環(huán)境中直接使用，所以需要在開(kāi)發(fā)階段通過(guò)一個(gè)工具把它轉(zhuǎn)換成css。這里使用的就是sass官方提供的sass模塊。作為開(kāi)發(fā)依賴安裝
yarn add sass --dev 安裝后在node_modules下出現(xiàn)一個(gè).bin的目錄，該目錄下會(huì)有一個(gè)sass的命令文件。
2、在命令行當(dāng)中就可以通過(guò)路徑找到這個(gè)命令 .\node_modules.bin\sass 這樣我這邊會(huì)報(bào)錯(cuò) 換了npx sass就好了。執(zhí)行完會(huì)打印一些幫助信息，一開(kāi)始會(huì)有用法。
3、npx sass scss/main.scss css/style.css 就把sass文件轉(zhuǎn)換成css了，還添加了對(duì)應(yīng)的sourcemap文件。這樣調(diào)試階段就可以定位源代碼中的問(wèn)題了。但輸入命令過(guò)于復(fù)雜

4、NPM Scripts
定義一些與項(xiàng)目開(kāi)發(fā)有關(guān)的腳本命令，命令與項(xiàng)目一起維護(hù)，便于我們?cè)诤罄m(xù)開(kāi)發(fā)中的使用。在package.json文件中添加scripts對(duì)象,scripts可以自動(dòng)發(fā)現(xiàn)node_modules里面的命令。所以不需要寫(xiě)完整命令，直接寫(xiě)命令名稱就可以了。
5、執(zhí)行yarn build 或者npm run build
6、NPM Scripts 實(shí)現(xiàn)自動(dòng)化構(gòu)建工作流的最簡(jiǎn)方式
yarn add browser-sync --dev 用于啟動(dòng)一個(gè)測(cè)試服務(wù)器運(yùn)行我們的項(xiàng)目

"scripts": {    "build": "sass scss/main.scss css/style.css",    "serve": "browser-sync"  },

yarn serve
7、如果在browser-sync 工作之前沒(méi)有生成我們的樣式，那此時(shí)頁(yè)面就沒(méi)有樣式文件，需要在啟動(dòng)serve之前讓build任務(wù)去工作?？梢越柚趎pm scripts的鉤子機(jī)制 定義一個(gè)preserve 它會(huì)在serve命令執(zhí)行之前去執(zhí)行

"scripts": {    "build": "sass scss/main.scss css/style.css",    "preserve":"yarn build",    "serve": "browser-sync"  },

yarn serve 啟動(dòng)之前自動(dòng)構(gòu)建sass文件
8、可以為sass命令添加一個(gè)–watch的參數(shù)，可以在工作時(shí)監(jiān)聽(tīng)sass文件的變化，自動(dòng)編譯

 "scripts": {    "build": "sass scss/main.scss css/style.css --watch",    "preserve":"yarn build",    "serve": "browser-sync"  },

yarn serve時(shí)命令會(huì)阻塞在這個(gè)地方，等待文件的變化。這樣會(huì)導(dǎo)致后續(xù)的browser-sync沒(méi)有辦法直接工作。這種情況下需要同時(shí)去執(zhí)行多個(gè)任務(wù),可以借助于npm-run-all模塊實(shí)現(xiàn)
9、yarn add npm-run-all --dev 可以用npm-run-all中的run-p命令同時(shí)執(zhí)行build和serve命令
10、yarn start 但這樣需要手動(dòng)刷新瀏覽器才能更新樣式
11、可以給 browser-sync添加一個(gè)–files的參數(shù)(–files “css/*.css”)?？梢宰宐rowser-sync在啟動(dòng)過(guò)后監(jiān)聽(tīng)項(xiàng)目下的一些文件的化。browser-sync會(huì)將這些變化自動(dòng)同步到瀏覽器

"scripts": {    "build": "sass scss/main.scss css/style.css --watch",    "serve": "browser-sync . --files \"css/*.css\"",    "start": "run-p build serve"  },  "devDependencies": {    "browser-sync": "^2.26.13",    "npm-run-all": "^4.1.5",    "sass": "^1.32.4"  }

3、常用的自動(dòng)化構(gòu)建工具

npm scripts可以解決一部分自動(dòng)化任務(wù)，但對(duì)于相對(duì)復(fù)雜的構(gòu)建過(guò)程，npm scripts就顯得非常吃力
市面上常用的自動(dòng)化工具，解決重復(fù)無(wú)聊的工作，從而實(shí)現(xiàn)自動(dòng)化。
1、Grunt：最早，生態(tài)非常完善，工作過(guò)程基于臨時(shí)文件實(shí)現(xiàn)，構(gòu)建速度相對(duì)較慢。如完成sass文件的構(gòu)建，一般會(huì)對(duì)sass文件做編譯操作，再去自動(dòng)添加似有屬性的前綴，最后再去壓縮代碼。這樣的讀寫(xiě)過(guò)程中，grunt每一步都有磁盤(pán)讀寫(xiě)操作。像sass文件在編譯完成過(guò)后會(huì)將結(jié)果寫(xiě)入到一個(gè)臨時(shí)的文件，然后下一個(gè)插件它再去讀取這個(gè)臨時(shí)的文件進(jìn)行下一步操作。這樣處理環(huán)節(jié)越多，文件讀寫(xiě)的次數(shù)就越多，超大項(xiàng)目中，文件特別多，處理速度就會(huì)特別慢
2、Gulp：速度快，基于內(nèi)存實(shí)現(xiàn)，對(duì)文件的處理環(huán)節(jié)都是在內(nèi)存中完成。相對(duì)與磁盤(pán)讀寫(xiě)速度自然就快了很多，另外默認(rèn)支持同時(shí)去執(zhí)行多個(gè)任務(wù)，效率高，使用方式相對(duì)于grunt更直觀易懂，生態(tài)完善，最受歡迎流行
3、FIS：百度推出的構(gòu)建系統(tǒng)。像捆綁套餐，把項(xiàng)目中一些典型的需求盡可能都集成在內(nèi)部。例如fis中可以很輕松處理資源加載、模塊化開(kāi)發(fā)、代碼部署、性能優(yōu)化等。大而全。
嚴(yán)格上來(lái)上說(shuō)webpack實(shí)際上是一個(gè)模塊打包工具，所以說(shuō)不在其中
用法上都是用些簡(jiǎn)單的代碼組織一些插件的使用，然后就可以用這些工具幫助我們執(zhí)行各種個(gè)樣重復(fù)的工作。 

來(lái)源：https://www.icode9.com/content-4-824351.html