webstorm和node配合使用的一些小技巧之External tools

Mr_houzi 发布于2019-08-29 10:55 / 926人阅读

摘要：所谓的表现样式控制分离。再后来修改维护时如果修改一些参数，或者样式很多时，结构很混乱，维护很麻烦，于是有了等一众预处理语言的一个好处就是可以让的结构很清晰。再加上现在模块化那么流行，还要强调重用性，所以模块里面还要再去套用模块。

webstorm和nodejs都是神器，只是我一直都没有发掘出来他们的厉害之处

要说webstrom和node的配合使用不得不说一下平时的工作流程这里以css为例

根据页面划分功能模块

根据模块写less或者修改less

编译less为css

压缩css并上传

都说前端是网页设计，其实写css也可以很“面向对象”或者说“面向结构”

从最早的web页面开始时，样式是写在HTML里面的，后来把css和js拿了出来(model,view,control。所谓的表现、样式、控制分离)。

再后来css修改维护时如果修改一些参数，或者css样式很多时，结构很混乱，维护很麻烦，于是有了less等一众CSS预处理语言(less的一个好处就是可以让css的结构很清晰)。

再加上现在模块化那么流行，还要强调重用性，所以模块里面还要再去套用模块。

于是文件结构变成了下面这样

最外层是单个页面或主模块的less， 里面是某一个插件(swiper)的less或者某个动画(animate)效果的less

文件结构已经好了，然后呢？接下来就需要配合webstorm使用了

前提条件：安装nodejs,安装less,安装less-plugin-clean-css，安装webstorm

打开webstorm-->File-->Setting-->Tools-->External tools(可以直接搜索)

如下图：点击加号-->填入命令的名字，选择命令所属分组（可以输入创建，我这里的是css）,然后进行工具设定

我这里要设定的是一条less的编译并压缩的命令（类似下面这条）

lessc --plugin=less-plugin-clean-css a.less a.min.css

左下角方框第一行是命令文件地址

C:UsersAdministratorAppDataRoaming
pmlessc.cmd 
（这是我电脑的地址，找不到文件可以在电脑上全局搜索lessc.md）

左下角方框第二行是执行的命令

 --plugin=less-plugin-clean-css $ProjectFileDir$$FileDirRelativeToProjectRoot$$FileName$   $ProjectFileDir$$FileDirRelativeToProjectRoot$$FileNameWithoutAllExtensions$.min.css

（中间那些$看不懂的点右下角方框对应的按钮，对着选项点几下你就明白是什么意思了,不懂英文也没关系）
我这里命令的意思是直接压缩并编译less到对应的项目文件夹，后缀名是.min.css

左下角方框第三行是命令工作目录，一般选择第一个时会自动选中

$FileDir$

操作完毕后点击OK保存

然后去设置一下这个命令的快捷键我的为：ALT+X

接下来就可以在webstorm里面很方便的使用这条命令了

最后，如果只是这么一条命令也就算了，你有没有想过加入其它命令呢？

比如：加入node,直接跑express服务器deng，

加入cmd，执行bat脚本提交git仓库，

或者一些其它工具等等，

是不是瞬间感觉逼格满满，很期待呢？赶紧去尝试吧！

云服务器 GPU云服务器阿里云服务器怎么和小程序配合使用 node js webstorm ddos一些比较小的网站小技巧

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111308.html

babel6 入门-配置安装使用_byKL

摘要：入门什么是是一个广泛使用的转码器，可以将代码转为代码，从而在现有环境执行。 babel6 入门什么是babel Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。因为es6比es5的代码更为适合编写程序,但是因为历史的原因,现在普遍的浏览器并不支持es6代码(普遍支持es5),即如果你写es6代码之后,在浏览器上运行出错,因为浏览器的javas...

qianfeng 2019-08-20 14:31 评论0 收藏0
指尖前端重构（React）技术调研分析

摘要：一为什么选择是当前前端应用最广泛的框架。目前来看的生态系统要比大的多，在等最大的技术社区搜索两者，的搜索结果是的十倍左右，另外据近期统计使用的站点是的几百倍以上。其中是基于技术，依然是浏览器应用。一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。 Angular出现最早，但其在原理上并没有React创新的性能优化...

AlphaWallet 2019-08-23 18:18 评论0 收藏0
有哪些 JS 调试技巧——devtool，以及安装问题的解决

摘要：试试年年初出的调试神器基于将和的功能融合在了一起。直接命令行下启动，替代命令和在下没有交互的。解决方法在最下面。小技巧另外启动调试可以用这样可以监听文件变化自动，以及在文件开头自动以便打断点调试。转自本人知乎回答作者：mdluo链接：https://www.zhihu.com/question/20260762/answer/89388634来源：知乎著作权归作者所有。商业转载请联...

gaomysion 2019-08-19 18:47 评论0 收藏0
webstorm 设置 sass自动编译问题

摘要：语法使用它带来的好处，就不再这里做介绍了，主要看怎么在里配置自动编译。因为国内网络的问题导致源间歇性中断因此我们需要更换源。也就是说，任何标准的样式表都是具有相同语义的有效的文件。参考文档官网设置自动编译及参数配置　　sass语法、使用它带来的好处，就不再这里做介绍了，主要看怎么在webstorm里配置自动编译。　　sass编译是需要Ruby环境的，可以到这里去下载 : https:/...

APICloud 2019-04-23 13:13 评论0 收藏0
webstorm使用技巧

摘要：在中使用正则进行查找或替换使用正则来查找想该行数据替换为下行数据。完全是按照正则的规则来书写的。注意勾选搜素或替换框中的，否则不生效。禁止索引从设置为删除插件来避免卡死。在Webstorm中使用正则进行查找或替换使用正则来查找http://stackoverflow.com/ques... 想该行数据替换为下行数据。@include border-radius($big-radiu...

fanux 2019-08-20 15:52 评论0 收藏0