利用shell脚本提高前端开发效率

对于现在的前端开发而言，随着项目的日益复杂和越来越多的配置，前端在工程化方面将面对越来越多的繁琐的配置问题，接下来就来交大家利用shell脚本来提高开发效率。

1.一个git提交的例子

# git.sh
#!/bin/bash
git add .
git commit -m 'xj--'$1
git push

# 提交时只需要执行 bash git.sh '参数内容'即可完成提交操作

2.命令行参数的一些介绍

$0 ：即命令本身，相当于c/c++中的argv[0]  
$1 ：第一个参数.  
$2, $3, $4 ... ：第2、3、4个参数，依次类推。
$#  参数的个数，不包括命令本身
$@ ：参数本身的列表，也不包括命令本身
$* ：和$@相同，但"$*" 和 "$@"(加引号)并不同，"$*"将所有的参数解释成一个字符串，而"$@" 是一个参数数组

3.简单逻辑操作

#!/bin/bash  
if [ $# -lt 1 ]; then  
    echo "error.. need args"  
    exit 1  
fi  
echo "commond is $0"  
echo "args are:"  
for arg in "$@"  
do  
    echo $arg
done

学会这些以后，大家可以自己编写常用的shell脚本，是不是很happy~

4.还没完，放大招啦！

使用nodeJs编写命令行工具

// 1.构建项目目录
mkdir xxx
cd xxx
npm init

// 2.安装commander模块
npm install commander --save

// 3.新建bin/[你自定义的命令行文件名]
#!/usr/bin/env node

var program = require('commander');

program.version('0.0.1');

program
    .command('help')
    .description('显示使用帮助')
    .action(function() {
        program.outputHelp();
    });

program
    .command('create [dir]')
    .description('创建一个空博客')
    .action(function(dir) {
        console.log('create %s', dir);
    });

program
    .command('preview [dir]')
    .description('实时预览')
    .action(function(dir) {
        console.log('preview %s', dir);
    });

program
    .command('build [dir]')
    .description('生成整站静态HTML')
    .option('-o, --output <dir>', '生成的静态HTML存放目录')
    .action(function(dir) {
        console.log('创建 %s, 输出 %s', dir, options.output);
    });

// 开始解析命令
program.parse(process.argv);

// 4.在package.json目录下执行关联操作
npm link

// 5.测试,输入相关命令即可执行对应操作
xxx help