gulp實用配置的介紹與使用

簡介：

gulp是前端開發過程中建構程式碼的工具，是自動化專案的建構利器；她不僅能對網站資源進行最佳化，而且在開發過程中許多重複的任務能夠使用正確的工具自動完成；使用她，我們不僅可以很愉快的編寫程式碼，而且大大提高我們的工作效率。

gulp是基於Nodejs的自動任務運行器， 她能自動化地完成javascript/coffee/sass/less/html/image/css 等文件的測試、檢查、合併、壓縮、格式化、瀏覽器會自動刷新、部署文件生成，並監聽文件在更改後重複指定的這些步驟。在實現上，她借鑒了Unix作業系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操作上非常簡單。透過本文，我們將學習如何使用Gulp來改變開發流程，從而使開發更加快速且有效率。

gulp 和 grunt 非常類似，但相較於 grunt 的頻繁 IO 操作，gulp 的流操作，能更快地更方便地完成建置工作。

這份配置我把它稱作demo測試配置，因為在我工作的時候，經常需要快速出效果或實現某些功能，你沒有時間去自己實現，那麼就需要找一些現有的例子或插件。

不過這些demo或外掛很多時候需要在行動端查看或啟動一個伺服器，所以這份設定的任務主要就是啟動一個本地伺服器，可以在行動裝置和PC端都同時查看，另外在修改程式碼的時候還能自動刷新，不用每次都切換應用程式刷新，特別是行動端，可以省去很多麻煩。

詳細程式碼如下：

gulpfile.js:

var gulp = require('gulp'),
    browserSync = require('browser-sync').create();// 启动 browserSync 服务，自己启动server，并且为浏览器实时刷新提供服务gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: './'},
    files: './demo/**/*',
    browser: ["chrome"]
  })
})// 默认任务，在命令行输入`gulp`来启动任务gulp.task('default', gulp.parallel('browserSync'))

package.json:

{  "name": "gulp-demo",  "version": "1.0.0",  "description": "",  "main": "index.js?1.1.11",  "scripts": {"test": "echo \"Error: no test specified\" && exit 1"
  },  "author": "",  "license": "ISC",  "devDependencies": {"browser-sync": "^2.18.12","gulp": "gulpjs/gulp#4.0"
  }
}

#文件夾結構：

XX—

　　|— demo

　　|— gulpfile.js

       |— package.json

 

這份設定裡只用到了一個外掛程式 browserSync ，這個外掛程式會啟動一個localhost伺服器，可以自動刷新，並且行動裝置和PC端同步。

browserSync是一個很強大的插件，這裡有一份關於它的中文文檔，簡單易懂，需要的可以自己查看。另外這裡有一個小技巧就是，我們可以直接透過該插件的設定選項去監聽檔案修改，而不需要使用gulp的watch功能，更加簡單。 

以上是gulp實用配置的介紹與使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！