搭建本身的脚手架—“优雅”生成前端工程

我平时工做会作移动端H5多一些，因此我经过webpack搭建了本身的前端工程（x-build），主要是编译stylus、jade、es6，自适应解决方案，还有一些本身写的一些插件。

作新的项目时，每次复制文件夹，而后修改package.json、README.md等，感受很不“优雅”，想使用相似vue-cli，使用vue init的方式在github下载我本身的前端工程，这样显得很“优雅”。若是您以为还不错，请star >>> x-build-cli。

初始化项目结构

首先你已经有了本身搭建的前端工程，假设起名为x-build，而且已经上传到github。

此时新建一个新的项目，起名为x-build-cli，我是参考vue的作法，这样即便x-build更新，x-build-cli不更新，也能够拉取到最新的x-build。

mkdir x-build-cli
cd x-build-cli
npm init

建立名为x-build-cli的文件夹，使用npm初始化，在文件夹内建立bin目录，并建立x-build.js，此时的项目结构：

x-build-cli
  |-  bin
  |     |- x-build.js
  |-  package.json

配置package.json

"bin": {
  "x-build": "./bin/x-build.js"
}

在package.json增长"bin"，"x-build"就是命令号要输入的指令，"./bin/x-build.js"是命令执行时的文件。

配置x-build.js

#! /usr/bin/env node

const program = require('commander');
const download = require('download-git-repo');
const chalk = require('chalk');
const ora = require('ora');

#! /usr/bin/env node是指定这个文件使用node执行。

须要安装的模块npm i commander download-git-repo chalk ora --save：

commander能够解析用户输入的命令。

download-git-repo拉取github上的文件。

chalk改变输出文字的颜色

ora小图标（loading、succeed、warn等）

program
  .version('0.1.0')
  .option('-i, init [name]', '初始化x-build项目')
  .parse(process.argv);

.option()

-i 是简写，相似于npm i -g

init后面的[name]能够经过program.init来获取到。

最后一项是描述，通常会在x-build -h提示

if (program.init) {
  const spinner = ora('正在从github下载x-build').start();
  download('codexu/x-build#x-build4.1', program.init, function (err) {
    if(!err){
      // 能够输出一些项目成功的信息
      console.info(chalk.blueBright('下载成功'));
    }else{
      // 能够输出一些项目失败的信息
    }
  })
}

ora().start()能够建立一个loading小图标。 >>> 其余图标参考ora

download()从github下载咱们须要的项目，由于使用的是分支因此在后面加上了#x-build4.1，默认是master。 参数配置参考download-git-repo

chalk.blueBright()会将输出的文字转化为蓝色。 >>> 其余颜色参考chalk

上传npm

没有帐号的同窗去npm注册一个帐号。

// 登陆帐号
npm login
// 上传项目
npm publish

上传成功以后，经过npm install x-build-cli -g安装到全局环境中。

使用build init [项目名]就能够从github拉取相应的文件。

优化

此时下载的文件与github一致，我想改变package.json，将name改成初始化的项目名，将version改成1.0.0。

此时就使用node本身的api就能够作到：

const fs = require('fs');

fs.readFile(`${process.cwd()}/${program.init}/package.json`, (err, data) => {
  if (err) throw err;
  let _data = JSON.parse(data.toString())
  _data.name = program.init
  _data.version = '1.0.0'
  let str = JSON.stringify(_data, null, 4);
  fs.writeFile(`${process.cwd()}/${program.init}/package.json`, str, function (err) {
    if (err) throw err;
  })
});

经过readFile读取文件，writeFile写入文件，写入时注意要传入字符串JSON.stringify(_data, null, 4)，经过这样的方式能够输出格式化的json文件。

经过node能够很轻松的就作到，这里发展空间很大，就再也不多说。

结语

若是有不清楚的小伙伴请在Issues留言，更但愿你们能够在个人github点一颗宝贵的star。

其余文章推荐

x-loader.js图片加载loading控制ES6插件

rem自适应解决方案·px2rem-loader&hotcss