本文承接上一篇
webpack2教程，本文所说的项目目录依旧是webpack2
在上一篇中，我们搭建了基于webpack的vue开发环境，但是有一个问题是，每次编译代码都需要手动输入命令，是不是可以自动完成呢。
这里将借助pm2和gulp
pm2
pm2，不是pm2.5，是一个node.js的进程管理器
安装
npm i -g pm2
用法
# 显示所有进程状态
pm2 list
# 启动一个进程，别名是app
pm2 start app.js --name app
# 监控所有进程
pm2 monit
# 显示所有进程日志
pm2 logs
# 停止所有进程
pm2 stop all
# 重启所有进程
pm2 restart all
# 停止指定的进程
pm2 stop name/pid
# 重启指定进程
pm2 restart name/pid
配置文件
pm2启动一个进程除了直接指定外还可以通过配置文件，可以是json文件，或者yaml文件
在项目根目录webpack2新建文件：gulp.json
gulp.json
{
// 进程名称
"name": "gulp",
// 具体脚本
"script": "gulp",
// 指定脚本运行的目录
"cwd": "/Applications/XAMPP/xamppfiles/htdocs/webpack2"
}
gulp
gulp，是基于nodejs流的任务管理工具
安装
npm i -g gulp
进入项目根目录，安装gulp依赖
npm i gulp gulp-util -S
新建gulpfile.js，运行gulp
gulpfile.js文件中告诉gulp需要做什么
- 监控项目根目录
webpack2下src目录下的所有vue和js文件 - 如果监控的文件有变动，自动编译
下面是webpack的gulpfile.js
gulpfile.js
/**
* 监听文件，自动执行webpack
* powered by gulp
*/
var gulp = require('gulp');
var path = require('path');
var gutil = require('gulp-util');
var webpack = require('webpack');
var webpackConfig = require('./webpack.config.js');
var config = Object.create(webpackConfig);
var compile = webpack(config);
gulp.task('webpack', function(callback) {
compile.run(function(err, stats) {
if(err) throw new gutil.PluginError('webpack:build-js', err);
gutil.log('[webpack:build-js]', stats.toString({
colors: true
}));
callback();
});
});
// 定义监听的文件
var watchfiles = [
path.resolve(__dirname, './src/**/*.vue'),
path.resolve(__dirname, './src/**/*.js')
];
gulp.task('watch', function (done) {
gulp.watch(watchfiles, ['webpack'])
.on('end', done);
});
gulp.task('default', ['watch']);
查看监控效果
在项目根目录下执行以下脚本，将gulp的监控编译任务载入pm2进程管理
# 启动监控
pm2 start gulp.json
# 查看状态
pm2 list
# 或者
pm2 show gulp
# 查看日志
pm2 logs gulp
打开pm2日志，试着修改src目录下的vue或者js文件即可看到编译时的任务日志
至此，webpack2 + vue + gulp + pm2 环境搭建完结！
