如何利用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 文件中去。