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
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

今日我的博客加入了一个新功能,阅读量统计···pdf电子书-css揭秘-下载

今日我的博客加入了一个新功能,阅读量统计···

感觉瞬间棒棒的

嗯,这个内容有点空洞,放出一个css资源

高清pdf电子书 css揭秘

快去下载

链接: https://pan.baidu.com/s/1q10_ikubVGTDhWNTIDwcjQ 密码: 5rf9

 

好书推荐–Node.js调试指南

购买地址大家自己百度吧!

序言

笔者和同事在过去一年多主要把工作精力放在如何提高Node.js 服务端的性能、稳定性和基础设施搭建上,随着公司业务量的快速增长,我们遇到了各种各样的挑战,也取得了不错的成绩:从起初啥都没有,到后来建立了比较完善的日志、监控和报警系统;从起初遇到问题不知道如何下手,到后来在遇到问题时能及时发现并定位问题。总之,付出得到了回报。
笔者曾将在这一段时间内遇到的调试、调优过程整理并记录成文章,发表在公司的知乎专栏上,本书就是在其基础上修改、补充和润色而成的,算是笔者对这几年在Node.js 开发中进行调试的经验和思路的总结,笔者希望授人以鱼,亦能授人以渔。
本书概要
本书从CPU、内存、代码、工具、APM、日志、监控、应用这8 个方面讲解如何调试Node.js,大部分小节都会以一段经典的问题代码为例进行分析并给出解决方案。
第1 章讲解CPU 相关的知识,涉及各种 CPU 性能分析工具及火焰图的使用。
第2 章讲解内存相关的知识,例如Core Dump 及如何分析 heapsnapshot 文件。
第3 章讲解代码相关的知识,例如如何避免在代码层面写出难以调试的代码,并涉及部分性能调优知识。
第4 章讲解工具相关的知识,涉及常用的Node.js 调试工具和模块。
第5 章讲解APM(Application Performance Management)相关的知识,例如两个不同的应用程序性能管理工具的使用。
第6 章讲解日志相关的知识,例如如何使用Node.js 的async_hooks 模块实现自动日志打点,并结合各种工具进行使用。
第7 章讲解监控相关的知识,例如如何使用 Telegraf + InfluxDB + Grafana 搭建一个完整的Node.js 监控系统。
第8 章讲解应用相关的知识,给出了两个完整的Node.js 应用程序的性能解决方案。
本书定位
本书并不适合Node.js 初学者,适合有一定Node.js 开发经验的人阅读。笔者倾向于将本书定位成参考书,每一小节基本独立,如果遇到相关问题,则可以随时翻到相应的章节进行阅读。
开发环境
MacOS 或 Linux(Ubuntu@16.04 64 位),Windows 用户请在使用虚拟机安装Ubuntu 后进行操作。
Node.js@8.9.4。
继续阅读好书推荐–Node.js调试指南

前端工程师一生必须拥有的一本工具书-JavaScript高级程序设计

为什么这样说呢,因为这本书在你不同的阶段重读都会有新的体会,作为工具书,它提供了足够的标准,作为提升,它也提供了很多高级用法

博主特别为大家提供了高清pdf,非扫描版

快去下载
继续阅读前端工程师一生必须拥有的一本工具书-JavaScript高级程序设计

前端开发面试题搜集大全–刷完能进bat

HTML

  • Doctype作用?标准模式与兼容模式各有什么区别?
      (1)、<!DOCTYPE>声明位于HTML文档中的第一行,处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
    
      (2)、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
    
  • HTML5 为什么只需要写 <!DOCTYPE HTML>
       HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);
    
       而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。
    
  • 继续阅读前端开发面试题搜集大全–刷完能进bat

前端资源大全,大家有需要的来拿

个人整理来之不易请珍惜,如有错误请谅解,谢谢。。。
资源教程:

  1. 综合类
    - [前端知识体系](http://www.cnblogs.com/sb19871023/p/3894452.html)
    - [前端知识结构](https://github.com/JacksonTian/fks)
    - [Web前端开发大系概览](https://github.com/unruledboy/WebFrontEndStack)
    - [Web前端开发大系概览-中文版](http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html)
    - [Web Front-end Stack v2.2](https://raw.githubusercontent.com/unruledboy/WebFrontEndStack/master/Web%20Front%20End%20Stack.png)
    - [免费的编程中文书籍索引](https://github.com/justjavac/free-programming-books-zh_CN)
    - [前端书籍](https://github.com/dypsilon/frontend-dev-bookmarks)
    - [前端免费书籍大全](https://github.com/vhf/free-programming-books)
    - [前端知识体系](http://www.cnblogs.com/sb19871023/p/3894452.html)
    - [免费的编程中文书籍索引](https://github.com/justjavac/free-programming-books-zh_CN)
    - [智能社 - 精通JavaScript开发](http://study.163.com/course/introduction/224014.htm)
    - [重新介绍 JavaScript(JS 教程)](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
    - [麻省理工学院公开课:计算机科学及编程导论](http://v.163.com/special/opencourse/bianchengdaolun.html)
    - [JavaScript中的this陷阱的最全收集--没有之一](http://segmentfault.com/a/1190000002640298)
    - [JS函数式编程指南](https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html)
    - [JavaScript Promise迷你书(中文版)](http://liubin.github.io/promises-book/)
    - [腾讯移动Web前端知识库](https://github.com/AlloyTeam/Mars)
    - [Front-End-Develop-Guide 前端开发指南](https://github.com/Front-End-Developers-Hunan/Front-End-Develop-Guide)
    - [前端开发笔记本](https://li-xinyang.gitbooks.io/frontend-notebook/content/)
    - [大前端工具集 - 聂微东](https://github.com/nieweidong/fetool)
    - [前端开发者手册](https://dwqs.gitbooks.io/frontenddevhandbook/content/)
  2. 入门类
    - [前端入门教程](http://www.cnblogs.com/jikey/p/3613082.html)
    - [瘳雪峰的Javascript教程](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000)
    - [jQuery基础教程](http://www.imooc.com/view/11)
    - [前端工程师必备的PS技能——切图篇](http://www.imooc.com/view/506)
    - [结合个人经历总结的前端入门方法](https://github.com/qiu-deqing/FE-learning)
  3. 效果类
  4. 工具类
  5. 慕课专题
  6. 周报类

继续阅读前端资源大全,大家有需要的来拿