摘要:世界的構建工具為何要用構建工具一句話自動化。由于擁有數量龐大的插件可供選擇,因此,你可以利用自動完成任何事,并且花費最少的代價。要想使用,首先必須將安裝到全局環境中,使用的進行安裝。
你沒有理由不學、不用! jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,
grunt是一套前端自動化工具,一個基于nodeJs的命令行工具,一般用于:壓縮文件,合并文件,簡單語法檢查。
GRUNT JavaScript 世界的構建工具
一句話:自動化。對于需要反復重復的任務,例如壓縮(minification)、編譯、單元測試、linting等,自動化工具可以減輕你的勞動,簡化你的工作。當你在 Gruntfile 文件正確配置好了任務,任務運行器就會自動幫你或你的小組完成大部分無聊的工作。
為什么要使用Grunt?Grunt生態系統非常龐大,并且一直在增長。由于擁有數量龐大的插件可供選擇,因此,你可以利用Grunt自動完成任何事,并且花費最少的代價。如果找不到你所需要的插件,那就自己動手創造一個Grunt插件,然后將其發布到npm上吧。
可用的Grunt插件你所需要的大多數task都已經作為Grunt插件被開發了出來,并且每天都有更多的插件誕生。插件列表頁面列出了完整的清單。
Grunt和 Grunt 插件是通過 npm 安裝并管理的,npm是 Node.js 的包管理器。
提前感受一下 Grunt 吧!
安裝 grunt 雖然很簡單,更多涉及到如何運行項目。看看下面的演示
“CLI”被翻譯為“命令行”。要想使用grunt,首先必須將grunt-cli安裝到全局環境中,使用nodejs的“npm install…”進行安裝。
輸入:**npm install -g grunt-cli**
注意,mac os 系統、部分linux系統中,在這句話的前面加上“sudo ”指令。
像介個樣子呢 就是安裝成功了
第三步 創建一個簡單的網站
藍后,重點來了,增加倆個文件夾
package.json增加點內容
“devDependencies”是什么意思?字面意思解釋是“開發依賴項”,即我們現在這個系統,將會依賴于哪些工具來開發。現在代碼一行都沒有寫,依賴于誰?誰也不依賴!所以,就先寫一個空對象。但是下文會慢慢把它填充起來
第四步 安裝grunt輸入**npm install grunt --save-dev**
運行完后 有倆個地方會發生改變
第一個 ** "grunt": "^1.0.1",**
第二個 **多了一個文件夾**
然后你在控制臺運行“grunt”命令。
如果你得到一個warning提示,那說明grunt已經起作用了。如下圖:
如果出現這個,說明grunt已經在這個目錄下成功安裝。
那么,為何我們在剛才執行grunt時候會有Warning提示呢?根據提示,我們得知的信息是:Task “default” not found ,如何搞定這個問題?——當然是繼續往下看啊。
//包裝函數 module.exports = function (grunt) { //任務配置,所有插件的配置信息 grunt.initConfig({ //獲取 package.json 的信息 pkg: grunt.file.readJSON("package.json"), }); //告訴grunt當我們在終端中輸入grunt時需要做什么 注意先后順序 grunt.registerTask("default", ["jshint","uglify","watch"]); };
grunt集全世界web前端開發的智慧于一身,比你想想的更加強大,它的插件庫能應對你在web前端開發遇到的任何事情。
第六步 使用grunt插件1.使用uglify插件(壓縮javascript代碼)
輸入**npm install grunt-contrib-uglify --save-dev**
看出來我上圖哪里錯了么,uglify 打成uplify ,還連著打錯三四遍真是造孽哇,真的是要被自己蠢哭3W遍,你們命令單詞可一定要看清楚哦
命令執行完之后 看下圖
多了個 "grunt-contrib-uglify": "^3.0.1"
我們既然要使用uglify來壓縮javascript代碼,當然得創建一個js文件來做實驗。我們在現有的“src”文件夾中新建一個“test.js”,并隨便寫一些代碼
測試文件建立好了。我們接下來就要把這個js文件進行壓縮。
當然,要壓縮誰?往哪里壓縮?這些都需要配置,在Gruntfile.js中配置。分為三步:
第一步,在grunt.initConfig方法中配置 uglify 的配置參數。如下圖:
//包裝函數 module.exports = function (grunt) { //任務配置,所有插件的配置信息 grunt.initConfig({ //獲取 package.json 的信息 pkg: grunt.file.readJSON("package.json"), //uglify插件的配置信息:用來壓縮javascript文件 uglify: { options: { stripBanners: true, banner: "/*! <%= pkg.name %> */ /*! <%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> */ ", }, build: { src: "src/test.js", dest: "build/<%= pkg.name%>-<%= pkg.version%>.js.min.js" } }, }); };
第二步,在 grunt.initConfig 方法之后,要讓grunt去加載這一個插件。光配置了,不加載上,如何用啊?
//告訴grunt我們將使用插件 grunt.loadNpmTasks("grunt-contrib-uglify"); //告訴grunt當我們在終端中輸入grunt時需要做什么 注意先后順序 grunt.registerTask("default", ["uglify");
在控制臺中運行grunt命令,并可以去build文件目錄下查看是否有一個被壓縮的js文件
以上就是uglify插件的詳細安裝、配置說明。Javascript使用uglify壓縮,css可使用cssmin插件壓縮。安裝、配置方法一樣的,不再贅述。
今天就寫到這里吧
本寶寶情緒不佳
等心情變美麗了繼續接著寫
嗚哇 下班要去吃小龍蝦才能拯救我這顆不美麗的小心臟
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83345.html
摘要:世界的構建工具為何要用構建工具一句話自動化。由于擁有數量龐大的插件可供選擇,因此,你可以利用自動完成任何事,并且花費最少的代價。要想使用,首先必須將安裝到全局環境中,使用的進行安裝。 你沒有理由不學、不用! jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt, grunt是一套前端自動化工具,一個基于nodeJs的命令行工具,一般用于:...
摘要:所以它在某些程度上,跟的功能有些相同。嚴格上講,模塊化不是他強調的東西,他旨在規范前端開發流程。更是明顯強調模塊化開發,而那些文件壓縮合并預處理等功能,不過是他附帶的功能。 1. webpack 是什么? showImg(https://segmentfault.com/img/remote/1460000012293461); 先來說一下 webpack 是什么。 webpack 的...
閱讀 1905·2021-11-25 09:43
閱讀 1405·2021-11-22 14:56
閱讀 3280·2021-11-22 09:34
閱讀 2010·2021-11-15 11:37
閱讀 2256·2021-09-01 10:46
閱讀 1396·2019-08-30 15:44
閱讀 2294·2019-08-30 13:15
閱讀 2393·2019-08-29 13:07