I usually work on mobile TERMINAL H5, so I build my own front-end project (X-build) through Webpack, mainly compiling Stylus, Jade, ES6, adaptive solutions, and some plug-ins written by myself.

When working on a new project, COPYING the folder every time and then modifying package.json, readme. md, etc., was not “elegant”. I wanted to download my own front-end project from Github using vue init, similar to VUe-CLI, which was “elegant”. If you feel good, please star >>> X-build-CLI.

Initialize the project structure

First of all, you’ve got your own front-end project, let’s say you’ve named it X-Build and uploaded it to Github.

At this point, create a new project and name it x-build-CLI. I refer to the practice of Vue, so that the latest X-build can be pulled even if the x-build is updated but the x-build-CLI is not.

mkdir x-build-cli
cd x-build-cli
npm init
Copy the code

Create folder named x-build-cli, initialize with NPM, create bin directory in folder, and create x-build.js.

x-build-cli
  |-  bin
  |     |- x-build.js
  |-  package.json
Copy the code

Configuration package. Json

"bin": {
  "x-build": "./bin/x-build.js"
}
Copy the code

Add “bin” to package.json, where “x-build” is the command number to enter, and “./bin/x-build.js” is the file to execute the command.

Configure the 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');
Copy the code

#! /usr/bin/env node specifies that this file is executed using node.

NPM I commander Download-git-repo chalk ora –save: NPM I commander download-git-repo chalk ora –save:

Commander can parse commands entered by the user.

Download-git-repo pulls files on Github.

Chalk changes the color of the output text

Ora small ICONS (Loading, succeed, WARN, etc.)

program
  .version('0.1.0 from')
  .option('-i, init [name]'.'Initialize x-Build project')
  .parse(process.argv);
Copy the code

.option()

-I is shorthand, similar to NPM i-g

[name] after init can be obtained from program.init.

The last item is the description, which is usually prompted in x-build-H

if (program.init) {
  const spinner = ora('Downloading x-build from Github').start();
  download('codexu/x - build# X-ray build4.1', program.init, function (err) {
    if(! err){// Can output some information about project success
      console.info(chalk.blueBright('Download successful'));
    }else{
      // Can output some project failure information}})}Copy the code

Ora ().start() creates a loading icon. >>> Refer to ORA for other ICONS

Download () downloads the project we need from Github and adds #x-build4.1 since we are using branches. The default is master. For parameter Settings, see download-git-repo

Blue.bluebright () converts the output text to blue. >>> Other colors refer to chalk

Upload the NPM

If you don’t have an account, go to NPM and register one.

// Upload project NPM publishCopy the code

After the upload is successful, run NPM install x-build-cli -g to install it to the global environment.

Pull files from Github using Build Init [project name].

To optimize the

At this point, the downloaded file is the same as github. I want to change package.json, change name to the initialized project name, and change version to 1.0.0.

To do this, use Node’s own 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) throwerr; })});Copy the code

ReadFile reads files and writeFile writes files, passing in the string json.stringify (_data, NULL, 4) to output formatted JSON files.

It’s easy to do with Node, and there’s a lot of room for growth, but I won’t go into that.

conclusion

This is my own scaffolding tool X-build, you can refer to this source code or use it.