web前端工具有哪些

這篇文章主要介紹“web前端工具有哪些”，在日常操作中，相信很多人在web前端工具有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”web前端工具有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

1. ai2html

它是有紐約時報編輯部的開發(fā)者開發(fā)出來的，它的描述如下：

把你的Illustrator文檔轉換為HTML和CSS的開源Adobe Illustrator腳本。

2. sloc

這個非常的整潔。這是一個命令行工具，可以幫你為源碼生成統(tǒng)計信息。默認情況下，輸出信息只是一個簡單的列表，但你也可以將它轉換為CSV、JSON、CLI表格格式。通過 npm 安裝后，你可以執(zhí)行這樣的命令：

sloc index.html

我對一個比較大的HTML文檔執(zhí)行上面的命令，生成了下面的信息：

---------- Result ------------              Physical :  9788               Source :  6340              Comment :  645 Single-line comment :  0        Block comment :  645                Mixed :  642                Empty :  3445  Number of files read :  1  ------------------------------

下面的命令可以生成JSON格式的數據：

// 命令 sloc --format json index.html  // 結果 {   "files": [     {       "path": "index.html",       "stats": {         "total": 9788,         "source": 6340,         "comment": 645,         "single": 0,         "block": 645,         "mixed": 642,         "empty": 3445       },       "badFile": false     }   ],   "summary": {     "total": 9788,     "source": 6340,     "comment": 645,     "single": 0,     "block": 645,     "mixed": 642,     "empty": 3445   } }

3. Walkway

這是一個制作SVG元素動畫效果非常簡單的方法，我可以確保它的易用性。

4. VisSense.js

這個庫可能有很多不同的用例。它被描述為：

一個可以觀測DOM元素可見性變化的實用工具庫?？梢粤⒓粗酪粋€元素被隱藏、部分可見、全部可見。

可以在次 演示 頁查看效果。

5. is.js

這被描述為“微型檢查庫”，它提供了一個很好的API，允許你做各種數據進行檢測。

is.decimal(41.5); // true is.number('hello'); // false is.regexp(/test/); // true is.usZipCode('90201'); // true is.socialSecurityNumber('017-90-7890'); // true is.hexColor('#333'); // true is.odd(42); // false is.domNode(el); // depends on the value of el is.iphone(); // depends on device is.ipad(); // depends on device is.inNextWeek(myDate); // depends on date value

6. Grunt SassyClean

Grunt SassyClean 是一個 Grunt 任務，允許你刪除任何無用的部分。也就是說，它們可能在你的文件結構中的，但不管什么原因，你并沒有在項目中真正使用它們。

你需要在你的Grunt文件中包含 grunt.initConfig() 像下面這樣：

sassyclean: {   options: {     modules: ['sass/modules/**/*.scss',               'sass/themes/**/*.scss',               'sass/layout/**/*.scss',               'sass/base/**/*.scss'],     buildfiles: ['sass/**/*.scss'],     remove: false,     days: null   }, }

7. Sass Director

這是另一個非常整潔但體積很小的Sass工具。Sass Director會生成一個終端命令，執(zhí)行后會自動生成文件結構和文件。

8. Awesomplete

這是一個非常易用，無任何依賴的JavaScript自動補全腳本，它提供了所有自動補全腳本需要做的，還可以進行自定制。例如，引入CSS和JS文件后，可以這樣編寫HTML結構：

<input class="awesomplete"        data-list="Cobol, Java, JavaScript, PHP, Python, Ruby" />

9. What Does My Site Cost?

由Tim Kadlec維護的該項目為解決性能問題提供了可行之路。性能上最重要的是移動網絡，使用這個工具，它將告訴你：

找出世界各地使用移動網絡訪問你網站需要消耗的成本。

10. JSCS

它是為了格式化“JavaScript代碼樣式”，并不是一個新的項目，但是我是在今年發(fā)現的它，我想每一個JS開發(fā)者都需要知道它的存在。

一些其他工具

這里是一些“榮譽獎”得主，也許值得你一試：

• csswizardry-grids：響應式、移動優(yōu)先、***嵌套、簡單易用的柵格系統(tǒng)；

• xr：我喜歡簡單卻能把事情做好的東西，這個就是把XMLHttpRequest包裝起來的超級簡單的方法；

• Bootply：Bootstrap是一個非常流行的框架，所以這個BootStrap編輯器值得一試；

• You Might Not Need jQuery Plugins：簡單的jQuery插件和腳本；

• tota11y：使用輔助技術幫助可視化你的網站是如何執(zhí)行的；

到此，關于“web前端工具有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>