基于node构建前端脚手架工具

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
'use strict'
require('./check-versions')()

process.env.NODE_ENV = 'production'
//显示进度条
const ora = require('ora')
//用于删除文件夹，node自身不能读取或删除文件夹
const rm = require('rimraf')
//操作路径
const path = require('path')
//改变打印的字体颜色
const chalk = require('chalk')
const webpack = require('webpack')
//参数配置
const config = require('../config')
//打包配置
const webpackConfig = require('./webpack.prod.conf')

const spinner = ora('building for production...')
//开启进度条
spinner.start()
//删除掉dist目录
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
  //webpack本质来说就是一个方法
  webpack(webpackConfig, (err, stats) => {
    //关闭进度条
    spinner.stop()
    if (err) throw err
    //向线程内写入提示
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
      chunks: false,
      chunkModules: false
    }) + 'nn')

    if (stats.hasErrors()) {
      console.log(chalk.red('  Build failed with errors.n'))
      process.exit(1)
    }

    console.log(chalk.cyan('  Build complete.n'))
    console.log(chalk.yellow(
      '  Tip: built files are meant to be served over an HTTP server.n' +
      '  Opening index.html over file:// won't work.n'
    ))
  })
})

1
2
3
4
5
6
7
8
9
10
const commander = require('commander');
//定义版本号
commander.version('1.1','-v --version');
//自定义指令
commander.option('-asd -fds','sdfhjdsf');
//初始化命令
commander.command('init <name>').action(()=>{
    //相关处理语句
})

1
2
3
4
5
6
7
const ora = require('ora');
const spinner = ora('hello ora').start();//启动，显示对应的文字
spinner.color = "red";//改变转圈的颜色
setTimeout(()=>{
    spinner.stop();//关闭
},2000)

1
2
3
const chalk = require('chalk');
console.log(chalk.rgb(255,255,255).bgRgb(255,0,0)('hello chalk'));//改变字体颜色和背景色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#!/usr/bin/env node
const commander = require('commander');
const inquirer = require('inquirer');//与用户交互
commander.version('1.0.0','-v -version');//定义版本
commander.command('init <name>').action(()=>{
    inquirer.prompt([//这儿是个数组，有几个问题，建几个对象即可
        {
            type: 'input',
            name: 'author',
            message: '请输入你要将下载的目录存放位置'
        }
    ]).then((answer)=>{
        //进行模板下载操作
        require('./bin')(answer.author);
    })
})
//获取额外输入
commander.parse(process.argv);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/**
 * node不能读取整个文件夹
 * 这块采用数据驱动的思维，将文件夹转为一个二维数组的形式，然后去创建我们想要的目录
 * [
 *  ['dir','./src'],
 *  ['files','./app.js'],
 *  ['dir','./src/router']
 * ]
 */
const ora = require('ora');
const chalk = require('chalk');
const fs = require('fs');
const download = require('download-git-repo');
/**
 * 模板
 * 1、和脚手架放在一起
 * 2、模板放在git上
 * npm install download-git-repo
 * 通过download-git-repo(username/仓库名)进行下载
 */
function modelLoad(name){
	//账户名/仓库名
    download('zhangstar1331/my_vue_cli', 'test/tmp', function (err) {
        console.log(err ? 'Error' : 'Success')
    })
}
function modelLoad(name){
    //需要下载的目录地址
    
    let demoPath = "./project";
    //下载好的文件保存路径
    let targetPath = "./" + name;
    const spinner = ora('下载中').start();
    function down(arr){
        function finish(){
            spinner.stop();
            console.log(chalk.green("下载完成"));
        }
        while(arr.length>0){
            //每次创建完之后就移除一个，直到数组清空为止
            let item = arr.shift();
            if(item[0]=='file'){
                //读取文件内容
                let data = fs.readFileSync(item[1]);
                //写入文件内容
                fs.writeFileSync(targetPath+"/"+item[1].replace("./project","."),data)
            }else{
                //获取目录结构
                let path = targetPath+"/"+item[1].replace("./project",".");
                //创建文件夹
                fs.mkdirSync(path);
            }
        }
        finish();
    }
    function makearr(){
        let arr = [];
        function read(path){
            //同步读取文件夹，读取文件夹返回的是一个数组['./src','./app.js']
            let files = fs.readdirSync(path);
            files.forEach((item,index)=>{
                let nowpath = path + "/" +item;//'./project/src'
                let stat = fs.statSync(nowpath);
                //判断当前目录是否为文件夹
                if(stat.isDirectory()){
                    arr.push(['dir',nowpath]);
                    read(nowpath);//递归操作，进一步读取
                }else{
                    arr.push(['file',nowpath])
                }
            })
        }
        read(demoPath);
        return arr;
    }
    //存放路径设置
    fs.mkdir("./"+name,function(){
        down(makearr());
    })
}
module.exports=modelLoad;