2015年我最喜愛的一些前端工具

2015年轉眼就要過去了，這一年出現了很多新的網頁設計和開發的工具，所以我想是時候來一發2015年我最喜歡的前端工具的總結了。

在開始之前，我有必要提一下：

• 我不能保證這些工具的質量和安全性；
• 這里只是我在2015年發現的工具，并不表示它們是在2015年開發出來了；
• 沒有按任何特定順序排列；
• 有些可能并不屬于“前端工具”，但我們只討論它們屬于前端的這部分；

下面，讓我們開始吧。

1. ai2html

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

2. sloc

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

sloc index.html

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

---------- 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

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

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

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會生成一個終端命令，執行后會自動生成文件結構和文件。

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代碼樣式”，并不是一個新的項目，但是我是在今年發現的它，我想每一個JS開發者都需要知道它的存在。

一些其他工具

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

• csswizardry-grids ：響應式、移動優先、無限嵌套、簡單易用的柵格系統；
• xr ：我喜歡簡單卻能把事情做好的東西，這個就是把XMLHttpRequest包裝起來的超級簡單的方法；
• Bootply ：Bootstrap是一個非常流行的框架，所以這個BootStrap編輯器值得一試；
• You Might Not Need jQuery Plugins ：簡單的jQuery插件和腳本；
• tota11y ：使用輔助技術幫助可視化你的網站是如何執行的；

希望我發現的這些工具你也會喜歡，如果你嘗試過其中任何一個，請讓我知道。

那么，2015年你最喜歡的工具是什么呢？歡迎分享你的觀點。

via： sitepoint.com ，由Specs 翻譯整理，發布在Coder資源網，轉載請注明來源。