shell.js——给node插上隐形的翅膀

一.Shell && Shelljs

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

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’:<num>,}] file)

    显示指定文件中的前N行

    • -n<num>:显示前&lt;num&gt;
  • 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输出至指定文件,相当于脚本语言中的&gt;

  • ShellString.Prototype.toEnd()

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

  • touch([options,]file)

    生成文件

    • -m:仅修改编辑时间
    • -c:不创建任何文件
    • -d DATE:指定时间
    • -r FILE:用FILE的时间替代新文件时间
  • env[‘VAR_NAME’]

    指向process.env

  • Pipes链式调用支持

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

6个最优秀的微信小程序UI组件库

开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果。自从微信小程序面世以来,不断有一些开源组件库出来,下面6款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库。还没用到它们的你,可以关注和了解一下哦!

WeUI WXSS

WeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验。

GitHub地址:https://github.com/Tencent/weui-wxss
npm下载:npm i weui-wxss

iView WeApp

iView是TalkingData发布的一款高质量的基于Vue.js组件库,而iView weapp则是它们的小程序版本。

GitHub地址:https://github.com/TalkingData/iview-weapp
npm下载:npm i iview-weapp

ZanUI WeApp

ZanUI WeApp是有赞移动 Web UI 规范 ZanUI 的小程序实现版本,结合了微信的视觉规范,为用户提供更加统一的使用感受。

现已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、tooltips 等组件或元素。

GitHub地址:https://github.com/youzan/zanui-weapp
npm下载:npm i zanui-weapp

另外,ZanUI也使用mpvue重写了zanui-weapp,实现了其中所有组件,为使用mpvue的开发者提供了方便。

GitHub地址:https://github.com/samwang1027/mpvue-zanui
npm下载:npm i mpvue-zanui

MinUI

MinUI 是蘑菇街前端开发团队开发的基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架,各种小程序组件主流框架等,并且提供了专门的命令行工具。

GitHub地址:https://github.com/meili/minui

Wux WeApp

Wux WeApp也是一个非常不错的微信小程序自定义 UI 组件库,组件比较丰富,值得使用。

GitHub地址:https://github.com/wux-weapp/wux-weapp
npm下载:npm i wux-weapp

ColorUI

ColorUI是一个Css类的UI组件库!不是一个Js框架。相比于同类小程序组件库,ColorUI更注重于视觉交互!

其组件在美观性方面比较突出。

GitHub地址:https://github.com/weilanwl/ColorUI

作者:一斤代码
链接:https://www.jianshu.com/p/4182f4a18cb6
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

tite与h1的区别 、b与strong的区别 、i与em的区别

html语义化标签:

1)title与h1的区别

title与H1是不能划等号的

1.H1是大标题的意思。一般出现网页文章页面,作用如同一张报纸的大标题,使用读者在没看内容之前就

大概了解本文的旨意,它是直接给用户看的。而且在SEO中,搜索引擎也非常重视H1,目的是告诉搜索引擎,这

个地方的内容很重要,H1要求贴近文章内容,突出主题,言简意赅。

2.title是用来面对的是搜索引擎和用户,其范围相对于H1来说要广,title中可以包含H1,在搜索引擎中

tiele的权重要高于H1;一般来讲,H1做到突出主题目,title修饰主题关键字。

H1与title之间的联系

A.从网站角度而言,title则重于网站信息标题,突出网站标题或关键字用title,一篇文章,一个页面最好只

用一个H1,H1用得太多,会稀释主题;一个网站可以有多个title,最好一个单页用一个title以便突出网站页面

主题信息。

B.从文章角度而言,H1则概括的是文章主题,突出文章主题,用H1,面对的用户,要突出其视觉效果。

从SEO角度看,title的权重高于H1,其适用性要比H1广。

2)b与strong的区别

b和strong标签,在网页中默认的情况下均是加粗字体的作用;

标签是一个实体标签,它所包含的字符将被设为blod粗体,是html语言中的;—视觉化

