首先初始化项目并配置package.json，接着安装live-server、sass等开发依赖，然后在scripts中定义启动、编译、压缩等自动化命令，再通过onchange实现文件监听，最后使用npm-run-all并行执行多任务，提升HTML开发效率。
如果您希望在编写HTML代码时减少重复性操作，提高开发效率，可以通过集成npm脚本来实现任务自动化。自动化流程可以涵盖文件压缩、样式编译、实时预览等环节。
本文运行环境：MacBook Pro，macOS Sonoma
一、初始化项目并配置package.json
npm脚本依赖于项目根目录下的package.json文件，该文件用于定义脚本命令和项目依赖。初始化项目是使用npm脚本的前提。
1、打开终端，进入您的HTML项目根目录。
立即学习“前端免费学习笔记（深入）”；
2、运行命令 npm init -y，快速生成默认的package.json文件。
3、检查生成的package.json文件，确保存在"scripts"字段，以便后续添加自定义命令。
二、安装必要的开发依赖
为了实现自动化功能，需要安装如Sass编译器、HTML压缩工具或服务器工具等第三方包。这些工具将被npm脚本调用执行具体任务。
1、安装用于本地开发服务器的包，例如live-server，运行命令 npm install live-server --save-dev。
2、若项目包含Sass文件，可安装sass包：npm install sass --save-dev。
3、如需压缩HTML输出，可安装html-minifier-cli：npm install html-minifier-cli --save-dev。
三、定义常用自动化脚本
通过在package.json的"scripts"字段中添加命名脚本，可以将复杂命令简化为短指令，便于重复执行。
1、编辑package.json文件，在"scripts"中添加启动本地服务器的命令：
"start": "live-server ./dist"
2、添加样式编译脚本，将SCSS转换为CSS：
"build:css": "sass src/scss:dist/css --style compressed"
3、设置HTML压缩任务：
"minify:html": "html-minifier --collapse-whitespace --remove-comments --input-dir dist --output-dir dist"
4、创建组合任务，例如先编译样式再压缩HTML：
"build": "npm run build:css && npm run minify:html"
四、使用监听脚本实现自动执行
借助文件监听机制，可在源文件更改时自动触发构建任务，从而实现开发过程中的实时更新。
1、安装文件监听工具onchange：npm install onchange --save-dev。
2、在scripts中添加监听命令：
"watch:css": "onchange 'src/scss/**/*.scss' -- npm run build:css"
3、运行 npm run watch:css，当SCSS文件保存时将自动编译成CSS。
五、整合多任务并行执行
通过并行运行多个监听或服务进程，可以同时处理不同类型的资源变更，提升开发流畅度。
1、安装并行执行工具npm-run-all：npm install npm-run-all --save-dev。
2、在scripts中定义并行任务：
"dev": "npm-run-all --parallel start watch:css"
3、执行 npm run dev 后，本地服务器启动的同时，样式文件也将被持续监听与编译。
