跟angular2学一键开启项目--关于上个react-redux项目的一键调试
一键调试类似于webpack的hot-loader,但是这个hot-loader并不怎么好用,想省事的同学可以配置一下就完了。
今天介绍browser-sync,用它来一键开启项目。它可以监听任意文件的变动来reload浏览器,而且还可以自动打开项目,写一个script的命令行,轻松做到一键。
这个是从angular2借鉴来的,angular2用到的是lite(一个小型的服务器,其实它也是封装的browser-sync),concurrently(命令行同步执行命令的包),我们用到的是browser-sync和concurrently
还记得上个redux的新闻项目吗,这次的代码是把原来新闻项目改造为一键开启。传送门。改到master分支了。
首先介绍一下browser-sync。Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。
多端调试我们用不到,用它自动响应就好。
npm install -g browser-sync
安装完,再执行
browser-sync start --server --files "**/*.css, **/*.html"
就能自动hot-load。用它的命令行是不需要写配置文件的。后面--files匹配到的文件都可以热加载,你可以自己写需要改动的文件匹配。
这里我们结合gulp使用。
看一下怎么写gulpfile
var gulp = require('gulp'); var browserSync = require('browser-sync').create();var reload = browserSync.reload;gulp.task('serve', function() {browserSync.init({server: "./"}); gulp.watch("./*.html").on('change', reload);gulp.watch("dist/*.js").on('change', reload); }); gulp.task('default', ['serve']);
browserSync起一个服务器,gulp watch file,再调用reload。是不是很简单。。
gulp也可以处理sass,
var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var sass = require('gulp-sass'); var reload = browserSync.reload;// 静态服务器 + 监听 scss/html 文件 gulp.task('serve', ['sass'], function() {browserSync.init({server: "./app"});gulp.watch("app/scss/*.scss", ['sass']);gulp.watch("app/*.html").on('change', reload); });// scss编译后的css将注入到浏览器里实现更新 gulp.task('sass', function() {return gulp.src("app/scss/*.scss").pipe(sass()).pipe(gulp.dest("app/css")).pipe(reload({stream: true})); });gulp.task('default', ['serve']);
现在输入
gulp
就可以打开browser-sync的服务器,但是不能hot-load,为啥,因为项目里我们监听的是webpack打包之后的文件,而且我们必须监听这个。
webpack不编译,bundle.js就不变…
那我们就再用webpack监听文件的变化,webpack -w,自动监听webpack匹配到文件的变化。
但是gulp监听,webpack也监听,这怎么写命令?这就用到了concurrently,让它两个同时监听。
具体用法就不说了,github搜一下,我就上命令了。angular2也是类似差不多的。它只是用的tsc来编译ts文件。
webpack && concurrently \"npm run webpack:w\" \"npm run gulp\"
其中webpack:w === webpack -w
把它写进package.json吧:
... "start": "webpack && concurrently \"npm run webpack:w\" \"npm run gulp\"","gulp":"gulp","webpack:w": "webpack -w", ...
注意:因为后面那个npm run gulp是字符串,你得把gulp在script里面写一遍才行。
到此,现在执行
npm start
就可以hot-load啦。以后一键调试,一键开启项目,都是非常爽的。它还可以适用于任何项目,原理就是监听文件嘛。
angular2官方例子里面的script命令是:
tsc && concurrently \"npm run tsc:w\" \"npm run lite\"
和咱们写的是一样的-0-,哈哈,从angular2里面抄来的~
转载于:https://www.cnblogs.com/dh-dh/p/5509824.html
跟angular2学一键开启项目--关于上个react-redux项目的一键调试相关推荐
- react实战项目_React实战之React+Redux实现一个天气预报小项目
引言 经过一段时间的React学习,React和Vue的开发确实有很大的不同,但是都是MVVM框架,因此上手没有很大的难度,这次用React+Redux开发一个天气预报小项目.源码地址:https:/ ...
- php项目如何上传服务器,php项目上传到云服务器
php项目上传到云服务器 内容精选 换一换 将文件上传至Windows云服务器一般会采用MSTSC远程桌面连接的方式.本节为您介绍本地Windows计算机通过远程桌面连接,上传文件至Windows云服 ...
- java项目eclipse上tomcat部署后项目添加不进去
项目右键properties-搜索Project Facets-勾选java ,javascript,Dynamic Web Moudle!!!
- 项目交易平台上发布的项目
去年下半年开发的AVC/AAC流播放器虽然在C/S模式下性能很好,但在B/S模式下的兼容性还有很长的路要走.以前因为FMS2不支持H.264,FMS3刚出来时间不长,还有些担心.经过08年的大量应用, ...
- React native 项目进阶(redux, redux saga, redux logger)
之前利用知乎日报的api写了react-native的一个入门项目,传送文章地址React Native 项目入门和源码地址RN入门项目源码,目前github上的代码已经在原文的基础上增加了新的功能, ...
- react实战项目_前端学习路线图--从网页设计到项目开发
前端学习路线是螺旋上升的,需要耗费的时间和精力不比其他编程的少,由于其稳健性的特点,使其成为大多数企业开发的刚需编程语言.在网上看到有很多的前端学习路线图,但大部分的前端学习路线图是很零碎的,没有系统 ...
- 2022年湖北省自然科学基金计划项目申请条件、要求和项目类型
湖北省自然科学基金(以下简称省基金)立足人才培养.学科建设和源头创新,主要支持科研人才.团队和基础研究平台围绕我省经济社会发展中的重大科学问题和关键核心技术突破,开展具有前瞻性.原创性.突破性的基础研 ...
- Android实现一键开启自由窗口、分屏、画中画模式——自由窗口模式
转载请注明出处:https://blog.csdn.net/sunmmer123 忙过一段时间后,新需求又来了"多个应用/页面间在不用退出或者切换的情况下,可同时操作" 咋一听是不 ...
- Android实现一键开启自由窗口、分屏、画中画模式——分屏模式
转载请注明出处:https://blog.csdn.net/sunmmer123 Android实现一键开启自由窗口.分屏.画中画模式系列 一键开启自由窗口模式 一键开启进入分屏模式 一键开启画中画模 ...
最新文章
- CentOS 7 更新软件源和系统
- OWIN and Katana
- 超级直播sop直播源.zip_双11首场虚拟直播,天猫超级直播开创直播新玩法
- java源码编译为字节码的流程
- 计算机基础——原码、反码、补码转换
- 一步步编写操作系统 67 系统调用的实现1-2 68
- 线程池写入mysql_用多线程写入数据库的问题(150分)
- python flask restful api_python之restful api(flask)获取数据
- redis学习-分布式数据库CAP原理
- 编程语言python怎么读-编程零基础应当如何开始学习 Python?
- C-Free 5.0最新注册码
- 短视频app源码开发,Java使用ffmpeg实现音视频分离
- 映美530k驱动不能安装问题
- 全国计算机二级C语言考试难不难?应该怎么备考?
- 第四讲 移动互联网接入技术
- 深入浅出 Kubernetes 架构
- 树莓派-11-3又1/2位数字万用表使用说明书
- R语言survival包的survfit函数拟合生存曲线数据、survminer包的ggsurvplot函数可视化生存曲线、size参数指定曲线粗细、palette参数自定义生存曲线的颜色
- 【漏洞学习——SSRF】腾讯某处SSRF漏洞(非常好的利用点)附利用脚本
- OpenCV_Viz——OpenCV中Viz的模块编译的无法解析的外部符号BUG
热门文章
- chrome浏览器开发者工具F12中某网站的sources下的源码如何批量保存?
- [转]让iframe自适应高度-真正解决
- 洛谷 P1969 积木大赛 —— 水题
- HDU 2012 素数判断方式
- [LeetCode]15. 3Sum
- 个人博客 V0.0.3 版本 ...
- hdu-2421 Deciphering Password 数学姿势
- 如何:添加缺少的 ContentPlaceHolder
- oracle分区表学习及应用
- “三行代码,确实需要耗上一整天!”