構建工具：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：http://www.javashuo.com/article/p-bnagxcjj-bu.html

End

grunt與gulp指令大同小異，只是看本身喜愛使用；

webpack其實更流行。