grunt和NPM簡介

2024-04-27 15:04:16

字體：大中小

來源：轉載

供稿：網友

grunt是一套前端自動化工具，一個基于nodeJs的命令行工具，一般用于：① 壓縮文件② 合并文件③ 簡單語法檢查這個工具對我的某個項目目錄里面的項目文件做一些操作，比如壓縮、查錯、合并等。Grunt 就是一種自動化任務處理工具，它就是一個工具框架，有很多插件擴展它的功能。Grunt 基于 Node.js ，用 JS 開發，這樣就可以借助 Node.js 實現跨系統跨平臺的桌面端的操作，例如文件操作等等。此外，Grunt 以及它的插件們，都作為一個包，可以用 NPM 安裝進行管理。所以 NPM 生成的 package.json 項目文件，里面可以記錄當前項目中用到的 Grunt 插件，而 Grunt 會調用 Gruntfile.js 這個文件，解析里面的任務（task）并執行相應操作。Grunt 幫忙實現下面幾個功能：檢查每個 JS 文件語法、合并兩個 JS 文件、將合并后的 JS 文件壓縮、將 SCSS 文件編譯、新建一個本地服務器監聽文件變動自動刷新 HTML 文件。差不多就是這些，根據這些任務需求，需要用到：合并文件：grunt-contrib-concat語法檢查：grunt-contrib-jshintScss 編譯：grunt-contrib-sass壓縮文件：grunt-contrib-uglify監聽文件變動：grunt-contrib-watch建立本地服務器：grunt-contrib-connect它們的命名和文檔都很規范，因為這些是官方提供的比較常用的插件。這些插件同時都是 NPM 管理的包，比如grunt-contrib-concat - npm 你也可以在這上面看到用法等。下面我們就要在這個項目中安裝這些插件，執行命令：npm install grunt --save-dev表示通過 npm 安裝了 grunt 到當前項目，同時加上了 –save-dev 參數，表示會把剛安裝的東西添加到 package.json 文件中。可用的 Grunt 命令grunt dist （僅編譯 CSS 和 javaScript 文件）重新生成 /dist/ 目錄，并將編譯壓縮后的 CSS 和 Javascript 文件放入這個目錄中。作為一名 Bootstrap 用戶，大部分情況下你只需要執行這一個命令。grunt watch （監測文件的改變，并運行指定的 Grunt 任務）監測 Less 源碼文件的改變，并自動重新將其編譯為 CSS 文件。grunt test （運行測試用例）在 PhantomJS 環境中運行 JSHint 和 QUnit 自動化測試用例。grunt docs （編譯并測試文檔中的資源文件）編譯并測試 CSS、JavaScript 和其他資源文件。在本地環境下通過 bundle exec jekyll serve 運行 Bootstrap 文檔時需要用到這些資源文件。grunt （重新構建所有內容并運行測試用例）編譯并壓縮 CSS 和 JavaScript 文件、構建文檔站點、對文檔做 HTML5 校驗、重新生成定制工具所需的資源文件等，都需要 Jekyll 工具。這些只有在你對 Bootstrap 深度研究時才有用。除錯如果你在安裝依賴包或者運行 Grunt 命令時遇到了問題，請首先刪除 npm 自動生成的 /node_modules/ 目錄，然后，再次運行 npm install 命令。

NPM 使用介紹

NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題，常見的使用場景有以下幾種：允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。允許用戶從NPM服務器下載并安裝別人編寫的命令行程序到本地使用。允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用。由于新版的nodejs已經集成了npm，所以之前npm也一并安裝好了。同樣可以通過輸入 "npm -v" 來測試是否成功安裝。命令如下，出現版本提示表示安裝成功:$ npm -v2.3.0

上一篇：JavaScript 面向對象（一）

下一篇：Flex布局（1）