在React和Vue推進下，現在很多人都在使用webpack作為自動化構建工具，但其實在很多時候我們并不是一定需要用到它，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","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功能，更加簡單。

下一篇會寫一個相對詳細的gulpfile文件，包括開發和生產兩個階段，用來滿足大部分對模塊化和資源管理需求特別強的項目。

?

總結

以上是生活随笔為你收集整理的gulp实用配置（1）——demo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。