一统江湖的大前端(4)shell.js——穿上马甲我照样认识你

简介: 《一统江湖的大前端》系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新。如果你对前端的理解还是写写页面绑绑事件,那你真的是有点OUT了,前端能做的事情已经太多了, 手机app开发 , 桌面应用开发 , 用于神经网络人工智能的库 , 页面游戏 , 数据可视化 , 甚至 嵌入式开发 ,什么火就搞什么,活脱脱一个蹭热点小能手。

img_4bb4848189a52e346a67d405c1cd1fcb.jpe

《一统江湖的大前端》系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新。如果你对前端的理解还是写写页面绑绑事件,那你真的是有点OUT了,前端能做的事情已经太多了, 手机app开发 , 桌面应用开发 , 用于神经网络人工智能的库 , 页面游戏 , 数据可视化 , 甚至 嵌入式开发 ,什么火就搞什么,活脱脱一个蹭热点小能手。如果你也觉得前端的日常开发有些枯燥,不妨一起来看看前端的另一番模样。

前端开发人员的工作内容几乎很少会涉及脚本的编写,建议将shell.js和git的命令行指令综合在一起作为专题学习,集中学习一下常用指令。更详细的参数请参考专门的shell脚本语言资料进行学习。

一.Shell && Shelljs

码农界存在着无数条鄙视链,linux使用者对windows的鄙视便是其中之一,cli使用者对GUI用户的嘲讽也是如此,在这样一个讲究逼格的时代,如果你的桌面上没有一个小黑窗时不时地从下往上翻滚并抛出一些亮绿色的字符串,你真不好意思跟人打招呼。而前端这种天生几乎不用和命令行打交道的物种,自然再一次莫名其妙地处在了鄙视链的末端,没错,是再一次。

img_8306fc05d9aa22e4ce4670ef02b3fd01.jpe

Shelllinux下的脚本语言解析器,拥有丰富且强大的底层操作权限。Shelljs就是基于node的一层命令封装插件,让前端开发者可以不依赖linux也不依赖类似于cmder的转换工具,而是直接在我们最熟悉不过的javascript代码中编写shell命令实现功能。

二.前端开发人员学Shelljs干嘛

shell自动化是强相关的,个人理解其用途主要是两方面:

  • 1.从业务逻辑的需求来看,shelljs并不是什么具有非凡意义的插件,它只是对node的底层API进行了一些封装,方便我们以类似shell的语法去编写代码梳理逻辑,实现一些业务逻辑需求,如果你所在的项目组恰好需要这样的能力,用它会很方便;
  • 2.cli相对于GUI或许是更快,但它依然是一种重复劳作,有了shelljs和全栈能力,开发者可以将团队中耗时的重复性常规动作编写为自动化脚本,并利用前端的天然优势为其配备GUI,用页面上的一键点击来替代重复劳作,在紧张的开发节奏中,平均每天为你节约个30-40分钟起来走走喝杯水难道不好吗?

想要一统江湖,大前端的深度和广度是缺一不可的,你可以说你不精通shell,但不要说自己不懂shell,更不要一脸天真地反问面试官“前端还能搞shell?这么神奇?”他不会觉得你对知识有好奇心,只会觉得你很low,哦不对,是大写的LOW.

三.官方示例(包含注释)

废话说完了,开始学习,拿好小本子,我要开车了。

//引入shelljs
var shell = require('shelljs')

//检查控制台是否以运行`git `开头的命令
if (!shell.which('git')) {
  //在控制台输出内容
  shell.echo('Sorry, this script requires git');
  shell.exit(1);
}

shell.rm('-rf','out/Release');//强制递归删除`out/Release目录`
shell.cp('-R','stuff/','out/Release');//将`stuff/`中所有内容拷贝至`out/Release`目录

shell.cd('lib');//进入`lib`目录
//找出所有的扩展名为js的文件,并遍历进行操作
shell.ls('*.js').forEach(function (file) {
  /* 这是第一个难点:sed流编辑器,建议专题学习,-i表示直接作用源文件 */
  //将build_version字段替换为'v0.1.2'
  shell.sed('-i', 'BUILD_VERSION', 'v0.1.2', file);
  //将包含`REMOVE_THIS_LINE`字符串的行删除
  shell.sed('-i', /^.*REMOVE_THIS_LINE.*$/, '', file);
  //将包含`REPLACE_LINE_WITH_MACRO`字符串的行替换为`macro.js`中的内容
  shell.sed('-i', /.*REPLACE_LINE_WITH_MACRO.*\n/, shell.cat('macro.js'), file);
});