标签是一个逻辑标签,作用是为了加强语气而加粗字体,是xhtml中的,其强调作用,可以用css标

签控制strong强调的方式。—-语义化标签

在符合w3c的标准,推荐使用strong标签—语义化

3)i与em的区别

标签告诉浏览器把其中的文本表示为强调的内容。标签可以用来把这些名称和其他斜体字区别

开来。

在文本中加入强调也需要有技巧。如果强调太多,有些重要的短语就会被漏掉;如果强调太少,就无法真

正突出重要的部分。这与调味品一样,最好还是不要滥用强调。

尽管标签修饰的内容都是用斜体字来显示,但这些内容也具有更广泛的含义,将来的某一天,浏览

器也可能会使用其他的特殊效果来显示强调的文本。

如果你只想使用斜体字来显示文本的话,请使用 标签。除此之外,文档中还可以包括用来改变文本显

示的级联样式定义。

除强调之外,当引入新的术语或在引用特定类型的术语或概念时作为固定样式的时候,也可以考虑使用

标签。例如,W3School 经常对重要的术语使用标签。标签可以用来把这些名称和其他斜体字

区别开来。

作者:蜻蜓之鱼
链接:https://www.jianshu.com/p/59691c0900d3
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

用css+html制作脑图–美化篇

上一篇介绍了如何用纯样式和html制作出简单版脑图的结构,这一篇就大概讲一讲实际运用中如何将技术落地

先看看用样式画完的脑图结构

简直low爆了,但是大家要透过现象看本质嘛,网上大多数的脑图都是用js来算位置的,这个直接就用html结构就解决了,只需要调整间距之类的就可以了,省心很多

下面呢就要来美化一下这个脑图,美化之后呢大概是这个样子滴

有没有一种野鸡变凤凰的感觉?~·
继续阅读用css+html制作脑图–美化篇

介绍几个开发前端动画不得不学的动画库

1. AniJS.js

基于 CSS3 的动画库

2. Velocity.js

Velocity 是一个简单易用、高性能、功能丰富的轻量级 JS 动画库。它能和 jQuery 完美协作,并和 $.animate() 有相同的 API, 但它不依赖 jQuery,可单独使用

3. vivus.js

继续阅读介绍几个开发前端动画不得不学的动画库

纯css3实现思维导图样式

思维导图又称之为脑图

他大概是这个样子滴:

 

网上大部分实现有用d3.js实现,有手动用svg实现,最近工作需要,本人很懒,在琢磨看看用css3能不能实现呢?

答案是肯定的 下面上代码

html代码


<div class="mainBody" id="node1">
    <h1>node1</h1>
    <div class="oneBody">
        <div class="mainBody">
            <h1>node2</h1>
            <div class="oneBody">
                <div class="mainBody">
                    <h1>node3</h1>
                    <div class="oneBody">
                        <div class="mainBody">
                            <h1>node4</h1>
                        </div>
                        <div class="mainBody">
                            <h1>node4</h1>
                        </div>
                        <div class="mainBody">
                            <h1>node4</h1>
                        </div>
                    </div>
                </div>
                <div class="mainBody">
                    <h1>node3</h1>
                </div>
                <div class="mainBody">
                    <h1>node3</h1>
                </div>
            </div>
        </div>
        <div class="mainBody"><h1>node2</h1></div>
        <div class="mainBody"><h1>node2</h1></div>
    </div>
</div>

css3代码


