❶ 前端工程師都有用哪些比較靠譜的小工具
1、TakeColor 取色器
對於前端開發來說，和顏色、圖片打交道是難免的，有的時候想要在ps外面獲取顏色.
2、CoolFormat 源代碼格式化工具
CoolFormat，不僅僅適用於前端，因為它支持很多語言源代碼的格式化，可以在上面的開始菜單中選擇你要格式化的語言種類，這里我選擇的是js，然後將一串很亂的js代碼粘貼到下面的文本框裡面，點擊快速格式化.
3、做筆記的小幫手——有道雲筆記
其實這有道雲筆記不算是小工具了，在這之前，我一直都是用txt記事本記東西的
❷ 前端中怎樣將寫好的網頁在真機上進行測試
使用grunt+bower+webstorm作為前端開發工具，在開發移動端的時候，怎麼才能直接在真機上進行頁面調試？
舉個例子就是在IDE里寫html，手機上也會同步展示。
-------分隔線------
在各位大神的推薦下使用了browser-sync，發現真是神器啊，現在使用grunt-watch + browser-sync 可以實現了實時編譯。這里有個前端大牛裙前面是五五二中間是就一二後面是思五五連起來可以了，不是來學習請不要加了
在使用的過程中發現了一個問題，就是使用ip在本機是可以訪問的
http://192.168.2.224:3000/src/html/index.html
但是發到手機上就訪問不了了
確定是在同一個網段，路由器配置也檢查過了。。。實在找不到原因了
❸ 如何對前端性能進行優化
前端開發代碼優化、可維護性、瀏覽器兼容性是非常重要的課題。從實際的工程應用角度出發，最常遇見的前端優化問題。前端性能進行優化規則，基本可以涵蓋現在前端大部分的性能優化原則了，很多更加geek和精細優化方法都是從這些原則裡面延伸出來的。
前端性能進行優化都有哪些規則
減少HTTP請求次數
盡量合並圖片、CSS、JS。比如載入一個頁面有5個css文件的話，把這個5個文件合成一個的話，就只需要發出一次http請求，節省網路請求時間，加快頁面的載入。
2. 使用CDN
網站上靜態資源即css、js全都使用cdn分發，包括圖片
3. 避免空的src和href
當link標簽的href屬性為空、script標簽的src屬性為空的時候，瀏覽器渲染的時候會把當前頁面的URL作為它們的屬性值，從而把頁面的內容載入進來作為它們的值。所以要避免犯這樣的疏忽。
4. 為文件頭指定Expires
Exipres是用來設置文件的過期時間的，一般對css、js、圖片資源有效。 他可以使內容具有緩存性，這樣下回再訪問同樣的資源時就通過瀏覽器緩存區讀取，不需要再發出http請求。如下例子：
新浪微博的這個css文件的Expires時間是2016-5-04 09:14:14.
5. 使用gzip壓縮內容
gzip能夠壓縮任何一個文本類型的響應，包括html，xml，json。大大縮小請求返回的數據量。
6. 把CSS放到頂部
網頁上的資源載入時從上網下順序載入的，所以css放在頁面的頂部能夠優先渲染頁面，讓用戶感覺頁面載入很快。
7. 把JS放到底部
載入js時會對後續的資源造成阻塞，必須得等js載入完才去載入後續的文件 ，所以就把js放在頁面底部最後載入。
8. 避免使用CSS表達式
舉個css表達式的例子
font-color: expression( (new Date()).getHours()%3 ? 「#FFFFFF" : 「#AAAAAA" );
這個表達式會持續的在頁面上計算樣式，影響頁面的性能。並且css表達式只被IE支持。
9. 將CSS和JS放到外部文件中
目的是緩存文件，可以參考原則4。 但有時候為了減少請求，也會直接寫到頁面里，需根據PV和IP的比例權衡。
10. 權衡DNS查找次數
減少主機名可以節省響應時間。但同時，需要注意，減少主機會減少頁面中並行下載的數量。
IE瀏覽器在同一時刻只能從同一域名下載兩個文件。當在一個頁面顯示多張圖片時，IE 用戶的圖片下載速度就會受到影響。所以新浪會搞N個二級域名來放圖片。
下面是新浪微博的圖片域名，我們可以看到他有多個域名，這樣可以保證這些不同域名能夠同時去下載圖片，而不用排隊。不過如果當使用的域名過多時，響應時間就會慢，因為不用響應域名時間不一致。
11. 精簡CSS和JS
這里就涉及到css和js的壓縮了。比如下面的新浪的一個css文件，把空格回車全部去掉，減少文件的大小。現在的壓縮工具有很多，基本主流的前端構建工具都能進行css和js文件的壓縮，如grunt，glup等。
12. 避免跳轉
有種現象會比較坑爹，看起來沒什麼差別，其實多次了一次頁面跳轉。比如當URL本該有斜杠（/）卻被忽略掉時。例如，當我們要訪問http:// .com時，實際上返回的是一個包含301代碼的跳轉，它指向的是http:// .com/（注意末尾的斜杠）。在nginx伺服器可以使用rewrite；Apache伺服器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash來避免。
另一種是不用域名之間的跳轉， 比如訪問http:// .com/bbs跳轉到http:// bbs..com/。那麼可以通過使用Alias或者mod_rewirte建立CNAME（保存一個域名和另外一個域名之間關系的DNS記錄）來替代。
13. 刪除重復的JS和CSS
重復調用腳本，除了增加額外的HTTP請求外，多次運算也會浪費時間。在IE和Firefox中不管腳本是否可緩存，它們都存在重復運算JavaScript的問題。
14. 配置ETags
它用來判斷瀏覽器緩存里的元素是否和原來伺服器上的一致。比last-modified date更具有彈性，例如某個文件在1秒內修改了10次，Etag可以綜合Inode(文件的索引節點(inode)數)，MTime(修改時間)和Size來精準的進行判斷，避開UNIX記錄MTime只能精確到秒的問題。 伺服器集群使用，可取後兩個參數。使用ETags減少Web應用帶寬和負載
15. 可緩存的AJAX
非同步請求同樣的造成用戶等待，所以使用ajax請求時，要主動告訴瀏覽器如果該請求有緩存就去請求緩存內容。如下代碼片段, cache:true就是顯式的要求如果當前請求有緩存的話，直接使用緩存
$.ajax({ url : 'url', dataType : "json", cache: true, success : function(son, status){ }
16. 使用GET來完成AJAX請求
當使用XMLHttpRequest時，瀏覽器中的POST方法是一個「兩步走」的過程：首先發送文件頭，然後才發送數據。因此使用GET獲取數據時更加有意義。
17. 減少DOM元素數量
這是一門大學問，這里可以引申出一堆優化的細節。想要具體研究的可以看後面推薦書籍。總之大原則減少DOM數量，就會減少瀏覽器的解析負擔。
18. 避免404
比如外鏈的css、js文件出現問題返回404時，會破壞瀏覽器的並行載入。
19. 減少Cookie的大小
Cookie裡面別塞那麼多東西，因為每個請求都得帶著他跑。
20. 使用無cookie的域
比如CSS、js、圖片等，客戶端請求靜態文件的時候，減少了 Cookie 的反復傳輸對主域名的影響。
21. 不要使用濾鏡
IE獨有屬性AlphaImageLoader用於修正7.0以下版本中顯示PNG圖片的半透明效果。這個濾鏡的問題在於瀏覽器載入圖片時它會終止內容的呈現並且凍結瀏覽器。在每一個元素（不僅僅是圖片）它都會運算一次，增加了內存開支，因此它的問題是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替，這種格式能在IE中很好地工作。如果你確實需要使用AlphaImageLoader，請使用下劃線_filter又使之對IE7以上版本的用戶無效。
22. 不要在HTML中縮放圖片
比如你需要的圖片尺寸是50* 50
那就不用用一張500*500的大尺寸圖片，影響載入
23. 縮小favicon.ico並緩存
❹ 前端構建工具Gulp.js 你知多少..(webpack/gulp/grunt)
@ TOC
閱讀本文章之前，相信你已經對前端構建工具(webpack、gulp、grunt)有一定的認知和了解了，那麼他們之間究竟有什麼區別呢？
gulp文檔上面有這么一句話 ，也就是說 gulp是一個自動化構建工具；
gulp的一些功能如下(包括但不限於):
其實Webpack和另外兩個並沒有太多的可比性
傻瓜式起步照搬官網文檔
1.安裝
2.在項目根目錄下創建一個名為 gulpfile.js 的文件：
3.運行 gulp：
默認的名為 default 的任務（task）將會被運行，在這里，這個任務並未做任何事情。
具體詳情可以查看 gulpjs.com文檔
新建一個項目gulp-test
環境:
1.新建文件以下文件如下
其中 gulpfile.js 是我們gulp的配置文件，啟動gulp默認會找個這個文件並執行；
2.接下來安裝依賴
一直按回車Enter初始化package.json文件(小技巧: npm iniy -y 可以免去繁瑣的enter步驟)
此時我們的目錄結構是這樣了
安裝依賴
這里頁面實時刷新只講這個 gulp-connect ，其他詳情可以參照 Browsersync 和文章 gulp-livereload
安裝完依賴後配置gulpfile.js如下:
大概講解一下gulpfile.js:
gulp.task 是gulp的api 定義一個使用 Orchestrator 實現的任務（task）
如上我們定義了 my-task-js ， my-task-css ， html ， clean ， default ， watch ， server 等任務，其中:
my-task-js 是將 符合所提供的匹配模式的js 進行檢測(gulp-jshint)、壓縮(gulp-uglify)、合並(gulp-concat)、重命名(gulp-rename)、輸出(gulp.dest)到/dist/js目錄下；
my-task-css 是將 符合所提供的匹配模式的sass進行編譯(gulp-sass)、壓縮(gulp-uglify)、合並(gulp-concat)、重命名(gulp-rename)、輸出(gulp.dest)到/dist/css目錄下；
html 是將 符合所提供的匹配模式的html進行監聽，如果有變化則connect.reload()
clean 是如果任務重新啟動時 刪除舊文件；
default gulp默認啟動的任務
watch gulp的api 監視文件，並且可以在文件發生改動時候做一些事情。它總會返回一個 EventEmitter 來發射（emit） change 事件。
server 依賴gulp-connect啟動一個伺服器
配置完gulpfile.js之後，我們給js和css及html加點東西:
首先js/helloworld.js
css/index.scss
index.html
運行gulp
瀏覽器效果:
接下來我們修改helloworld.js來看看是否能實時刷新
修改如下:
按保存之後，終端給我們報了一個錯:
查看js發現我們用了es6語法的聲明語句 但當前gulp無法處理es6語法，有問題解決問題，es6=>es5
解決方案:
安裝gulp-babel babel-core babel-preset-es2015
gulpfile.js修改如下:
運行
依然報上面的錯；找了一些原因發現，雖然安裝了相關依賴，卻沒有配置.babelrc文件，即babel還沒轉化es6
根目錄添加.babelrc文件
重新運行:
查看dist下的js文件
改變helloworld.js檢查頁面是否刷新
保存，頁面的天空藍換成你們喜歡的yellow顏色
修改index.scss 查看是否會刷新頁面
最後修改index.html 查看是否會刷新頁面
今天主要學習了gulp的簡單項目搭建及實時更新配置；其實gulp類似於grunt的弱化版，但更簡單好用，只是插件會少一些，目前主流的項目搭建工具主要是webpack，但依然有不少項目還用著gulp或者grunt
擴展:
下面還有一些樓主的學習筆記:
有興趣的可以多多交流@ 樓主博客
❺ 現在比較好用的前端開發工具有哪些啊
1. node.js + npm， 這個是前端工具的一個平台，沒有他們就沒有以下的工具，建立開發環境，下載開發工具，運行開發工具的利器
2. bower, 庫依賴管理器，類似於npm，但針對瀏覽器JavaScript的依賴管理，減少尋找庫，下載庫和升級庫的煩惱
3.grunt，流程自動化管理工具，將你非編程的開發步驟減到最小，grunt watch+liveReload或者grunt connect,可以使得免除你F5無盡地獄，發布和開發各種無壓力。以下大部分開發工具，都有grunt的相對應的插件，也就是說他們都能利用grunt進行自動化運行
5. 本人用less比較多，因為基本無縫兼容歷史遺留系統中的css，（而Sass語法比較特殊，還沒有專門用過，應該開發新系統的css比較好），一套css預編譯語言，可以把less語法轉成css語法，lessc是less語言編譯器，配合grunt less，編寫大型css文檔毫無壓力。
6.Phantomjs，沒有界面的瀏覽器，用js腳本控制其操作網頁。測試，抓圖，網頁流程自動化利器。配合casperjs的語法簡化功能真強庫後，控制Phantomjs就更加容易了
7. grunt PhotoBox, 利用phantomjs抓圖功能和ImageMagick圖片比較功能，在利用live-reload即時刷新功能，可以讓你開發css的時候，快速對n多個頁面進行觀察，看其前後變化。不過缺點也比較明顯，就是速度慢。但比起手動對比來看，還是非常快的。值得css開發時擁有
8. phantomCSS，這個和grunt photobox類似，都用於css開發的，差別是photobox是全局觀察差別，而這個是單元組件觀察差別，它方便你就抓頁面中某一塊元素然後進行前後比較，更加註重細節上的差異，這個比較合適組件開發時候使用。
9. jshint，幫助你快速定位JavaScript的語法錯誤和潛在的跨瀏覽器兼容性問題。在部署你JS前，用jshint檢查一下是沒錯的 。
10.UglifyJS，壓縮JavaScript代碼，使你的JS代碼可以更加快速的載入。有grunt的插件
11. browserify允許你在瀏覽器裡面使用CMD標准模塊，但本人認為它的另外一個優勢是合並代碼，開發時候可以把代碼模塊化，分成很多很多小文件，然後有調理的放到相對應文件夾下，然後最後合成單一文件。本人曾經利用browserify開發greasemonkey代碼，大大簡化了greasemonkey的開發難度和增強了greasemonkey代碼的質量。browserify有grunt插件，這樣又減少的開發步驟。
12. Karma， google開發的一個單元測試運行器，這個自己本身不是一個單元測試框架，而是配合測試單元框架的一個工具。由於前端瀏覽器眾多，就算你有live-reload這樣自動化工具，但是還是要手動打開各種瀏覽器，手動把你的單元測試在各個瀏覽器都運行一遍。這個工具目的是目的就是讓電腦能自動化打開各種瀏覽器，然後把單元測試在各個瀏覽器中自動運行一遍，讓這個步驟也能自動化了。
13.clean-css (grunt cssmin)， 我用的是grunt cssmin，但是grunt cssmin實際上背後使用的是clean-css工具，這個工具就是用來壓縮精簡css的，讓css文件大小更小。
❻ web前端開發需要用到哪些知識
前端前景是很不錯的，像前端這樣的專業還是一線城市比較好，師資力量跟得上、就業的薪資也是可觀的，學習前端可以按照路線圖的順序，
0基礎學習前端是沒有問題的，關鍵是找到靠譜的前端培訓機構，你可以深度了解機構的口碑情況，問問周圍知道這家機構的人，除了口碑再了解機構的以下幾方面：
1. 師資力量雄厚
要想有1+1>2的實際效果，很關鍵的一點是師資隊伍，你接下來無論是找個工作還是工作中出任哪些的人物角色，都越來越愛你本身的技術專業前端技術性，也許的技術專業前端技術性則絕大多數來自你的技術專業前端教師，一個好的前端培訓機構必須具備雄厚的師資力量。
2. 就業保障完善
實現1+1>2效果的關鍵在於能夠為你提供良好的發展平台，即能夠為你提供良好的就業保障，讓學員能夠學到實在實在的知識，並向前端學員提供一對一的就業指導，確保學員找到自己的心理工作。
3. 學費性價比高
一個好的前端培訓機構肯定能給你帶來1+1>2的效果，如果你在一個由專業的前端教師領導並由前端培訓機構自己提供的平台上工作，你將獲得比以往更多的投資。
希望你早日學有所成。
❼ grunt對前端開發有什麼用處
事實上前端構建過程一般都是建立在前後分離基礎上的，你要想讓自己的構建過程清晰、簡單和方便，請首先將自己的項目前後實現分離。當然這個有難度，所以你的這個場景並不是非常適合gruntjs通常的構建模式。 對應問題講完，再給你一些建議。
npm相關的規則自不必多說，所有依賴的模塊都需要安裝在相對目錄的node_moles下。但是你完全可以在版本控制工具(svn/git)中添加忽略文件配置將這些個文件和文件夾只配置在本地使用不提交版本控制工具，這樣發布代碼使用版本控制的最新代碼加加上編譯(ant/maven) 自然妥了。
修改資源文件引入路徑的問題方式方法也有很多，你可以藉助java去配置開發環境和線上發布環境的不同路徑前綴，只需要使用gruntjs構建的時候不要修改文件名就得了(不一定非得搞成**.min.css)， 至於js的map文件，通常是需要跟隨壓縮js文件一起發布的，這個是方便給前端調試在線上發現問題的，map文件的引入是ajax非同步的，不影響頁面載入(或者說影響很小)。 另外gruntjs也有插件去修改js、css引入路徑的插件，不過你最好熟悉其原理才不致容易出錯。
能夠問出來這個問題，說明你不是前端，或者說還不是一個基本靠譜的前端，這屬於單純的基礎技術層面的東西。 如果所有的css、js都應用於當前一個頁面，且都用到了，並且文件合並的順序是對的，自然是可以的，除此之外的情形都有可能出錯，前端構建只是讓前端更省事的處理自己的代碼，並不能幫你寫代碼或者幫助你學習和容錯，建議你更好的夯實基礎，再使用這樣相對復雜的構建工具。
這個不是問題，npm安裝依賴包是綠色化的，只要在有條件下下載安裝完，U盤拷走就是了。
後記： 看起來你是一個後台偏多一點，前端略懂的開發，或許我的 f2e-server 更適合你， 這個是一套類似JSP編程式的開發聯調和構建工具，只是<%中間變成了js%>。 詳情可以檢索關鍵字 f2e-server.
❽ 怎樣用grunt創建gruntfile文件
工具/原料
NodeJs
Windows系統
方法/步驟
要使用Grunt，第一件事是安裝Node.js。（即使你沒用過Node.js也不用擔心——你只需安裝它讓Grunt能運行。）
安裝了Node.js之後，用命令行工具執行以下命令：
$ npm install -g grunt-cli
要確認Grunt是否正確安裝，可以使用以下命令：
$ grunt --version
下一步是在你的項目的根目錄下創建package.json和gruntfile.js兩個文件。
創建package.json文件
這個JSON文件讓我們指定我們的開發環境所依賴的必須模塊。有了它，項目的所有開發者都能保證安裝上一致的必須模塊，從而保證所有人擁有一樣的開發環境。
在項目根目錄下的pacakge.json文件中寫上：
{
"name" : "SampleGrunt",
"version" : "0.1.0",
"author" : "Brandon Random",
"private" : true,
"devDependencies" : {
"grunt" : "~0.4.0"
}
}
然後在命令行工具運行：
$ npm install
該命令告訴npm 需要安裝的必須模塊，npm會安裝它們，自動保存在項目根目錄下一個叫做 node_moles 的文件夾里。
創建gruntfile.js文件
gruntfile.js 文件本質上就是一個wrapper函數，接受grunt作為參數：
mole.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
grunt.registerTask('default', []);
};
現在你已經可以在項目根目錄下運行grunt命令行工具了。
$ grunt
> Task "default" not found. Use --force to continue.
這里我們只指定了Grunt作為必須模塊，還沒定義任何任務。接下來我們就要指定任務和必須模塊。首先來看如何拓展package.json文件。
拓展package.json文件
使用Node.js最好的一點，就是它可以根據package.json文件的內容，一次性查找和安裝多個package。要安裝我們項目的所有必須任務，只須在package.json文件中加上以下內容：
{
"name" : "SampleGrunt",
"version" : "0.1.0",
"author" : "Mike Cunsolo",
"private" : true,
"devDependencies" : {
"grunt" : "~0.4.0",
"grunt-contrib-cssmin": "*",
"grunt-contrib-sass": "*",
"grunt-contrib-uglify": "*",
"grunt-contrib-watch": "*",
"grunt-cssc": "*",
"grunt-htmlhint": "*",
"matchdep": "*"
}
}
那麼如何實現安裝？你肯定已經猜到了：
$ npm install
使用Grunt載入任務
package安裝好後，還必須被Grunt載入才能為我們所用。使用 matchdep，我們用一行代碼就可以自動載入所有任務。這是開發流程的一大優化，因為現在我們只須把必須任務列表寫在package.json一個文件里，便於管理。
在gruntfile.js里，grunt.initConfig之上，寫上以下代碼：
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
要是沒有matchdep，我們就必須為每一個必須任務寫一次grunt.loadNpmTasks(「grunt-task-name」); ，隨著我們使用的任務的增加，這些載入任務的代碼很快就會變得相當繁冗。在Grunt載入這些任務前，我們還可以指定設置選項。
現在我們需要創建我們的HTML文件（index.html）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<title>Enter your first name</title>
<link rel="stylesheet" href="build/css/master.css">
</head>
<body>
<label for="firstname">Enter your first name</label>
<input id="firstname" name="firstname" type="text">
<p id="namevalidation" class="validation"></p>
<script type="text/javascript" src="build/js/base.min.js"></script>
</body>
</html>
用HTMLHint驗證HTML
在grunt.initConfig里加入下列設置代碼：
htmlhint: {
build: {
options: {
'tag-pair': true,
'tagname-lowercase': true,
'attr-lowercase': true,
'attr-value-double-quotes': true,
'doctype-first': true,
'spec-char-escape': true,
'id-unique': true,
'head-script-disabled': true,
'style-disabled': true
},
src: ['index.html']
}
}
一般來說，一個plugin的設置方法如下：plugin的名稱（去掉grunt-contrib-或grunt-前綴），選擇使用此plugin的一個或多個對象（在這里可以給不同文件設置此plugin 的不同選項），一個選項object，以及plugin要作用的對象。現在，如果我們用命令行工具運行grunt htmlhint，該plugin就會檢查我們在src里指定的HTML文件，驗證其中有沒有錯誤！但是每個小時都要手動運行幾次這個任務，很快就讓人覺得很繁瑣了。
自動化任務運行
watch是一個特殊的任務，它可以在目標文件保存時自動觸發一系列任務的運行。在grunt.initConfig里加入以下設置：
watch: {
html: {
files: ['index.html'],
tasks: ['htmlhint']
}
}
然後，在命令行工具中運行grunt watch命令。現在，你可以試試在index.html里加一行注釋，保存文件。你會注意到，保存文件時會自動觸發HTML的驗證！這是對開發流程的一大優化：在你寫代碼時，watch任務就會默默同時為你驗證代碼，如果驗證失敗任務就會報告失敗（它還會告訴你問題在哪）。
注意grunt watch任務會一直運行，直到命令行工具關閉，或手動停止（control+c在Mac中)。
保持JavaScript極簡
讓我們來寫一個驗證用戶輸入的名字的JavaScript文件。簡便起見，我們這里只檢查其中是否含有非字母的字元。我們的JavaScript會使用strict模式，這可以防止我們寫可用但低質量的JavaScript。創建assets/js/base.js文件並在其中寫上：
function Validator()
{
"use strict";
}
Validator.prototype.checkName = function(name)
{
"use strict";
return (/[^a-z]/i.test(name) === false);
};
window.addEventListener('load', function(){
"use strict";
document.getElementById('firstname').addEventListener('blur', function(){
var _this = this;
var validator = new Validator();
var validation = document.getElementById('namevalidation');
if (validator.checkName(_this.value) === true) {
validation.innerHTML = 'Looks good! :)';
validation.className = "validation yep";
_this.className = "yep";
}
else {
validation.innerHTML = 'Looks bad! :(';
validation.className = "validation nope";
_this.className = "nope";
}
});
});
讓我們用UglifyJS來極簡化這個源代碼，在grunt.initConfig中加上以下設置：
uglify: {
build: {
files: {
'build/js/base.min.js': ['assets/js/base.js']
}
}
}
UglifyJS會替換所有的變數和函數名，剔除所有空白和注釋，從而生成占據最小空間的JavaScript文件，對發布非常有用。同樣地，我們需要設置一個watch任務來使用它，在watch的設置里加入以下代碼：
watch: {
js: {
files: ['assets/js/base.js'],
tasks: ['uglify']
}
}
9
現在我們有了一個靜態HTML頁面，一個存放Sass和JavaScript源文件的assets文件夾，一個存放優化後的CSS和JavaScript的build文件夾，以及package.json文件和gruntfile.js文件。
至此你已經有了一個不錯的基礎來進一步探索Grunt。像之前提到的，一個非常活躍的開發者社區在為Grunt開發前端plugin。我建議你現在就到plugin library 去看看那300個以上的plugin。
❾ grunt，gulp和webpack有什麼區別和各自的優缺點
Gulp應該和Grunt比較，他們的區別我就不說了，說說用處吧。Gulp / Grunt 是一種工具，能夠優化前端工作流程。比如自動刷新頁面、combo、壓縮css、js、編譯less等等。簡單來說，就是使用Gulp/Grunt，然後配置你需要的插件，就可以把以前需要手工做的事情讓它幫你做了。
❿ 如何使用Grunt打造前端自動化工作流
安裝 grunt-cli
1. 基於node環境 npm包管理。
2. 卸載舊版本grunt(沒裝過請忽略)
npm uninstall grunt -g
安裝
grunt-clinpm install grunt-cli -g
安裝 grunt-init
npm install grunt-init -g
可選安裝，grunt-init是個腳手架工具，它可以幫你完成項目的自動化創建，包括項目的目錄結構，每個目錄里的文件等。具體情況要看你運行 grunt-init指定的模板，以及創建過程中你對問題的回答。
配置 grunt
從Grunt官網下載package.json Gruntfile.js 文件放到項目根目錄，並對文件進行修改配置.
package.json //項目自動化所依賴的相關插件。
Gruntfile.js //項目自動化工作流配置文件，重要