webpack2教程续之自动编译

本文承接上一篇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 环境搭建完结！