[node.js技术分享]利用nodemon模块实现express网站自动重启

做node.js开发程序员都知道,使用Express进行web网站开发的时候,每次修改完网站项目中的js文件,都需要手动重启站点才能看到最新效果,甚是不爽。

福音来了,nodemon模块能实现自动重启的效果,解放双手。方法如下

1、安装。运行如下代码将nodemon安装到全局环境中。

npm install -g nodemon

%e5%9b%be%e7%89%871

2、启动站点。在cmd窗口中,将目录切换到网站根目录下,执行如下代码,可以启动站点并监听变动,如js文件有修改,会自动重启站点。

nodemon bin/www

 

%e5%9b%be%e7%89%872

hbuilder无法自动编译less文件的解决方案

最近用hbuilder 7.4.2 写less文件,保存后发现无法将less文件自动编译成css文件,删掉,重装,依旧不行,每次都要在less文件上右键->编译 才能得到最新的css文件,本来就是件高效率的事,但这么一来,兴致全无。同事说7.3.2版本之前的hbuilder保存后可以自动编译,但我这么个有强迫症的人怎么可能折回去用旧版?!

后来百度了一下,找到了解决方案:

当然,如果你的less文件保存后无法自动编译,首先你得检查一下less插件安装了没,依次找到 工具->插件安装,如果显示已安装就表示less插件已经安装好了,如果没安装,就勾选上安装一下即可。如下图

qq%e6%88%aa%e5%9b%be20160921194325

依次找到  工具->预编译器设置,选择.less,然后点击编辑。

qq%e6%88%aa%e5%9b%be20160921194623

触发命令地址里填less的编译脚本lessc.cmd地址,在你hbuilder软件文件夹中搜索 lessc.cmd,就能找到这个文件了,在上面右键->属性就能找到他的具体地址。例如我的路径是:D:\绿色软件\HBuilder\plugins\com.pandora.nodejs.thrift_1.0.0.201609081718\js\node_modules\.bin\lessc.cmd

命令参数里写 %FileName% %FileBaseName%.css

点击确定后,再去编写less文件,就能自动编译成css文件了。

qq%e6%88%aa%e5%9b%be20160921194710

【推荐】Clover – windows系统中优秀的资源管理器扩展软件

多年前,还是win7横霸天下的时代,接触到了一款资源管理器扩展软件,叫clover,这款软件可以让”我的电脑”更强大,虽然功能不算太多,但都很贴心,用起来很舒服。后来不知什么原因,自14年1月后作者就没再更新。后来进入win8、win10时代,这款软件出现了严重的兼容性问题,遂放弃,但是一直对这个小帮手念念不忘。

就在前段时间,偶然去软件官网转了转,惊喜的发现又恢复更新了,哈哈,一万个爽!

clover官网:cn.ejie.me

官网的介绍是这样的:Clover 是 Windows Explorer 资源管理器的一个扩展,为其增加类似谷歌 Chrome 浏览器的多标签页功能。

其实让我欲罢不能的除了能将windows原始单窗口模式整合成标签页模式外,还有空白处双击返回上一层,写代码的都知道往返各个目录的时候是多烦人,这个功能简直太方便了,不能每次都去点一下小小的地址栏了。

还有收藏夹功能,像浏览器一样,在某个文件夹内按 ctrl+d,可以收藏当前的文件夹到顶部,下次再访问直接点击收藏栏里的图标就一键直达了。

ps:真心推荐大家尝试一下,你肯定不会后悔的!

1 2

一次曲折的图片搜索经历

事情是这样的,由于工作需要,需要找一张素材图,这张素材图是两年前同事向老师做后盾网宣传册的时候用的,最近重做宣传册想再用一下这张图,但是只能找到ai文件中羽化处理后留下的图片一小部分(如下图),找不到原图,ai里的又不能直接用,而且又找不到比这个更合适的素材图了,so,经过一秒钟的纠结,决定去搜索引擎中搜索一下原图,此时心理预期成功率50%

1

大家应该知道,百度、谷歌提供了识图的搜索功能,即上传一张图片,搜索引擎会自动帮你查找和这张图片相同或相似的图片。

2

