搭建本身的腳手架—「優雅」生成前端工程

我平時工做會作移動端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