当前位置:首页 > 技术文档 > 正文内容

Windows7 x64系统下安装Nodejs并在WebStorm 9.0.1下搭建编译less环境

admin10年前 (2015-10-11)技术文档2227

Node.js v0.10.26 稳定版发布:

 http://www.oschina.net/news/48999/node-js-0-10-26

1、 打开Nodejs官网http://www.nodejs.org/,点“DOWNLOADS”,点64-bit下载“node-v0.10.33-x64.msi”。

 bubuko.com,布布扣

2、 下载好后,双击“node-v0.10.33-x64.msi”,按照默认选项安装Nodejs,默认安装路径为:C:\Program Files\nodejs。

 

3、 “开始”-->cmd,打开cmd程序,输入“node -v”,出现” v0.10.33”; 输入“npm -v”,出现” 1.4.28”,说明Nodejs和npm都已安装成功。

 bubuko.com,布布扣

 

4、 进入C:\Program Files\nodejs,双击运行“npm.cmd”,你会发现它一闪而过,捕捉到的错误信息截图如下:

 bubuko.com,布布扣

上网查询好多人都会出现这个错误!解决方法如下:进入C:\Users\wind\AppData\Roaming目录下,新建文件夹“npm”(特别注意:AppData为隐藏文件夹,要设置文件夹查看属性为“显示隐藏的文件、文件夹和驱动器”才可见)。

 

5、 再次进入C:\Program Files\nodejs,双击运行“npm.cmd”,捕捉到的信息截图如下:

 bubuko.com,布布扣

 

6、“开始”-->cmd,打开cmd程序,输入“cd C:\Program Files\nodejs”,进入nodejs安装目录。输入npm install less回车,安装less组件。完成后,你会发现C:\Program Files\nodejs\node_modules\npm\node_modules目录下没有less组件。

 bubuko.com,布布扣

找了好久原因,原来它在C:\Users\wind\AppData\Roaming\npm-cache目录下。

 bubuko.com,布布扣

 

7、“开始”-->cmd,打开cmd程序,输入“cd C:\Users\wind\AppData\Roaming\npm”,回车进入该目录,输入“npm install less”回车。稍等片刻,less组件就会安装在该目录下的“node_modules ”文件夹。

 bubuko.com,布布扣

bubuko.com,布布扣

至此Windows7 x64系统下安装Nodejs及配置less组件已基本完成,接下来我们配置WebStorm 9.0.1,使其能将less文件编译成css文件。

 

8、开启JetBrains WebStorm 9.0.1程序,打开“SuperDesigns”项目,该项目中含有“default.less”文件。

 bubuko.com,布布扣

 

9、File-->Settings,打开设置选项。找到“External Tools”扩展工具设置项,点开右侧的“+”,在Name栏输入“LESS”,“Tool settings”分别输入如下:

Program: C:\Program Files\nodejs\ node.exe

Parameters: C:\Users\wind\AppData\Roaming\npm\node_modules\less\bin\lessc $FilePath$ $FileDir$\$FileNameWithoutExtension$.css

Working directiry: C:\Program Files\nodejs

确认输入无误后点右下的“OK”按钮。然后再点Settings 版右下的“Apply”按钮应用。

 bubuko.com,布布扣

 

10、在Settings 面板顶端输入“key”,找到快捷键设置项“Keymap”,在右侧找到“External Tools”点开,点选“LESS”并单击右键,选择“Add Keyboard Shortcut”,在出现其面板的“First Stroke”处同时按下“Alt+B”键,这样就将“Alt+B”设置为将less文件编译成css文件的快捷键。当然你可以根据自己的实际情况设置成其它的快捷键。确认好后点Settings 面板右下的“OK”按钮。

 bubuko.com,布布扣

 bubuko.com,布布扣

 bubuko.com,布布扣

 

11、回到打开的default.less文件,按下“Alt+B”快捷键,看看“default.css”是不是生成了!

 bubuko.com,布布扣

 bubuko.com,布布扣

至此已成功将less文件编译成css文件。

Windows7 x64系统下安装Nodejs并在WebStorm 9.0.1下搭建编译less环

 

分享到:

扫描二维码推送至手机访问。

版权声明:本文由云河空间发布,如需转载请注明出处。

本文链接:https://yuyunhe.cn/index.php/post/107.html

分享给朋友:

“Windows7 x64系统下安装Nodejs并在WebStorm 9.0.1下搭建编译less环境” 的相关文章

网页背景全屏拉伸的css效果

background: url(“http://www.wyzu.cn/uploadfile/2013/0220/20130220112423140.jpg”) repeat fixed center top / cover #595959;...

php 使用curl模拟登录discuz以及模拟发帖

<?php $discuz_url = 'http://127.0.0.1/discuz/';//论坛地址 $login_url = $discuz_url .'logging.php?action=login...

git的几个小技巧

git的几个小技巧

分享git的几个小技巧,后面会根据使用补充。目前包括git撤销本地修改、git回退到前n个版本、git多用户提交冲突解决、git 命令简化。欢迎大家补充^_*1、git撤销本地修改 Java git reset --hard origin/ma...

用php gettext库来开发多语言系统

用php gettext库来开发多语言系统

通常人们写程序时都是将文字写死在程序里的, 比如:echo "Hello World!";  ,假如要改成它国语言,写国际化程序,就要逐个打开进行修改,程序较短时还行,若程序有上万甚至更多,改起来就不是那么容易了。近来随着i18n的逐渐标 准化,我也来讲一讲在PHP中如...

图文解说Navicat使用ssh方式连接远程MySql服务器

图文解说Navicat使用ssh方式连接远程MySql服务器

如何使用Navicat 8.0 for MySQL连接公司服务器的数据库,但我也是第一次接触这个软件,搞了半天也没连上,在网上找了很多解决的办法,其中就有使用ssh方式连接的,但写的不够详细,因此还是费了一番功夫,自己搞定的,不敢独享,特记录下来 与大家分享。首先,在Navicat的连接设置里选择S...

wamp下虚拟主机的配置

1  编辑httpd.conf,查找Include conf/extra/httpd-vhosts.conf,把前面注释符号“#”删掉。 2  编辑httpd-vhosts.conf,我把WAMPServer安装在D:/wamp,所以我这里的路径是D:\wamp\Apache2\...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。