搭建web工作流實現(xiàn)自動化

1、為何要搭建工作流？

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

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

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

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

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

3、搭建的工作流實現(xiàn)了哪些自動化

1.gulp工具搭建:

• 使用任務(wù)的情勢將以下流程抽象成1個js文件，
• 自動監(jiān)聽源碼文件的變化產(chǎn)出目標(biāo)文件，
• 并且實現(xiàn)閱讀器同步

2.實現(xiàn)的功能:

• less文件

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

• html

  • 緊縮：gulp-minify-html

• image

  • 最小化圖象：gulp-imagemin

• js

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

4、工作流搭建

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

github上面workflow