首先需要解釋的是什麼是一個build系統：
一個build系統也被稱爲一個通用的任務執行器，對於重複執行的任務，進行自動化，標準化執行。
這些重複性的任務可以是任意工作任務，包括編譯前的預處理工作任務，例如對css和Java的處理，同時也包括一些類似部署過程的處理任務等等。
同時需要注意的是build 系統通常會與其他工具協同工作，比如：包管理器(package manager),我們按照build的階段，解讀下，這個工作流程，通常會涉及到哪些工具的集成應用。
現代化的build系統通常包括三個核心組件：包管理器(Package Managers) ,預處理器(Preprocessors),任務執行器和相關工具(Task Runners & Build Tools).
包管理器 - 負責自動安裝，升級，和刪除相關的依賴模塊包，包括模塊包和模塊庫。
常見的包管理器主要包括兩個： BOWER和Node.js使用的NPM包管理器，所以對於新手來說，通常會爲在什麼情況下使用Bower或NPM感覺困惑，簡單的理解是你用BOWER來管理通用的依賴模塊，比如jQuery,AngularJS,Backbone等等，而npm則用在非js的環境下，通常包括你常常使用的一些工具模塊，通常會用在build的生成階段，例如Gulp,Bower等。
而在預處理階段，我們會用到的包括SASS等來對css進行預處理，而對於java我們會用到Coffee和Type,對於HTML我們會用到HAML,Jade,Markdown,和Slim.
預處理階段非常重要，是形成高效build工作流程的關鍵，在這個階段我們會充實更多的功能特性和優化語法等等以達到不斷優化轉爲本地代碼的效率和質量。
預處理階段，使用的技術，大多數工作經驗高於三年的人，都會比較熟悉了，例如Coffee,Haml等等。
現在我們分析下任務運行器，這個階段，我們經常用的工具包括：Gulp和Grunt.這兩款工具都可以運行在Node.js環境下，兩款工具使用方法和內部結構類似。
我們看一下Gulp常用的語法代碼片段：
var gulp=require('gulp');
var uglify=require('gulp-uglify');
//上面的代碼首先就是聲明，會用到的相關模塊，接下來，就可以執行build任務，例如：
gulp.task('s',function(){
//code
});
通常我們會在任務裏處理類似對圖片進行壓縮，複製文件，或啓動部署過程。
後面我們就會使用類似這樣的命令來進行執行上面的工作任務：
gulp s
接下來，我們還可以聲明另外一個常用的工作任務：
gulp.task('watch',function(){
gulp.watch('app/js/**/*.js',['s']);
});
watch任務的作用就是對一組給定的文件進行監控，如果發現這些文件發生改變，就會執行第二個參數中指定的工作任務。
此外我們通常還會定義default工作任務，也就是默認執行的工作任務，例如：
gulp.task('default',['s','watch']);
當你在命令行窗口執行gulp但是沒有指定具體工作任務的時候，就執行默認的任務，而且這些任務列表裏的任務都是在相同的時間，異步執行的。
事實上，默認的執行模式，在後面你可以進行覆蓋，改變默認的執行默認。
現在我們討論下是使用gulp還是grunt!
這裏需要明確的是，這兩款工具本質上都是做一樣的工作，因此具體使用哪種工具，對結果產生不了任何不同的影響，但是很多人都認爲gulp在特別的幾個方面要優秀於grunt!
grunt更大，使用到的組件更多，因此學習週期可能會更長，如果是新手的話，同時gulp看來變的越來越普及，根據社區信息，google也在開始使用gulp,因爲gulp更容易學習和使用，因此也更容易維護，例如你丟下gulp的項目三個月，再回頭接着處理的時候，不會感覺太困難，因爲它的確相對非常簡單，容易梳理。
相反的如果你使用grunt，如果你去維護三個月之前的項目，你會發現你因爲遺忘了很多重要的信息，而變得對grunt 項目無從下手，事實上，這種情況發生在每個程序員身上，無論是否具備豐富的項目經驗。
之所以有這樣的差別，是因爲grunt使用了巨量的配置文件，而gulp則使用了結構清晰，利於維護的代碼編寫。
很顯然維護繁多的配置信息，與維護一段簡潔，邏輯清晰的代碼，哪種更有效率，結果是不言自明的。
另外一個使用gulp的原因是，gulp要比grunt快，這是因爲它使用了流技術，而grunt則選用的是文件，這樣gulp在讀寫方面明顯更加具備優勢，另外gulp採取了異步的方式，這樣可以獲得更大的併發處理性能。
本文作者微信公衆號 elearn007歡迎關注交流！
文章歡迎轉載，歡迎交流，歡迎關注，一起交換經驗，交換知識儲備，學習資源等等！