本文承接上一篇webpack2教程，本文所說的項目目錄依舊是webpack2

在上一篇中，我們搭建了基于webpack的vue開發(fā)環(huán)境，但是有一個問題是，每次編譯代碼都需要手動輸入命令，是不是可以自動完成呢。

這里將借助pm2和gulp

pm2

pm2，不是pm2.5，是一個node.js的進程管理器

安裝

npm i -g pm2

用法

# 顯示所有進程狀態(tài)
pm2 list
# 啟動一個進程，別名是app
pm2 start app.js --name app
# 監(jiān)控所有進程
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流的任務(wù)管理工具

安裝

npm i -g gulp

進入項目根目錄，安裝gulp依賴

npm i gulp gulp-util -S

新建gulpfile.js，運行g(shù)ulp

gulpfile.js文件中告訴gulp需要做什么

• 監(jiān)控項目根目錄webpack2下src目錄下的所有vue和js文件
• 如果監(jiān)控的文件有變動，自動編譯

下面是webpack的gulpfile.js

gulpfile.js

/**
 * 監(jiān)聽文件，自動執(zhí)行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();
  });
});
// 定義監(jiān)聽的文件
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']);

查看監(jiān)控效果

在項目根目錄下執(zhí)行以下腳本，將gulp的監(jiān)控編譯任務(wù)載入pm2進程管理

# 啟動監(jiān)控
pm2 start gulp.json
# 查看狀態(tài)
pm2 list
# 或者
pm2 show gulp
# 查看日志
pm2 logs gulp

打開pm2日志，試著修改src目錄下的vue或者js文件即可看到編譯時的任務(wù)日志

至此，webpack2 + vue + gulp + pm2 環(huán)境搭建完結(jié)！