PHP-PHPstorm配置自动编译less

说明

• PHPstrom配置自动编译less，当修改less文件后自动生成对应的css文件。

安装nodejs

• 版本没有要求，安装官方推荐稳定版即可
• 配置修改
  • 查看配置：npm config ls -l
  • 修改缓存目录：npm config set cache D:\SoftwareCache\nodejs
  • 修改依赖下载目录：npm config set prefix D:\SoftwareCache\npm
    • node_modules所在目录，所有npm安装的包都会放在该目录
  • 修改仓库地址：npm config set registry https://registry.npm.taobao.org/
    • 之前淘宝镜像地址已不能使用，新淘宝镜像地址：https://registry.npmmirror.com/；
    • 默认仓库地址：https://registry.npmjs.org/
  • 查看用户配置文件位置：npm get userconfig
    • 修改过的配置都被记录在此文件中
• 安装less: npm install less -g

配置PHPstorm

• 配置路径：File | Settings | Tools | File Watchers
• 点击“+”，选择LESS
• 如果修改了依赖下载目录，需要手动修改一下Program：D:\SoftwareCache\npm\lessc，如果没有修改会自动识别。
  • 默认位置：C:\Users\zhangsan\AppData\Roaming\npm\lessc
• 指定css文件生成的位置Arguments：$FileName$ ../css/$FileNameWithoutExtension$.css
  • 如果需要生成map文件Arguments：$FileName$ ../css/$FileNameWithoutExtension$.css --source-map
• 之后修改less文件后会自动生成css文件