搭建web工作流實現自動化

1、為何要搭建工作流？

• web開發中存在很多重復性操作，花費我們大量時間
  
  • 使用less或sass書寫樣式后需要編譯成css文件
  • 對js,css,image,html文件進行緊縮
  • 對項目依賴的框架進行記錄管理

2、使用gulp工作流開發項目的文件目錄

┠─dist ━━━━━━━━━━━━━┱─images
(項目上線代碼)                  ┠─styles
                              ┠─scripts
                              ┖─index.html
┠─src  ━━━━━━━━━━━━━┱─images
(項陌生產源碼)                  ┠─styles
                              ┠─scripts
                              ┖─index.html 

┠─node_modules(bower_components) (存儲了項目所需要的包)
┠─gulpfile.js (控制工作流的js文件)
┠─package.json （記錄項目的版本，名稱，主文件，開發依賴，和生產依賴）
┖─README.md (項目的說明和幫助文檔)

• Node的gulp包來構建web工作流，將控制工作流代碼放置在gulpfile.js文件中
• pakage.json記錄了開發該項目的開發依賴工具包，和生產階段依賴工具包
• src是我們開發時候編寫代碼的文件夾，dist文件夾是由工作流自動映照src生成的，其中對
  src中的文件進行緊縮，混淆，等1系列操作

3、搭建的工作流實現了哪些自動化

1.gulp工具搭建:

• 使用任務的情勢將以下流程抽象成1個js文件，
• 自動監聽源碼文件的變化產出目標文件，
• 并且實現閱讀器同步

2.實現的功能:

• less文件

  • 編譯：gulp-less
  • 合并：gulp-concat
  • 緊縮：gulp-minify-css

• html

  • 緊縮：gulp-minify-html

• image

  • 最小化圖象：gulp-imagemin

• js

  • 合并：gulp-concat
  • 混淆： gulp-uglify

4、工作流搭建

• 創建文件目錄：
  
  • package.json文件是通過npm init 創建，創建時候填入信息
  • 其他文件或目錄直接創建便可
• 編寫gulpfile.js文件
  
  • 創建less任務
  • 創建image任務
  • 創建js任務
  • 創建html任務
  • 創建主任務，依賴以上任務履行，監聽src里面的文件，當文件變化代用以上任務

github上面workflow