.mainBody{
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: row;
    justify-content: flex-start ;
}
.sbody{

}
.oneBody{
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
#node1{
    /*height: 200px;*/
    margin-top: 100px;
    margin-left: 100px;
}
h1{
    line-height: 100%;
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

实际效果如图:

哦有点简陋····不过样式什么的你想怎么搞就怎么搞喽,其中节点的增加,你只需要html中增加相应的节点代码就行,高度位置都是自适应的,感谢css3的 flex,你们活在这个时代是幸福的

Git 原理入门

Git 是最流行的版本管理工具,也是程序员的必备技能之一。

即使天天使用它,很多人也未必了解它的原理。Git 为什么可以管理版本?git addgit commit这些基本命令,到底在做什么,你说得清楚吗?

这篇文章用一个实例,解释 Git 的运行过程,帮助你理解 Git 的原理。
继续阅读Git 原理入门

三角函数在前端动画中的应用

我是个很懒的人,开发过程中经常有意无意地刻意避开数学相关的知识,你也知道解数学题非常枯燥无趣。平时写动画也尽量使用 css3 来实现,timer-function 随意选用,最多也就调一下 cubic-bezier,找到看着舒服的就行。但是怎样让动画更顺滑,写出更贴近自然的动画,说实话以前我没怎么考虑过。

每次当动效设计师提出,能不能这样那样的时候,我会理所当然地予以否决。所以有很长一段时间,我非常羡慕那些能用 canvas 绘制很酷炫的动画的程序员。

sad man in sine

 

先这样吧,又不是不会动。

继续阅读三角函数在前端动画中的应用

Google 的后端工程师都开始写小程序了?反编译 “猜画小歌”看看

 

今天 Google 在微信发布了一款小程序“猜画小歌”,都已经刷爆朋友圈了。没想到谷歌重返中国第一个应用竟然是小程序,而且还是基于 AI 的小程序。还没体验的可以扫码体验一下。

逻辑很简单,每局给你一个新的词,让你画对应的图案,我感觉应该是将你画的图,向提供的关键词去靠拢,很多其实沾一点边的图,都能识别上,产生了很多灵魂画师。我今天体验了一下发现根本停不下来,根本停不下来,忍不住在群里分享一波。

反编译小程序

在知乎上已经有人将“猜画小歌”反编译出来,发现目录结构特别具有 Java 工程师的风格,非官方消息也说到,是一名后端开发工程师自己独立完成的小程序开发任务。

感受一下目录风格:

反编译者还发现很多命名方式都是中英文混编以及命名规范不一致,还专门吐槽了一下。

还发现了例如一些引入第三方库不规范的例子,例如引入了 cryptojs 来作为接口加密,但是其实只用到了 SHA1 加解密。

知乎用户 @Kumakuma 还爆料称,此小程序就是后端工程师写前端,并且是一个人完成的,不过因为时间紧任务重,很多地方都不规范,后期应该会加强代码审核,也就不会出现这样的问题了。

“猜画小歌”隐藏功能

在反编译的文章中,还发现了很有意思的点,其实它还隐藏了很多有意思的功能,光小程序的页面竟然就有 14 个。

能看出来,确实有很多隐藏的页面,从反编译的效果来看,最少会有对战页面、注册码页面、打赏功能等等。

按现在的热度和传播效果来看,这个游戏的方向算是正确的,后续应该还会增加一些多人互动方向的新玩法,很值得期待。

灵魂画师会带坏 AI?

就如前面说的,“猜画小歌”就是一款 AI 小程序,它的匹配规则还是很宽泛的,所以很多灵魂画手就上线了,基本上靠一点边“画作”就可以被识别出来。

但是不必要担心,上线之前 AI 本身就已经提前喂了大量的数据给模型,所以现在这点用户量,并不会对 AI 的模型有任何冲击。

不排除之后用户量暴涨之后,会对模型造成冲击,不过话说回来,如果是中国人自己教的 AI,是不是更适合中国人的画风呢?

我想,自己教的孩子,自己一定喜欢。

“猜画小歌”的意义

本身 Google 志不在游戏,更多的应该是想通过游戏的形式,让大家了解 AI,毕竟 Google I/O 已经是 AI First 了。

我想 AI 发展到最后,基础设施会越来越完善,准入门槛会越来越低,发展到最后肯定就是拼创意、想法和数据。

AI 没有那么神奇,也没有那么智障,更多的是可以做到一些传统代码做不到的事情,可以解放很多工作,非常值得期待。