multipages-generator

前端程序员，迟早屌遍天下！ —— 林伟伟

multipages-generator （MG） 🤡是一个像express-generator一样快速生成网站脚手架的npm模块，可以全局安装。只要一个命令即可生成多页面的express工程，是多页面webpack编译的最佳实践模板，最适合多个独立的移动端h5项目，有几个特点：

支持webpack编译多页面，可编译指定项目，也可编译全部项目
前端编译支持热更新
编译出的网页性能经过优化，符合最佳实践（还不完善，后面加入淘宝性能优化的全部内容）
支持development,producton环境区分
producton环境可配置生产的css,js,images自动编译后上传OSS服务器
webpack编译后的html模板支持ejs等模板引擎
使用node.js做服务，nodemon热更新
支持pm2集群启动
🔥 (新) 加入手淘flexible布局方案，适配不同尺寸和DPI的屏幕，加入postcss支持
🔥 (新) 支持生产release模式，配置下七牛云CDN，编译后js，css，图片等资源文件上传cdn

支持的环境

运行的环境要求

node环境：node.js 6.11.0

操作系统：支持 mac，windows，centos

安装 ⚙️

通过NPM全局安装即可使用：

npm install multipages-generator -g

创建并运行📽

步骤一：执行multipages-generate创建网站

multipages-generate

步骤二：出现输入项目名提示，并输入您的项目名称

? Project name: <输入项目名>

步骤三：进入工程名，并下载依赖包

   cd {你的工程名}
   npm run install

步骤四: 启动前端和服务端环境

    // 运行前端开发环境 以viewport为例子
    npm run watch:viewport
    // 启动服务端 （新手注意，新开一个dos窗口，进入你的创建的工程名）
    npm run start

四步骤之后，你默认的浏览器自动打开此页面（如果没有，手动访问localhost:2000）

==注意，目前发现viewport例子的素材图片（在/apps/viewport/assets/imgs 目录下）经过全局安装会编码出问题。不影响运行，但是如果想看到上面的demo页面请从我的网盘下载素材图片，解压放到/apps/viewport/assets/imgs 目录下全部替换那些出问题的图片==

将来会选用更加适当的demo做演示

运行与开发

启动服务端

上面已经启动了，如果还没执行上面的步骤，执行以下命令

    npm run start

前端热启动项目facemerge

打开另一个终端黑窗

    npm run watch:facemerge

会有页面打开,没有的话手动打开http://localhost:2000

注意：

本应用需启动两个服务，一个是服务端node.js（端口默认为4000），一个是前端（browser-sync，默认2000）这里为了让开发时更愉悦，启动了前端服务，具有热更新的性能，每次更新自动编译输出到express工程的对应目录中，项目部署时不需要启动；

新增一个项目

apps 目录下已有facemerge，viewport两个项目，新增一个项目xxx，目录结构需参考facemerge

├─facemerge
│  ├─assets
│  │  ├─css
│  │  └─imgs
│  ├─js
│  └─views
└─voicemerge

    "watch:facemerge": "rimraf public &&cross-env ENV=dev PROJECT_NAME=facemerge node ./tools/webpack.watch.js"

启动方式跟上述 “开发模式启动项目facemerge” 相同

  npm run release:viewport

编译后的文件输出到public下，分为assets,js,css

添加新项目时，请参考示例viewport的配置方式添加

七牛云CDN

MG目前支持发布时自动上传七牛云，需要配置七牛云的accesskey，secretkey等。在根目录下的mg.config.js中，修改如下配置(⚠️下面的信息只是胡写例子)

// 七牛云CDN上传配置
module.exports.qconfig = {
    ACCESS_KEY: 'ei1uOdGpVLliA7kb50si4wfYLPwt5v0shU10',
    SECRET_KEY: '-pFFIY-ew35Exyfcd40k15ah3UfZTFWFKF',
    bucket:'hotsts-image',
    origin:'http://ofltzxf.bkt.clouddn.com'
};

// js，css，图片等资源文件编译后增加的前缀
module.exports.cdnPath = '//ofltzxf.bkt.clouddn.com/';

cdnPath与qconfig.origin相对应

阿里云OSS

即将支持

其他CDN

如果你需要其他云服务器，那么你可以这样修改来支持在/tools/webpack.release.js 中的上传代码做修改

webpacker.run((err,status)=>{
    if (util.runCallback(err, status)) {

        if(err){
            console.log(chalk.red('[webpack]：编译失败 ' + err.toString()));
            return;
        }

        console.log(chalk.magenta('[webpack]：编译完成！\r\n'));

        qupload('./public')
    }
});

将qupload 方法改成你的云服务器上传的代码，核心**是编译public下的所有文件，如果是文件，则上传，否则继续遍历文件夹下的内容；可参考/tools/qupload.js的逻辑来写

未来计划 😱

案例demo页完善，做一个腾讯AI的人脸融合H5
加入mysql，mongoDB可选配置
生产环境配置更佳完善
文档更详细
性能优化加入手淘的全部方案，以及google的性能优化内容

erictop3 / multipages-generator Goto Github PK

multipages-generator's Introduction

multipages-generator's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org