gulp實用配置（1）——demo

在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文件，包括開發和生產兩個階段，用來知足大部分對模塊化和資源管理需求特別強的項目。