一统江湖的大前端(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均支持链式调用。

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

相关文章
|
5天前
|
人工智能 JavaScript 前端开发
前端秘法基础式终章----欢迎来到JS的世界
前端秘法基础式终章----欢迎来到JS的世界
|
6天前
|
JavaScript 前端开发 算法
【Node.js 版本过高】运行前端时,遇到错误 `Error: error:0308010C:digital envelope routines::unsupported`
【Node.js 版本过高】运行前端时,遇到错误 `Error: error:0308010C:digital envelope routines::unsupported`
15 0
|
13天前
|
JavaScript 前端开发 开发者
深入探讨前端框架Vue.js的数据绑定原理
在前端开发中,数据绑定是Vue.js框架的核心特性之一,它实现了视图与数据的双向绑定,极大地提高了开发效率和用户体验。本文将深入探讨Vue.js数据绑定的原理,从响应式数据、依赖追踪到虚拟DOM等方面进行详细分析,帮助读者更好地理解Vue.js框架的工作机制。
11 0
|
13天前
|
缓存 JavaScript 前端开发
前端工程化:优化JS加载速度
在现代Web应用中,JavaScript已成为必不可少的一部分,但是随着业务复杂度的增加,JS文件的体积也越来越大,导致网页加载速度变慢,影响用户体验。本文将介绍前端工程化的优化策略,以提高JS文件的加载速度。
|
14天前
|
存储 缓存 JavaScript
解密前端框架Vue.js的响应式原理
作为当下最流行的前端框架之一,Vue.js的响应式原理是其核心之一。本文将深入探讨Vue.js的响应式原理,从数据劫持、依赖收集到更新视图的完整流程,帮助读者更好地理解Vue.js框架的工作方式。
|
27天前
|
Web App开发 JavaScript 前端开发
【Node.js】大前端技能最通俗易懂的讲解 快速入门必看
【Node.js】大前端技能最通俗易懂的讲解 快速入门必看
18 0
|
1月前
|
存储 移动开发 前端开发
前端JS中的异步编程与Promise
在了解JavaScript的异步机制之前,我们首先需要理解JavaScript是一种单线程语言。单线程就意味着所有的任务需要按照顺序一次执行,如果前一个任务没有完成,后一个任务就无法开始。这个特性在执行大量或耗时任务时可能会导致阻塞或者界面卡死,这显然是不可取的。
|
1月前
|
JavaScript 前端开发
【前端开发】一文带你精通Vue.js框架(七)
【前端开发】一文带你精通Vue.js框架(七)
24 0
|
1月前
|
缓存 JavaScript 前端开发
【前端开发】一文带你精通Vue.js框架(六)
【前端开发】一文带你精通Vue.js框架(六)
21 0
|
1月前
|
JavaScript 前端开发 API
深入理解前端框架:Vue.js
本文将深入探讨前端框架中的一颗明珠——Vue.js。我们将了解Vue.js的基本概念、核心特性以及其在现代Web开发中的重要地位。通过对Vue.js的全面解析,读者将能够掌握使用Vue.js构建交互式和高效的前端应用程序的技巧和方法。

相关产品

  • 云迁移中心