npm script 的文件监听和自动刷新的命令详解

文件监听的作用是为了实现自动化，释放双手和精力，提高效率，让开发者更加关注于开发。npm script 文件监听和 grunt、gulp 功能类似。

自动刷新，意思就是改动文件保存后，页面自动刷新，减少日常开发的操作。

代码检查的监听和自动化

代码检查工具 stylelint、eslint、jsonlint 这些对 watch 支持很弱，所以就需要引入工具包 onchange

安装命令依赖包

npm i onchange -D
// 或
yarn add onchange -D

编写命令

"scripts": {
  "//watch": "# 监听",
  "test": "# 单元测试 \n cross-env NODE_ENV=test mocha tests/",
  "watch:test": "npm test -- --watch",
  "watch:lint": "onchange -i \"**/*.js\" \"**/*.less\" -- npm run lint:css",
  "watch": "npm-run-all --parallel watch:*",
}

剖析命令

  • 使用 \" 是为了实现跨平台兼容；
  • 使用了 **/* 匹配通配符；
  • 参数 -i 是让 onchange 在启动时就运行一次 -- 之后的命令；

执行命令

npm run watch

实现自动刷新

本章主要说的是livereload。

安装命令依赖包

npm i livereload -D
// 或
yarn add livereload -D

编写命令

"scripts": {
  "//livereload": "# 自动刷新",
  "client": "npm-run-all --parallel client:*",
  "client:reload-server": "livereload src/",
  "client:static-server": "http-server src/"
}

页面添加连接 js 脚本

// src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>npm script</title>
  <link rel="stylesheet" href="./index.css" rel="external nofollow" >
</head>
<body>
  <h1>你好，npm script</h1>

  <script>
  var ctx = '<script src="http://' + (location.host || 'localhost').split(':')[0] +
    ':35729/livereload.js?snipver=1"></' + 'script>';
  document.write(ctx)
  </script>
</body>
</html>

/* src/index.css */
body {
  color: #fff;
  background-color: green;
}

总结

