将编译文件打包到本地服务器

随着npm包管理的发展，越来越多的前端童鞋都进入了npm包管理开发时代。它帮助了我们更好的管理依赖插件，让代码看着简介而且美观，节省了开发时间。我也是其中受益者之一的前端童鞋。是否大家有遇到一个问题，当我们用apache搭建本地环境后，需要对开发好的代码进行本地线上模拟测试，而每次打包好的文件需要我们粘贴复制到本地apache环境，如是，我就想有没有好的办法当我build代码以后，就直接把编译好的代码放到本地apache相关目录下，刚好，node.js为我们开发者提供了很好的api。

一、搭建环境

首先肯定是要搭建环境，基于webpack包管理的项目，当然，你可以基于vue-cli,create-react-app等网上优秀的脚手架搭建（有不懂的可以自行百度，这里主要是讲怎么把本地打包好的文件发布到本地apache）。同时安装依赖包glob-promise(https://www.npmjs.com/package/glob-promise)，一个我觉得很好把promise结合到nodejs异步的插件。我在我的项目目录下建立了一个包管理工具目录build_tools(跟package.json同级，可按自己项目来建立)，在build_tools目录下创建了push_apache.js(主要代码)。

二、主体部分

好了，这里就是我们最熟悉的部分，敲代码环节。也就是push_apache.js。我的代码如下。

/**
* @file 将本地打包文件发到本地服务
* @author june([email protected])
*/
const Path = require('path');
const Fs = require('fs');
const GlobP = require('glob-promise');
const KEY = process.argv[2];//打包参数
const ROOT = Path.resolve(__dirname,'../');
const REMOTE = '/Library/WebServer/Documents/popin';
const PUSH_MAP = {
    "js" : {
        filePath : `${ROOT}/dist/static/*.js`,
        remoteDir: 'apache-test/js'
    },
    "image" : {
        filePath : `${ROOT}/dist/imgs/**/*`,
        remoteDir: 'apache-test/image'
    }
}
async function run() {
    const pushInfor = PUSH_MAP[KEY];
    if(!pushInfor) {
        return;
    }
    const files = await GlobP(pushInfor.filePath);
    try{
        await Promise.all(files.map(filePath => {
            const fileInfor = Path.parse(filePath);
            Fs.copyFile(filePath, Path.join(REMOTE,pushInfor.remoteDir,`${fileInfor.base}`),(err) => {
                if(err) {
                    console.log(err)
                }
                else {
                    console.log(`push ${KEY} success `);
                }
            })
        }))
    }
    catch (err){
        console.log(err)
    }
}
run();

好了，这样基本就实现了我们的代码，remoteDir是我们要打包的地址，而apache-test即是我们要打包apache本地的项目目录。打包的代码就那么多，看着是不是蛮简单的。

三、调用

最后一步就是调用了。我在pachage.json的scripts里面写了这么一份代码。

"scripts": {
"build": "npm run build-base && npm run css2json &&npm run push-apach",
"build-base": "webpack --config=config/webpack.config.js --env.production",
"push-apach" : "node ./build_tool/push_apach js"
}

当然了，我这里主要变化的是js文件，所以对它其它的，比如图片什么的就没有进行再次打包，当然诺，你也可以把node ./build_tool/push_apach js 后面的js改成node ./build_tool/push_apach image，也可以传几个参数，在push_apache.js文件中遍历一下process.argv数组。记得process.argv参数第一个和第二个我们是不用管的，我们传递的参数是从第三个开始。

好了，到这里就差不多已经完了，因为很少写技术文章，可能写的不太好，望大家见谅，以后我会写更多的技术文章跟大家分享。最后大家也可以想着怎么一次打包，直接发布到自己的服务器上，阿里云和亚马逊可能有些不同，因为安全原因，这里就不在分享，有兴趣的话可以私聊。代码里面有我的邮箱。