我平时工作会做移动端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