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

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

要说webstrom和node的配合使用不得不说一下平时的工作流程这里以css为例
  1. 根据页面划分功能模块

  2. 根据模块写less或者修改less

  3. 编译less为css

  4. 压缩css并上传

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

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

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

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

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

最外层是单个页面或主模块的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:\Users\Administrator\AppData\Roaming\npm\lessc.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仓库,

或者一些其它工具等等,

是不是瞬间感觉逼格满满,很期待呢?赶紧去尝试吧!

关键字:webstorm, node, css, less

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部