以上所述是小编给大家介绍的npm script 的文件监听和自动刷新的命令详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • npm script命令同时进行多个监听服务的方法

    最近在搭建一个静态页面偏多的网站, 用vue或React有点大材小用,使用纯html / css / js 又不好用, 于是就用npm手动搭建一个简单的本地开发环境, 本地环境要实现几个基本功能 在本地开启http服务 ; 且开启服务后, 会自动打开浏览器 浏览器自动刷新 ; 源码变化后, 浏览器会自动刷新显示内容 支持sass语法 ; 将sass代码实时转换为css 支持es6语法 ; 使用babel将es6转换为es5 开启http服务, 自动开启浏览器, 实现浏览器自动刷新的实现思路是,在

  • 实例详解带参数的 npm script

    添加参数可以减少重复的 npm script.拿 eslint 来说,传入 --fix 参数,就开启内置的代码风格自动修复模式,好智能听起来. "scripts": { ..., "lint:js": "eslint ./src/**/*.js", "lint:js:fix": "eslint ./src/**/*.js --fix" } 本着不 DRY 的原则,而且还会遇上复制粘贴带来的风险,可以这么巧妙

  • 使用typescript开发angular模块并发布npm包

    使用typescript开发angular模块并发布npm包

    本文介绍了使用typescript开发angular模块并发布npm包,分享给大家,具体如下: 创建模块 初始化package.json文件 执行命名 npm init -y 会自动生成package.json文件如下,name默认为文件夹名称 { "name": "MZC-Ng-Api", "version": "1.0.0", "description": "", "mai

  • npm scripts 使用指南详解

    Node 开发离不开 npm,而脚本功能是 npm 最强大.最常用的功能之一. 本文介绍如何使用 npm 脚本(npm scripts). 一.什么是 npm 脚本? npm 允许在package.json文件里面,使用scripts字段定义脚本命令. { // ... "scripts": { "build": "node build.js" } } 上面代码是package.json文件的一个片段,里面的scripts字段是一个对象.它的每一

  • npm script 的文件监听和自动刷新的命令详解

    文件监听的作用是为了实现自动化,释放双手和精力,提高效率,让开发者更加关注于开发.npm script 文件监听和 grunt.gulp 功能类似. 自动刷新,意思就是改动文件保存后,页面自动刷新,减少日常开发的操作. 代码检查的监听和自动化 代码检查工具 stylelint.eslint.jsonlint 这些对 watch 支持很弱,所以就需要引入工具包 onchange 安装命令依赖包 npm i onchange -D // 或 yarn add onchange -D 编写命令 "sc

  • Angular中使用$watch监听object属性值的变化(详解)

    Angular中使用$watch监听object属性值的变化(详解)

    Angular中的$watch可以监听属性值的变化,然后并做出相应处理. 常见用法: $scope.$watch("person", function(n, o){ //todo something... }) 但是对于一个对象中的某个属性值变化时,$watch似乎不管用了. 示例代码: <body> <div ng-controller="mainCtrl"> <input id="myText" type=&qu

  • Android 监听软键盘状态的实例详解

    Android 监听软键盘状态的实例详解 近日遇到要检测软键盘是否显示或隐藏的问题,搜了一下网上,最后找到一个很简单的,记录一下. activityRoot是activity的根view,就是xml里面的第一个view,给它设置一个id. final View activityRootView = findViewById(R.id.activityRoot); activityRootView.getViewTreeObserver().addOnGlobalLayoutListener(ne

  • 微信小程序 监听手势滑动切换页面实例详解

    微信小程序 监听手势滑动切换页面实例详解 1.对应的xml里写上手势开始.滑动.结束的监听: <view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view> 2.js: var touchDot = 0;//触摸时的原点 var time = 0;// 时

  • Flume监听oracle表增量的步骤详解

    需求:获取oracle表增量信息,发送至udp514端口,支持ip配置 步骤: (1)需要的jar  oracle的 odbc5.jar(oracle安装目录  /jdbc/lib下查找) (2)flume的开源包flume-ng-sql-source-1.4.3.jar  最新的好像是1.5的 小版本记不住了 这个下载地址直接csdn上就有 这两个jar 都拷贝到flume的lib下 (3)flume配置文件 a1.sources = r1 a1.sinks = k1 a1.channels

  • android studio按钮监听的5种方法实例详解

    1.匿名内部类 public class MainActivity extends AppCompatActivity implements View.OnClickListener { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button btn1 = fin

  • JSP 自动刷新的实例详解

    JSP 自动刷新的实例详解

    JSP 自动刷新的实例详解 考虑一个网页被显示实时游戏得分或股市状况或货币兑换利率.对于所有这些类型的网页,你需要使用的刷新或重新加载按钮,您的浏览器定期刷新网页. JSP使这个工作变得简单,它提供一种机制,可以使网页在这样一种方式,它会在给定的时间间隔后自动刷新. 刷新网页的最简单的方法是使用方法setIntHeader()响应对象.下面是该方法的签名: public void setIntHeader(String header, int headerValue) 此方法发送回标题"刷新&q

  • SpringBoot如何监听redis Key变化事件案例详解

    SpringBoot如何监听redis Key变化事件案例详解

    目录 一 .功能概览 二.事件类型 三.配置 三.案例 代码 新增和修改都是set指令 删除 过期 总结 键空间通知(keyspace notification) 一 .功能概览 键空间通知使得客户端可以通过订阅频道或模式, 来接收那些以某种方式改动了 Redis key变化的事件. 所有修改key键的命令. 所有接收到 LPUSH key value [value …] 命令的键. db数据库中所有已过期的键. 事件通过 Redis 的订阅与发布功能(pub/sub)来进行分发, 因此所有支持

  • Bootstrap滚动监听组件scrollspy.js使用方法详解

    其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮. 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 2.导航必须是 .nav > li > a 结构,并且a上href或data-target要绑定hashkey 3.菜单上必须有.nav样式 4.滚动区域的data-target与导航父级Id(一定是父级)要一致. <div id="selector" class=&qu

  • js实现无刷新监听URL的变化示例代码详解

    无刷新改变路由的两种方法通过hash改变路由 代码 window.location.hash='edit' 效果 http://xxxx/#edit 通过history改变路由 history.back(): 返回浏览器会话历史中的上一页,跟浏览器的回退按钮功能相同 history.forward():指向浏览器会话历史中的下一页,跟浏览器的前进按钮相同 history.go(): 可以跳转到浏览器会话历史中的指定的某一个记录页 history.pushState()可以将给定的数据压入到浏览器

随机推荐