gulp自動化構建工具的使用

gulp自動化構建工具：

　　把前端開發常見的處理（「搬磚」）程序，經過一個工具模塊管理起來，只需配置一次，達到自動處理目的，簡化開發，提升效率!！

 

安裝：

　1.全局安裝(全局安裝一個gulp命令)

　　A.下載安裝：

　　cnpm：cnpm i gulp -g

　　若是cnpm安裝有問題：可以使用yarn安裝

　　yarn:   yarn global add gulp

　　B.測試

　　gulp -v

 

     2.本地安裝（引入依賴模塊，支持不一樣版本的項目運行）

　　A.安裝

　　　a.建立一個新文件夾，初始化package.json

　　　　cnpm:  cnpm init -y

　　　　yarn:  yarn init -y 

　　　b.安裝本地gulp

　　　　cnpm:  cnpm i gulp -D(安裝開發依賴：全稱：--save-dev)　

　　　　yarn:  yarn add gulp -D

　　　c.配置：

• •  建立一個gulpfile.js文件，與package.json同目錄
  • 引入gulp核心模塊

    1 var gulp =require('gulp');

     

  • 配置gulp任務 ：語法：gulp.task(name[, deps], fn)

    • 參數：
      name 任務名稱
      deps 可選，包含任務列表的數組
      fn 回調函數，任務執行的代碼

      1 var gulp = require('gulp');
      2  
      3 gulp.task('default', function() {
      4     console.log("測試");   
      5 });

　　　　　　

• • 　　執行任務
    • 　　gulp 任務名稱  或者  gulp 任務名稱是default就能夠省略

      1 gulp myTask（任務名）

 

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

下一篇將介紹gulp經常使用插件的使用