構建工具：grunt、Glup、webpack

相關程式碼已上傳至github

怎麼是專案構建？

1. 編譯專案中的js, sass, less；
2. 合併js/css等資原始檔；
3. 壓縮js/css/html等資原始檔；
4. JS語法的檢查。

構建工具的作用?

簡化專案構建, 自動化完成構建。

構建工具

grunt、gulp、webpack

grunt

1.官網：https://www.gruntjs.net/

2.參考文件：http://www.cnblogs.com/wangfupeng1988/p/4561993.html

3.常用的外掛:

1. * grunt-contrib-clean——清除檔案(打包處理生成的)
2. * grunt-contrib-concat——合併多個檔案的程式碼到一個檔案中
3. * grunt-contrib-uglify——壓縮js檔案
4. * grunt-contrib-jshint——javascript語法錯誤檢查；
5. * grunt-contrib-cssmin——壓縮/合併css檔案
6. * grunt-contrib-htmlmin——壓縮html檔案
7. * grunt-contrib-imagemin——壓縮圖片檔案(無損)
8. * grunt-contrib-copy——複製檔案、資料夾
9. * grunt-contrib-requirejs**——合併壓縮requirejs管理的所有js模組檔案
10. * grunt-contrib-watch——實時監控檔案變化、呼叫相應的任務重新執行

gulp

1.官網：https://www.gulpjs.com.cn/

2.相關外掛:

• * gulp-concat : 合併檔案(js/css)
• * gulp-uglify : 壓縮js檔案
• * gulp-rename : 檔案重新命名
• * gulp-less : 編譯less
• * gulp-clean-css : 壓縮css
• * gulp-livereload : 實時自動編譯重新整理
• * 重要API
• * gulp.src(filePath/pathArr) :
• * 指向指定路徑的所有檔案, 返回檔案流物件
• * 用於讀取檔案
• * gulp.dest(dirPath/pathArr)
• * 指向指定的所有資料夾
• * 用於向資料夾中輸出檔案
• * gulp.task(name, [deps], fn)
• * 定義一個任務
• * gulp.watch()
• * 監視檔案的變化 

webpack

1.https://www.webpackjs.com/

2.http://guowenfh.github.io/2016/03/24/vue-webpack-01-base

3.https://github.com/onface/webpack-book

4.https://www.jianshu.com/p/bb48898eded5

之前寫過一篇關於webpack：https://www.cnblogs.com/zhengyeye/p/9260235.html

End

grunt與gulp指令大同小異，只是看自己喜好使用；

webpack其實更流行。