使用NPM Scripts包装构建命令
时间:2021-02-23
本文章向大家介绍使用NPM Scripts包装构建命令,主要包括使用NPM Scripts包装构建命令使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
NPM Scripts是实现自动化构建工作流的最简方式
1、使用NPM Scripts包装构建命令
(1)在package.json中添加“scripts”字段
package.json
"scripts": { "build":"sass scss/main.scss css/style.css" },
添加完后完整的是下面这个样子的
{ "name": "scss", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "build":"sass scss/main.scss css/style.css" }, "devDependencies": { "sass": "^1.32.8" } }
(2)通过npm或是yarn启动scripts
yarn build
(3)为项目安装一个browser-sync的模块,用于启动测试服务器,运行项目
yarn add browser-sync --dev
(4)在scripts中添加serve命令,在这个命令当中,通过browser-sync把当前目录运行起来
"serve":"browser-sync ."
添加完后完整的是下面这个样子的
{ "name": "scss", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "build": "sass scss/main.scss css/style.css", "serve":"browser-sync ." }, "devDependencies": { "browser-sync": "^2.26.14", "sass": "^1.32.8" } }
(5)在命令行运行serve命令
yarn serve
此时browser-sync会自动启动一个web服务器,并且唤起浏览器,运行当前的网页
(6)使用NPM Scripts的钩子机制preserve,可以在serve之前先执行build,这时候先执行serve,它就会自动化的先执行build命令
在scripts中添加preserve
"preserve":"yarn build",
// 这样就可以在执行serve时,构建sass文件,将scss转css
完整版
{ "name": "scss", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "build": "sass scss/main.scss css/style.css --watch", "preserve":"yarn build", "serve":"browser-sync ." }, "devDependencies": { "browser-sync": "^2.26.14", "sass": "^1.32.8" } }
(7)给sass命令添加--watch参数
"build": "sass scss/main.scss css/style.css --watch",
// 在工作时会监听文件的变化,当代码中的sass文件发生变化,他就会自动被编译
完整版
{ "name": "scss", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "build": "sass scss/main.scss css/style.css --watch", "preserve":"yarn build", "serve":"browser-sync ." }, "devDependencies": { "browser-sync": "^2.26.14", "sass": "^1.32.8" } }
(8)同时执行多个任务,借助npm-run-all模块
安装 npm-run-all
yarn add npm-run-all --dev
(9)在scripts中添加start命令
"start": "run-p build serve"
// 可以同时执行build和server命令
完整版
{ "name": "scss", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "build": "sass scss/main.scss css/style.css --watch", "serve":"browser-sync .", "start": "run-p build serve" }, "devDependencies": { "browser-sync": "^2.26.14", "sass": "^1.32.8" } }
(10)运行start命令
yarn start
(11)给server添加--files \"css/*.css\"
"serve":"browser-sync . --files \"css/*.css\"",
// 这个参数可以让browser-sync在启动后监听项目下文件的变化
// 文件发生变化后,browser-sync会将这些变化内容自动同步到浏览器,更新浏览器界面,可即时查看最新的界面效果
完整版
{ "name": "scss", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "build": "sass scss/main.scss css/style.css --watch", "serve":"browser-sync . --files \"css/*.css\"", "start": "run-p build serve" }, "devDependencies": { "browser-sync": "^2.26.14", "sass": "^1.32.8" } }
原文地址:https://www.cnblogs.com/phantomyy/p/14435260.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android Studio 合并module到统一文件夹的方法
- JS实现访问DOM对象指定节点的方法示例
- SpringBoot使用自定义json解析器的使用方法
- Python统计单词出现的次数
- 详解Ubuntu16.04启动器图标异常解决方法
- PHP基于面向对象实现的留言本功能实例
- PHP面向对象五大原则之单一职责原则(SRP)详解
- vue中mint-ui的使用方法
- vue基于mint-ui实现城市选择三级联动
- Centos7使用docker搭建gitlab服务器
- 解决vue中使用swiper插件问题及swiper在vue中的用法
- 非常简单的Shell菜单脚本
- Android仿QQ空间顶部条背景变化效果
- Android触摸事件传递机制
- python如何使用unittest测试接口