//返回上一级目录
shell.cd('..');

//run external tool synchronously
//即同步运行外部工具
if (shell.exec('git commit -am "Auto-commit"').code !== 0){
    shell.echo('Error: Git commit failed');
    shell.exit(1);
}

三.官方示例中涉及的命令解释:

  • shell.which(command)

    在环境变量PATH中寻找指定命令的地址,判断该命令是否可执行,返回该命令的绝对地址。

  • echo

    在控制台输出指定内容

  • exit(code)

    以退出码为code退出当前进程

  • rm

    删除一个目录中一个或多个文件目录,一旦删除,无法恢复。 常用参数

    • -f:强制删除文件;
    • -i:删除之前先询问用户;
    • -r:递归处理目录;
    • -v:显示处理过程;
  • cp([options,] source_array, dest)

    用来将一个或多个源文件或目录复制到指定的文件或目录。 常用参数:

    • -f:强制删除文件;
    • -i:删除之前先询问用户;
    • -r:递归处理目录;
  • cd

    切换工作目录至指定的相对路径或绝对路径。cd..为返回上一级,cd-回到前一目录。

  • ls

    用来显示目标列表。 常用参数:

    • -a:显示所有文件;
    • -C:多列显示查询结果;
    • -l:单列长格式显示查询结果(与-C相反);
    • -R:递归处理目录;
  • sed([options,] search_regex, replacement, file_array

    file_array中符合search_regex的内容替换为replacement,支持正则的捕获组自引用。一次处理一行内容,处理完成后把缓冲区内容送往屏幕,然后处理下一行,循环直至结束。功能丰富且用法较复杂,建议自行百度进行专题学习。

    • -i:直接作用源文件
  • cat

    将一个或多个文件内容读入,指定一个文件时读入该文件,指定多个文件时将内容连接在一起读入。

  • exec(command,[, options][, callback])

    执行所传入的命令

    • async:是否异步执行,默认false,传入callback时自动开启
    • slient:不输出信息到console,默认false
    • encoding:默认utf8

四.文档中其他API概览

  • chmod

    设置文件调用权限

    • 基本语法 :chmod [-cfvR] [--help] [--version] mode file...
    • -c:若文件权限确实被更改,才显示更改动作
    • -f: 权限无法被更改时不显示错误信息
    • -v: 显示权限变更的详细资料
    • -R: 递归,对其目录下所有文件和子文件执行相同操作
    • mode字段格式 : [ugoa...][[+-=][rwxX]...][,...]
    • u表示该文件拥有者,g表示同一群体者,o表示其他,a表示所有
    • +表示增加权限,-表示取消权限,=表示唯一设定权限
    • r表示可读,w表示可写,x表示可执行,X表示当该文件是个子目录?
  • find(path[,path...])

    寻找路径

  • grep([options,] regex_filter,file)

    从指定文件中抓取符合正则的行

    • -v:翻转正则匹配
    • -l:仅打印符合条件的文件名
  • head([{'-n':,}] file)

    显示指定文件中的前N行

    • -n:显示前<num>
  • mv

    移动文件

  • pwd

    返回当前目录

  • rm

    见上文

  • set

    设置全局变量的值

  • sort

    将文件的内容逐行排序

    • -r:反转结果
    • -n:依据数值对比
  • tail

    读取指定文件的末尾n行,对比head命令进行理解

  • test()

    评估一个表达式是否为真(以下仅为最常见的参数用例)

    • -d,path:如果path是一个路径则返回true
    • -e,path:如果path存在则返回true
  • ShellString()

    构造器,将一个字符串转化为Shell字符串,转化后的字符串支持链式调用特殊的shell命令

  • ShellString.Prototype.to()

    shellString输出至指定文件,相当于脚本语言中的>

  • ShellString.Prototype.toEnd()

    shellString追加至指定文件,相当于脚本语言中的>>

  • touch([options,]file)

    生成文件

  • env['VAR_NAME']

    指向process.env

  • Pipes链式调用支持

    sed,grep,cat,exec,to,toEnd均支持链式调用。

我的博客即将入驻“云栖社区”,诚邀技术同仁一同入驻。

相关文章
|
1月前
|
前端开发 JavaScript
前端 js 经典:数组常用方法总结
前端 js 经典:数组常用方法总结
27 0
|
5天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
6天前
|
JavaScript 前端开发 网络协议
前端JS发起的请求能暂停吗?
在讨论前端JS发起的请求是否能暂停时,需要明确两个概念:什么状态可以被认为是“暂停”?以及什么是JS发起的请求?
61 1
前端JS发起的请求能暂停吗?
|
14天前
|
Web App开发 资源调度 JavaScript
【保姆级】前端使用node.js基础教程
【6月更文挑战第3天】Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境,用于服务器端编程。常用命令包括:安装 Node.js,通过 `node -v` 查看版本;使用 npm(Node 包管理器)进行初始化、安装/卸载包、查看版本和更新;运行 `.js` 脚本;使用 `node inspect` 调试;借助 nodemon 实现自动重启;通过 `npm list` 管理包;
5 0
|
17天前
|
前端开发 JavaScript API
Vue.js:渐进式JavaScript框架-前端开发
Vue.js:渐进式JavaScript框架-前端开发
21 3
|
26天前
|
JavaScript 前端开发 Java
前端知识点03(JS)
前端知识点概览:了解JS中的this指向,包括全局、函数、new、apply/call/bind及箭头函数的规则。理解script的async和defer属性对脚本加载和执行的影响。探讨setTimeout和setInterval的用法及其在性能上的考量。ES6与ES5的区别在于新语法特性,如let/const、箭头函数、模板字符串、模块化、类和继承等。此外,ES6还引入了Symbol、解构赋值、默认参数、Map/Set和Generator等功能。别忘了点赞和支持作者哦!
24 1
|
26天前
|
JavaScript 前端开发
前端面试02(JS)
本文是前端面试系列的第二篇,主要涵盖了JavaScript的基础知识,包括JS的组成(ECMAScript、DOM、BOM)、内置对象(如String、Array、Math、Date等)、数组操作方法、数据类型检测方法(typeof、instanceof、constructor、Object.prototype.toString.call)、闭包的概念及其特点、前端内存泄漏的原因和类型、事件委托的优势、基本数据类型与引用数据类型的差异、原型链的工作原理以及JS实现继承的多种方式(原型链、构造函数、组合继承等)。文章结尾鼓励读者点赞和支持作者。
13 1
|
27天前
|
JavaScript 前端开发 NoSQL
构建基于Node.js的全栈应用:从前端到后端的完整指南
【5月更文挑战第24天】本文是关于使用Node.js构建全栈应用的指南,涵盖前端(React或Vue)、后端(Node.js + Express)和数据库(MongoDB)的选型与实现。文章介绍了项目结构、前端组件化开发、后端API接口编写、前后端联调及部署上线的注意事项,帮助读者掌握全栈开发流程。
|
29天前
|
移动开发 JavaScript 前端开发
【热门话题】Vue.js:现代前端开发的轻量级框架之旅
Vue.js,由尤雨溪于2014年创建,是一个轻量级的前端框架,因其简洁API、高效渲染和组件系统深受全球开发者喜爱。本文探讨Vue的核心理念、技术架构、开发实践及在现代Web开发中的应用。Vue遵循渐进式框架思想,提供声明式编程、组件化和响应式数据绑定。技术上,它采用双向数据绑定、虚拟DOM和生命周期钩子。开发实践中,Vue CLI和Vuex、Vue Router分别加速开发和管理状态、路由。Vue不仅适用于单页应用,还支持多页应用、移动开发和跨平台项目,拥有丰富的社区生态和插件。随着Vue 3的推出,Vue将持续创新并影响前端开发领域。
63 0
|
1月前
|
前端开发 JavaScript
前端 JS 经典:函数管道
前端 JS 经典:函数管道
7 0