爲何要講下這三大工具,Grunt/Gulp/Webpack的做用又是什麼?有什麼好處嗎?javascript
答:首先說下咱們都瞭解jquery,可是咱們下載的時候一般在官網會看到兩種文件,如圖:css
這個時候有兩個文件,jquery-3.0.0.js 和 jquery-3.0.0.min.js 其實這兩個文件是如出一轍,裏面的功能和方法,主要區別是一個是258kb,另一個是85kb,爲何功能同樣可是一個是258kb,另一個是85kb呢,請看下面兩張圖:html
這一張是jquery-3.0.0.js 內部結構圖前端
下面一張是jquery-3.0.0.min.jshtml5
最後看到區別了嗎,min表明的是佔用最小的空間,爲項目提升性能上,因此咱們通常的話項目上線會用到jquery-3.0.0.min.js這樣的文件,可是通常開發中咱們也會用到jquery-3.0.0.js 結構清晰的文件,主要是由於咱們可以方便學習看jquery的代碼,有助於咱們開發項目,若是jquery已經很熟練了,你就能夠在開發項目的時候直接用到打了包的jquery-3.0.0.min.js,由於在響應速度上會提升。java
同理,前端攻城獅在本身寫css、js、less等相關文件的時候,項目上線若是測試沒有bug,客戶比較滿意,咱們都會直接把前端攻城獅寫的css、js等相關文件打包,這樣在速度性能上就會相應的提升很多,而咱們怎麼實現這樣的功能,就涉及到了今天講到的三個構建化工具,Grunt、Gulp、Webpack,功能相似,如今最火的是Gulp和Webpack。node
******固然還要講一下,html這種文件是不能打包的*********jquery
官網下載地址:https://www.jetbrains.com/webstorm/ 而後點擊 Download git
安裝過程:博客指導==》 http://blog.csdn.net/u011781521/article/details/53558979程序員
官網下載地址:http://nodejs.cn/download/windows 就去下載後綴名是 .msi
安裝過程:它的和java jdk 安裝相似 https://www.cnblogs.com/lsgxeva/p/7754365.html 這篇博客第四步驟就已經安裝成功了,第五步是安裝cnpm 由於nodejs 安裝成功自帶npm,由於nodejs是外國人開發,因此服務器在外國,因此npm這個服務器下載的速度可能會慢一些,因此須要下載一個在國內的服務器,也就是鏡像cnpm,在速度上更快,不過不下載也沒事,絕大多數體現不出來
nodejs 安裝成功自帶npm,npm的意思是node package manager node包管理工具,怎麼介紹呢?直接上圖,在java的工程中,lib下面的全部包 *.jar 一部分jdk自帶,一部分maven工具導入
在java中咱們除了jdk自帶的,剩下的就是經過maven導入,同理在前端工程中,咱們想要用到一些工具包或者框架包或者插件包,就須要用到npm來導入,npm就至關於maven的功能
(看一下就行,不用直接操做,一會將構建工具再試就能夠,有個對命令的預熱就好)
npm version
npm -v 查看版本
npm search 包名
npm install 包名 【在當前目錄安裝包】
npm init 【初始化,建立package.json文件,至關於maven工具的pom文件】
npm remove 包名 【刪除包】
npm install 包名 --save 安裝包並添加到package的依賴中 【這行命令用的比較多】
npm install 【下載當前項目全部依賴的包 通常github下載別人的項目,須要導入包,就是這個命令,那些依賴的包在package.json文件中提現】
剛建立項目的package.json:如圖
他其實就至關於maven工具的pom文件,添加依賴以後如圖,這是我從網上的截圖:
但願你們對 package.json 以及將要用到的npm有一個認識,
若是你想要知道package.json全部標籤的含義,看這個網址,不過我認爲看懂dependecies裏面依賴的包就能夠了:
http://javascript.ruanyifeng.com/nodejs/packagejson.html
WebStorm:file ->project --html5 建立
項目建立完成以後如圖,是一個空的項目:
接下來咱們建立三個文檔,分別來說解Grunt、Gulp、Webpack至關於java中的多個模塊工程同樣
三個空的文檔已經建立完成,進入工具詳解下一步。
簡介: 基於nodeJs的命令行工具 npm 可對js,css等進行合併和壓縮,同時對js文件有檢查報錯的功能
首先建立一個簡單的應用,在建立的過程當中讓你們明白Grunt
在grunt_mjt文檔下建立
|- mjt----------構建生成的文件所在的文件夾
|- src------------源碼文件夾
|- js---------------js源文件夾
|- css--------------css源文件夾
|- index.html-----頁面文件
而後根目錄建立package.json ,文件夾grunt_mjt右鍵選擇建立package.json如圖:
看下位置:
在建立Gruntfile.js 只能是這個名字,首字母要大寫
最後項目結構圖:
|- mjt----------構建生成的文件所在的文件夾
|- src------------源碼文件夾
|- js---------------js源文件夾
|- css--------------css源文件夾
|- index.html-----頁面文件
|- Gruntfile.js---grunt配置文件(注意首字母大寫)
|- package.json---項目包配置文件
這些文件也基本都是空的,接下來安裝Grunt ,這個時候就用到了 npm 的命令行,在哪裏使用這些命令行呢?
看WebStorm工具如圖,左下角:
出現這個項目的路徑
進入grunt_mjt這個文件夾下
接下來使用npm 命令下載依賴的包
npm install -g grunt-cli
npm install grunt --save-dev (這個--save會常常用到,頻率是最高的一個)下載時間長一些,這個就是我剛剛講的多是npm在國外的緣由,cnpm可能會快一點。
而後在Gruntfile.js文件中添加內容:
module.exports = function(grunt){ // 1. 初始化插件配置 grunt.initConfig({ //主要編碼處 }); // 2. 加載插件任務 // grunt.loadNpmTasks('grunt-contrib-concat'); // 3. 註冊構建任務 grunt.registerTask('default', []); };
必須添加,否則配置文件缺乏,grunt不能啓動,看是否成功,命令grunt,出現Done表示安裝成功
可是這個時候沒有安裝任何插件,這一點能夠再Gruntfile.js中體現,咱們只是單純的安裝了一個工具
接下來咱們安裝插件 插件的做用的都有必定的功能,就是java中的類包同樣,在java中有的是提供時間的,有的是鏈接數據庫的,一樣,Grunt構建化工具的插件也有相似的功能,有的插件是壓縮js的,有的是合併js等文件的,接下來介紹幾個,並交你們如何使用
grunt-contrib-clean——清除文件(打包處理生成的)
grunt-contrib-concat——合併多個文件的代碼到一個文件中
grunt-contrib-uglify——壓縮js文件
grunt-contrib-jshint——javascript語法錯誤檢查;
grunt-contrib-cssmin——壓縮/合併css文件
grunt-contrib-htmlmin——壓縮html文件
grunt-contrib-imagemin——壓縮圖片文件(無損)
grunt-contrib-copy——複製文件、文件夾
grunt-contrib-requirejs**——合併壓縮requirejs管理的全部js模塊文件
grunt-contrib-watch——實時監控文件變化、調用相應的任務從新執行
接下來怎麼使用這些插件,安裝過程都是同樣的,我舉例兩三個給你們看一看
進入Grunt官網 http://www.gruntjs.net/plugins
這都是全部的插件,而後點擊插件列表中的任何一個,接下來咱們講
grunt-contrib-concat——合併多個文件的代碼到一個文件中
這個插件,而後搜索這個插件,進入這個插件的詳情頁面,grunt是一個官網名字的前綴,因此咱們通常在搜索插件的時候只搜索後面的關鍵字就能夠了,好比:contrib-concat
而後進入該插件的詳情頁,咱們進入他的詳情頁面主要是由於它給了咱們許多提示,如圖:
一、npm install grunt-contrib-concat --save-dev
二、在js文件夾下面建立兩個js文件,如圖:
每一個js文件寫了對應的就函數,同時咱們在項目上線過程當中,若是想提升性能的話,固然是要合併咱們本身寫的js文件而後將它最大程度的壓縮。
因此這就用到了咱們剛剛那個詳情頁面的那些命令行,第一步已經安裝好了,接下來繼續看grunt-contrib-concat插件詳情頁的另一個標題,如圖Usage Examples:
它已經默認的給咱們舉了列子,該如何在Gruntfile.js文件中配置這個插件,接下來講一下他們的含義,這是我配置文件中的代碼,同時給出項目目錄結構,你們就可以很清楚的瞭解:
concat: { options: { //可選項配置 separator: ';' //使用;鏈接合併 }, build: { //此名稱任意 src: ["src/js/*.js"], //合併哪些js文件 dest: "mjt/js/mjt.js" //輸出的js文件 } }
3.配置插件在配置文件的屬性後,再繼續配置任務對他進行加載,這個任務是什麼,就是在咱們執行命令的時候須要一個指示,打個比方吧:咱們上面的合併,剛剛配置的屬性文件是這樣子的,
那麼咱們通常把前面的concat當作這個插件的任務名,而後把對這個任務名就行加載,怎麼作,剛剛咱們說了那個插件的詳情頁的代碼,如圖:
這行代碼就是加載任務,咱們把括號裏面的換成 concat就行了,最後對他註冊,整個配置文件配置圖:
這個就是在咱們合併js文件的插件的整個操做,而後在中斷執行grunt操做
就能夠對兩個文件進行合併了。
接下來說壓縮,怎麼壓縮呢,一樣的流程,去查找壓縮的插件在官網,而後進入詳情頁,一樣找到他的加載命令,加載任務命令,在Gruntfile.js配置的列子,我直接寫命令了,直接看。
一、安裝:npm install grunt-contrib-uglify --save-dev
二、配置屬性:
uglify: { my_target: { files: { 'mjt/mjt.min.js': ['mjt/js/mjt.js'] } } }
三、加載任務:
grunt.loadNpmTasks('grunt-contrib-uglify');
四、註冊:
grunt.registerTask('default', ['concat','uglify']);
最終如圖:
module.exports = function(grunt){ // 1. 初始化插件配置 grunt.initConfig({ //主要編碼處 concat: { options: { //可選項配置 separator: ';' //使用;鏈接合併 }, build: { //此名稱任意 src: ["src/js/*.js"], //合併哪些js文件 dest: "mjt/js/mjt.js" //輸出的js文件 } }, uglify: { my_target: { files: { 'mjt/mjt.min.js': ['mjt/js/mjt.js'] } } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); // 2. 加載插件任務 grunt.loadNpmTasks('grunt-contrib-concat'); // 3. 註冊構建任務 grunt.registerTask('default', ['concat','uglify']); };
這是合併插件和解壓縮插件放到一塊兒了
最後在中斷執行默認命令 grunt結果: