如何利用gulp構建前端自動化

1，使用 gulp.watch 來監聽文件自動打包

在上篇文章中，介紹瞭如何利用webpack來爲項目作打包編譯等工做，其中介紹到在咱們開發的時候，常常改動js，由於咱們文件是引用編譯後的js文件，若想讓程序正常運行，必須 webpack 一次。這樣會大大下降咱們的工做效率。

網上找到說在 webpack.config.js 中添加 watch : true ，運行 webpack -w 便可？
然而，我發現並無什麼卵用？？在此如有各位朋友知道怎麼作的，在下面留言，謝謝。

既然，不能用，可是我不能就這樣了，我一直據說 當作項目的時候，webpack + gulp 會更好哦。

天然，我就想到了 gulp。

2, gulp

http://www.gulpjs.com.cn/
gulp特別簡單，在此不作多介紹，看我在項目中實際應用。

var gulp = require('gulp')

var webpack = require('gulp-webpack')

var webpackConfig = require('./webpack.config.js')

gulp.task('watch',function(){
    gulp.src('./src/script/*.js')
        .pipe(webpack(webpackConfig))
        .pipe(gulp.dest('built'))
})

gulp.task('default', function(){
    // console.log('23')
    gulp.watch('./src/script/*.js', ['watch'])
})

整個思路很簡單，利用 gulp 來創建任務，並監聽項目中js文件是否有變更，如有變更，就利用 gulp-webpack 來運行 webpack 的配置文件。

其中 pipe 是通道的意思，也至關於回調函數，好比 watch 任務的邏輯就是 當js文件變更後，找到 全部的 js 文件，經過運行 webpack 後，再去寫入到 built 文件中去。