前端开发基础6：Node.js和LESS预编译工具
1. 创建资源
开始实验之前，您需要先创建实验相关资源。
- 在实验室页面，单击创建资源。
- （可选）在实验室页面左侧导航栏中，单击云产品资源列表，可查看本次实验资源相关信息（例如IP地址、子用户信息等）。
说明：资源创建过程需要3～5分钟（视资源不同开通时间有所差异，ACK等资源开通时间较长）。完成实验资源的创建后，您可以在云产品资源列表查看已创建的资源信息，例如：子用户名称、子用户密码、AK ID、AK Secret、资源中的项目名称等。
实验环境一旦开始创建则进入计时阶段，建议学员先基本了解实验具体的步骤、目的，真正开始做实验时再进行创建。
资源创建成功，可在左侧的资源卡片中查看相关资源信息以及RAM子账号信息
2. 进入VNC实验环境
- 进入网页环境。
在远程桌面页面中，双击Chromium网页浏览器。
- 登录RAM用户。
2.1 浏览器启动后会默认打开阿里云的RAM用户登录页面，在RAM用户登录框中单击下一步。
2.2 复制粘贴页面左上角的子用户密码到用户密码输入框，单击登录。
- 进入ECS的远程连接。
3.1 登录成功后跳转到控制台，我们在控制台的搜索框中输入ECS，然后单击云服务器ECS进入云服务器控制台。
3.2 在ECS控制台中，我们找到实验创建的ECS，点击右侧的远程连接按钮。
- 在远程连接中选择通过VNC远程连接中的立即登录，如果没有显示该选项，则可单击展开其他登录方式。
- 登录VNC远程连接。
4.1 初次登录VNC远程连接时需要先设置VNC密码。单击重置VNC密码。
4.2 输入两次新的VNC密码，并单击确定。
4.3 VNC密码设置成功后，输入密码并单击确定。
4.4 VNC登录成功后会看到实验ECS的登录界面。
说明：dev账户的登录密码为 Dev12345。
3. node.js的简介和安装
在前面的实验中我们学习了，如何利用前台脚本加载LESS格式的样式表，但是当LESS样式表比较复杂时，这种前台加载的方法会影响网页的加载速度。因此对于比较复杂的项目，一般会在服务器端对LESS样式表做预先的编译和处理，将LESS样式表编译成CSS。而在前端开发中，服务器端预处理平台我们一般会选择node.js。
- Node.js的简介和下载。
Node.js是一个基于Chrome中的V8 JavaScript运行引擎开发的后端JavaScript运行环境。由于Node.js的运行环境源于前端浏览器，因此两者的开发方法高度相通，大大简化了前端开发环境的技术转换门槛，因此在前端开发中，服务器端业务大多使用Node.js环境。
接下来我们来学习一下Node.js环境的安装，我们打开Edge浏览器，访问node.js官网下载地址 https://nodejs.org/en/download/。为了保证稳定性我们选择LTS长期维护版本。接下来看到Linux Binaries(x64)操作系统64-bit平台的下载连接。
由于node.js官方网站的下载速度较慢，因此我们安装包将上传到OSS了，同学们可以在浏览器地址栏中输入https://labfileapp.oss-cn-hangzhou.aliyuncs.com/PracticalTrain/node-v18.14.2-linux-x64.tar.xz进行下载。下载完毕后，点击打开文件夹。打开文件应用。
- node的安装。
2.1 由于node.js没有提供deb方式的安装包。因此我们需要手动进行安装。在文件应用中，单击地址栏右侧的菜单按钮，选择在终端打开(E)，进入终端应用。
2.2 接下来进行解压缩，复制文件和建立软连接，在终端中输入如下代码后按回车.
xz -d node-v18.14.0-linux-x64.tar.xz tar xvf node-v18.14.0-linux-x64.tar sudo mv node-v18.14.0-linux-x64 /usr/local/node echo "export PATH=/usr/local/node/bin:$PATH" >> ~/.bashrc source ~/.bashrc
2.3 命令之后输入dev用户的密码Dev12345，命令执行成功后，我们来验证，执行如下命令.
node -v npm -v
版本信息显示成功表示node安装成功。
- node命令的的基本用法。
3.1 通过上一个步骤将Node.js安装好之后，会在/usr/local/node/bin中安装命令工具。我们在终端中执行如下命令。
ls /usr/local/node/bin/
返回结果如下，我们会发现18.14版本的Node.js提供了4个命令行工具。
3.2 我们首先来介绍node命令，我们在终端中执行如下命令。
node
返回结果如下，在执行node命令之后，我们进入了一个类似python的node脚本运行环境。
3.3 在node运行环境中，我们可以执行JavaScript命令。执行如下命令。
console.log("Hello World");
返回结果如下，即可实时输出脚本运行的结果。运行完毕后按下Ctrl + C两次，即可退出node环境。
4. npm工具的基本用法
在上一小节中，我们学习了如何安装Node.js以及node命令的基本用法。本小节中，我们来学习如何利用Node.js进行less的预编译。
- npm命令的基本用法。
npm命令是除了node命令之外另一个非常重要的命令，它的作用是管理Node.js中庞大的扩展包资源。Node.js作为一个开放的平台，他的常用命令只有四个，而其他的功能都是以扩展插件的形式进行提供。用户如果需要使用某些功能，就可以使用npm来安装扩展资源。
使用npm的安装扩展资源，基本上可以分为两种，一种是全局型资源，一种是项目型资源。全局型资源安装在node目录中，而项目型资源安装在项目所在目录中，为了能通过npm管理和安装项目型资源，我们首先需要通过npm init命令对项目进行初始化。我们在终端中执行如下命令。
npm init
会看到命令执行后会弹出很多的配置项，此处我们可以使用默认设置，连续按回车即可。
项目初始化完成之后，我们会发现目录下自动生成了package.json文件。我可以用vscode打开这个文件，这个文件就是node.js项目的配置文件，在后面的实验中，我们会逐步讲解这个配置文件的用处。
- 通过npm安装Less的编译模块。
除了初始化项目之外，npm工具最常用的用法就是通过npm install 组件名命令安装第三方组件，在npm install命令中可以选择使用-g参数，使用这个参数会将资源以全局型的方式安装，接下来我们通过npm来安装less组件模块。在终端入如下内容。
npm install less -g ls /usr/local/node/bin
我们可以看到全局型资源被到Node.js的bin目录中。这样的好处是我们在使用的时候不必再配置环境变量。即可随时使用。
- lessc命令的验证。
接下来我们验证lessc命令，我们在终端入如下内容。版本信息输出正确表示安装成功。
lessc -v
5. Less样式表的预编译处理
- 初始化LESS样式表.
我们首先通过vscode在/home/dev/web中创建并保存style.less文件。文件中如下内容。
@dark: #141414; @light: #f4f4f4; @control-border: #777777; @defbtn: #3060C0; @cancelbtn: #a4a4a4; @lightbtn: lighten(@defbtn, 20%); .autocolor(@color){ background-color: @color; color: if((hsvsaturation($background-color) > 60%), @light, @dark); } body { background-color: @light; color: @dark; button { .autocolor(@defbtn); &.light { .autocolor(@lightbtn); } &.cancel { .autocolor(@cancelbtn); } } }
- 编译LESS样式表。
lessc命令安装好之后即可用来编译LESS样式表，lessc命令的使用非常简单，只需要在lessc后加入需要编译的文件名和编译后的文件名即可。在终端中运行如下命令
cd /home/dev/web lessc style.less style.css cat style.css
即可看到less样式表编译后的结果。
- 加载样式表。
继续修改index.html文件为如下内容，通过<link>标签加载style.css。
<!DOCTYPE html> <html lang="zh-CN"> <link href="style.css" rel="stylesheet" type="text/css" /> <title>Web dev</title> <body> <div> <button class="">button</button> <button class="light">light button</button> <button class="cancel">cancel button</button> </div> </body> </html>
编译完成后再vscdoe中打开index.html，发现样式表已经生效。
6. Less预编译的常见用法
- lessc工具的其他用法
除了编译less样式表之外，lessc工具还提供了一些辅助功能。例如less样式表的错误检查。接下来我们利用vscode修改less样式文件并再vscode中直接执行终端指令。
1.1 我们打开vscode编译器，通过vscdoe编译器打开style.less文件并修改为如下内容。然后按Ctrl + S保存。
@import "color.less"; @import "size.less"; ```
1.2 保存完毕，我们在vscode下方的终端选项卡中，操作终端，输入如下内容。
lessc -l style.less
我们发现通过lessc -l命令在执行时，检查到了style.less中的文本错误。
1.3 我们再将style.less文件改回原来的内容，并再次执行lessc -l命令，检查无输出表示正常。
@import "color.less"; @import "size.less";
lessc -l style.less
- 利用npm安装less插件。
除了常用的参数之外lessc命令还支持扩展插件功能，通过插件我们可以调整lessc命令的输出结果，接下来我们来尝试一个使用比较多的less-plugin-clean-css插件，首先我可以通过npm来安装这个插件，在的终端中输入如下命令，注意此处我们使用了npm i简写代替了npm install。
npm i less-plugin-clean-css -g
- less-plugin-clean-css插件的使用。
插件安装完毕后我们执行如下命令，注意对于以less-plugin-开头的插件，我们可以用--进行替换。
lessc --clean-css style.less style.css
执行完成后，我们在vscode中打开style.css，会发现这是的样式表已经按照压缩的方式进行了处理，这种压缩过的文件虽然不方便开发人员阅读，但是占用的空间小，适合再项目编写完毕后的打包上线发布时使用。
编译完成后再vscdoe中打开index.html，发现压缩过的样式表的效果和未压缩过的一致。
实验链接：https://developer.aliyun.com/adc/scenario/9caa3309dd144cb68c59d1e2dcf4dab3