将原ai文件中的山峰部分截取出来,然后上传到百度识图搜索了一下。结果如下,此时感觉成功触手可及了^_^

4

结果喜出望外,虽然相似图片中没有提供靠谱的结果,但是图片来源里识别出来的结果还是比较准确的,看缩略图应该就是原图了,怀着满心喜悦点开了链接,

5

什么鬼,这貌似是腾讯原来发布的一个摄影大赛页面,但由于历史悠久,链接失效了,此路不通,宝宝不开森。。。。。

百度这条路暂时不通了,转移阵地,科学上网,你懂的,去谷歌试试。

没想到谷歌这次表现非常不给力,没任何靠谱的结果。

注意,谷歌竟然将高山云海识别成了sky,天空!!!!有木有!好吧,鉴于一直表现比百度优秀,这次开小差就原谅你了。

6

两条路都不通,怎么办?放弃?NO!放弃就白混这么多年了。

又用百度搜出来的标题   云海_大楚网第二届主题摄影大赛:”红”  再次进行搜索,依旧没有结果,估计这个什么摄影大赛也不是啥重要活动,其他网站都没有相关报道,有个网站报道了,但是没有找到这个图片。

肿么办?

作为后盾人,这点事难不倒咱,咱继续。

通过浏览器查看元素功能找到了这张缩略图,7

657e1fb0431defd84e9fac911960e5eb

这最起码比刚才我自己截图出来的更全面了,现在要做的就是看看能不能找到这张图的高清图了,又抱着试试看的心态用百度识图识别了一下这个缩略图,结果如下:

8

 

在搜索结果中,有个 更多尺寸,点开之后,奇迹发生了,竟然找到了高清原图,图片来源还是显示那个打不开的链接,这张原图估计是百度缓存里的图片。

9

 

到此,曲折的搜图经历就结束了。

搜索引擎博大精深,只要多用心,你能搜到任何你想要的东西。祝大家玩的开心!

PS:好搜、搜搜、搜狗、bing目前没有提供识图功能。

一些国外技术类软件国内无法正常下载的解决方案

做技术的都知道,很多新技术如雨后春笋一般,而且大部分情况都是国内追随老外的脚步,node.js、mongodb等资源都需要到国外官网上下载,但由于大陆特殊的网络环境,很多下载的时候比较费劲,比如前段时间在官网下载node.js、mongodb就一直提示没资源,浏览器自带的下载器和迅雷都下载不了,郁闷之极。而且在百度搜相关资源也不多,要么没资源,要么国内下载站的提供的是旧版本的,而且绑定一堆垃圾软件,恶心人。其实大家可以到谷歌直接搜索文件名,比如mongodb,在官网下载的时候下载不了,但是可以通过具体文件名mongodb-win32-x86_64-2008plus-ssl-3.2.9-signed.msi 到谷歌去搜索,结果还是非常精确的,会搜到很多国外其他镜像网站提供的下载地址,多试几个,肯定没问题的。

ps:不得不说,谷歌在技术类搜索方面还是要甩百度N多条街的。

 

QQ截图20160907010656

webstorm设置ctrl+鼠标滚轮即时改变文字大小的方法

用习惯sublime、hbuilder、nodepad++等这类编辑器的码农往往都习惯用ctrl+鼠标滚轮来即时改变文字大小,但是用神器webstorm的时候会发现哪都好,就是这点不好,改变编辑器里文字大小太费劲,在设置里设置好以后就不能轻易改了,后来google了一下,原来webstorm支持ctrl+鼠标滚轮,只不过默认没开启这个功能而已。设置方法如下:

File -> Setting -> General,然后勾选上 Change font size(zoom) with Ctrl+Mouse Wheel ,就OK了!熟悉的快捷操作又回来了!

webstorm设置ctrl+鼠标滚轮即时改变文字大小的方法

神器TortoiseGit自动记住用户名和密码的解决方案

git平台想必程序猿们都不陌生,TortoiseGit更是git工具中的神器,使用方便至极,但千万般好,就一点不好,没有记住密码的选项,每次提交的时候都得手动输入用户名和密码,可能也是出于安全的考虑吧。不过像老孙这种懒人自然不喜欢这样,每次提交心里都无数只羊驼奔腾而过。百度谷歌了好久,把这个问题解决了,把自动保存密码的方法分享给大家。

