安装Nodejs、npm、Less（支持生成压缩后的css）

╰+攻爆jí腚メ 2022-05-28 01:45 138阅读 0赞

# 前言 #

最近深入了解Bootstrap，顺便将Nodejs、npm、Less、Grunt等相关程序的安装梳理了一遍，写一几篇博文记录下，待需要时查找方便。

# 正式动手 #

## 安装Nodejs和npm ##

1.到[https://nodejs.org/en/][https_nodejs.org_en]下载最新的版本，安装到d盘下，假设安装后的路径为D:\\Program Files\\nodejs，笔者当前的版本v6.9.4，已经集成了npm，可以从【开始】-【所有程序】-【Node.js】-【Node.js command prompt】，打开命令行（经笔者测试直接用windows自带的cmd也可以），输入以下命令查看Nodejs和npm的版本。

//查看nodejs版本
    node -v
    //查看npm版本
    npm -v

*  1
 *  2
 *  3
 *  4

看到以下提示说明安装成功

![这里写图片描述][SouthEast]   
2. 添加环境变量，在桌面上点键计算机-【属性】-【高级系统设置】-【高级】-【环境变量】-【系统变量】-【新建】：   
![这里写图片描述][SouthEast 1]   
NODE\_PATH=D:\\Program Files\\nodejs\\node\_modules\\npm\\

## 安装Less ##

1.  在【Node.js command prompt】里输入以下命令

d:
    cd D:\Program Files\nodejs\node_modules\npm
    //下面命令是安装less，注意一定要有-g，否则还得做些其他工作
    npm install less -g
    //下面命令用于安装css压缩插件
    npm install less-plugin-clean-css

*  1
 *  2
 *  3
 *  4
 *  5
 *  6

安装完成后就可以使用lessc的命令了

//下面命令编译less文件生成css
    lessc d:\styles.less d:\styles.css
    //下面命令启用css压缩插件，生成压缩后的css文件
    lessc d:\styles.less d:\styles.min.css -clean-css

*  1
 *  2
 *  3
 *  4

上面的命令保能处理单个less文件，可以在WebStorm里配置Watcher，在编辑less文件的同时，自动生成css文件。详见[《 在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件》][_WebStorm_watcher_less_.map_.css]

[https_nodejs.org_en]: https://nodejs.org/en/
[SouthEast]: /images/20220528/8bb4d08cecc1430bb3302ebac25876b1.png
[SouthEast 1]: /images/20220528/c9765720f85246f7aa63cad54da38637.png
[_WebStorm_watcher_less_.map_.css]: http://blog.csdn.net/lhtzbj12/article/details/54882683