安装Nodejs、npm、将预处理css的Less文件转变css

安装Nodejs、npm、将预处理css的Less文件转变css

less是一款比较流行的预处理CSS，支持变量、混合、函数、嵌套、循环等特点

1、 安装nodejs

• 到 官网先下载最新版本的node，我的是node-v12.2.0-x64.msi版本，双击打开，装到自己想装的盘符，在这里我装的是D:\workTools\nodejs文件夹下，然后一直点击下一步，直到最后。
  
• 在D:\workTools\nodejs文件夹中按shift键同时按下右键，会出现“在此处打开PowerShell窗口”字样，这是操作系统默认自带的，若出现下面表示安装成功：

PS D:\workTools\nodejs> node -v
v12.2.0
PS D:\workTools\nodejs> npm -v
6.9.0
PS D:\workTools\nodejs>

2、 安装npm

• 其实npm在Node.js安装的时候已经顺带装好了
• 接下来装less
• 若直接输入lessc -v 报错则表示还没有成功安装less
• 先执行npm install less -g，该命令是安装less，注意一定要有-g，否则还得做些其他工作
• 再执行npm install less-plugin-clean-css，该命令用于安装css压缩插件
• 最后再次输入lessc -v 不报错则安装成功，如下图

D:\workTools\nodejs> node -v
v12.2.0
PS D:\workTools\nodejs> npm -v
6.9.0
PS D:\workTools\nodejs> lessc -v
lessc : 无法将“lessc”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正
确，然后再试一次。
所在位置 行:1 字符: 1
+ lessc -v
+ ~~~~~
   + CategoryInfo          : ObjectNotFound: (lessc:String) [], CommandNotFoundException
   + FullyQualifiedErrorId : CommandNotFoundException

PS D:\workTools\nodejs> npm install less -g
C:\Users\Admin\AppData\Roaming\npm\lessc -> C:\Users\Admin\AppData\Roaming\npm\node_modules\less\bin\lessc
+ [email protected]
added 60 packages from 123 contributors in 12.158s
PS D:\workTools\nodejs> npm install less-plugin-clean-css
npm WARN saveError ENOENT: no such file or directory, open 'D:\workTools\nodejs\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'D:\workTools\nodejs\package.json'
npm WARN nodejs No description
npm WARN nodejs No repository field.
npm WARN nodejs No README data
npm WARN nodejs No license field.

+ [email protected]
added 6 packages from 39 contributors and audited 12102 packages in 4.906s
found 5 vulnerabilities (1 low, 4 high)
 run `npm audit fix` to fix them, or `npm audit` for details
PS D:\workTools\nodejs> lessc -v
lessc 3.9.0 (Less Compiler) [JavaScript]
PS D:\workTools\nodejs>

此时便可以使用lessc命令了，但为了在别的文件夹下也可以使用，需要将D:\workTools\nodejs\node_modules\npm添加到全局变量

3、添加到全局环境中

• 右击我的电脑-属性-高级系统设置-环境变量：
  
  然后双击用户变量里面的Path，新建，将D:\workTools\nodejs\node_modules\npm添加到环境变量中，然后依次按确定按钮
  
  此时便可以随意使用lessc了，如下（我最后测试用的是系统自带的cmd.exe）：

Microsoft Windows [版本 10.0.17134.706]
(c) 2018 Microsoft Corporation。保留所有权利。

C:\Users\Admin>d:

D:\>cd  D:\资料\less\code

D:\资料\less\code>lessc main.less  //lessc main.less为输入内容
/* 定义一个类 */
body {
 background-color: #1a1a1a;        /*lighten 变亮10%*/
 color: #e6e6e6;     /*darken 变暗 10%*/
}

D:\资料\less\code>

原本的main.less文件内容为：

body {
background-color: lighten(#000, 10%);   /*lighten 变亮10%*/
color: darken(#fff, 10%);/*darken 变暗 10%*/
}

若想将生成的css保存到一个.css文件里，用 lessc main.less > main.css

D:\资料\less\code>lessc main.less > main.css
D:\资料\less\code>

此时你就能看到文件夹里多一个main.css文件了