1、在git项目文件夹空白处右键,依次点击“TortoiseGit” -> “设置(setting)”,会看到如下界面

1

2、 点击“编辑本地git/config(L)

3、在新打开的编辑器中最下方添加如下代码后保存即可。

[credential]
helper = store

2

大功告成,按照这个方法操做完事后的第一次提交可能还要输入用户名和密码,但之后就不要啦!爽歪歪~~~~~~~

修改网页中被选中文字样式(如背景颜色)的方法

现在大家在浏览器网站的时候,会发现越来越多的网站出现了这么一个效果,就是鼠标选中页面中文字的时候,被选中的文字体现出来的不是传统的蓝底白字还是其他颜色,如拉勾网中文字被选中的效果:

修改网页中被选中文字的样式

说实话,这个效果实际的用处并不是太大,有没有均不会对网站的用户体验造成太大影响,但如果合理利用,将被选中文字的样式(如背景颜色等)设置成和网站主色调相似的颜色,会显得页面更舒服一些。好吧,废话不多说,怎么实现呢?很简单,利用css3中提供的::selection伪类选择器即可。

演示代码如下:

<style>
h1::selection{
background: greyellowgreenen;
color: white;
}
h1::-moz-selection{
background: yellowgreen;
color: white;
}
</style>
<h1>后盾网 人人做后盾(效果分享:孙琪峥)</h1>

实际效果演示请猛戳这里:效果传送门

注意:经实际测试,ie、谷歌、斯巴达等浏览器就能直接识别,火狐浏览器需要加-moz-的专属前缀。

【值得收藏】网站开发者常备软件分享

作为一名江湖侠客,一个顺手的兵器是必不可少的,同样,作为网站开发者,用好工具更能大大的提高开发效率,愉悦开发心情^_^。为大家总结了一些常用的网站开发工具,尤其对于初学者,更是值得收藏哦。

请到后盾网论坛下载:http://bbs.houdunwang.com/thread-16890-1-1.html (←此地址长期更新软件最新版,可以加入收藏夹哦)


常用软件列表如下:

网站开发必备浏览器:
1.火狐浏览器 Firefox 46.0.1
2.谷歌浏览器 chrome 51.0

FTP软件:
1.FlashFXP v5.2.0
2.FileZilla v3.14.1

网站开发工具:
1.EditPlus 4.0
2.Notepad++ 6.9.2
3.Sublime Text3
4.Hbuilder 7.1.2
5.EmEditor 12.08
6.Dreamweaver CS6

PHP环境搭建工具:
1.WampServer 2.2a
2.WampServer 2.5
3.PHPstudy2016

数据库操作工具:
1.Workbench v6.3.6
2.Navicat for Mysql v11.1.13

平面设计工具:
1.Photoshop CS6
2.Illustrator CS6

GIT版本库工具:
1.TortoiseGit 2.1.0
2.SourceTree 1.7.0

动画设计工具:
1.Flash CS6

屏幕录制工具:
1.Camtasia Studio 7.1.1(适合xp、win7)
2.Camtasia Studio 8.6.0(适合win8、win10)
3.FSCapture 8.3

虚拟机工具:
1.VirtualBox 5.0.14

其他工具:
1.Putty v0.65
2.WinSCP v5.7.6
3.Picpick v4.1.1

分享一个基于css3的炫酷圆形导航效果

不得不说,用css3自带的transform、animation、transition实现一些常用的动画效果简直太方便了(jquery表示不服~^_^),再配合一些js的处理,有如神助,废话不多说,给大家分享一个基于css3制作的炫酷圆形导航效果
效果如下:

基于css3的圆形导航效果

基于css3的圆形导航效果

哈哈,猴年生猴子,多应景。
ps:顺带打个广告,来后盾网学前端,各种大牛效果等着你,生猴子都是毛毛雨啦~

效果源代码:圆形导航demo

关于我

大名孙琪峥。
一个年龄神秘的骨灰级博客玩家。
一个烧包的伪科技极客。
一个踏实的IT从业者。
中国的顶尖PHP培训机构后盾网前端讲师,江湖外号“小白杀手”,承蒙大家厚爱。

近期评论