前端自動化構建工具gulp入門

學過java的都知道馬士兵老師,他有一句口頭禪“穿二手鞋不如穿一手鞋”,一手鞋指的就是官方文檔。官方文檔看不懂,沒關系,先看這里,看完這里再去看官方。
官檔gulp.js中文網

理解gulp的特點
  • 任務化:gulp通過創建和配置一個個任務(task),來啟動任務去構建前端項目
  • 基于流 :gulp有自己的內存,在任務啟動時,gulp首先讀取(輸入流)文件到gulp內存,在gulp內存中進行操作(合并、壓縮等),然后輸出(輸出流)到本地。
  • 異步(也可同步):gulp的任務不是同步執行的,它不需要等一個任務執行完再去啟動執行別的任務,這點下面會提到
gulp.src() //讀取文件到內存
gulp.dest()//輸出文件到本地
gulp.task()//注冊任務
第一個gulp任務
//在gulpfile.js中注冊一個任務
gulp.task('taskName',function(){
  //配置任務的操作
})

啟動任務:在cli中輸入: gulp taskName taskName是你剛剛注冊的任務名
如果你的gulp任務很多的話,要一個一個去啟動很麻煩,這時可注冊默認任務,通過默認任務來啟動其他任務

gulp.task('default',['taskName1','taskName2'])

啟動默認任務只需在cli中輸入gulp

常用插件

gulp-concat 合并文件(js/css)
gulp-uglify壓縮js文件
gulp-rename文件重命名
gulp-less編譯less
gulp-clean-css壓縮css
gulp-livereload實時刷新

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容