跟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里面抄来的~
跟angular2学一键开启项目--关于上个react-redux项目的一键调试的更多相关文章
- Immutable.js 以及在 react+redux 项目中的实践
来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...
- react+redux项目搭建及示例
React + Redux示例,实现商品增删改 目录结构 1.项目搭建 1.1 使用create-react-app react_redux创建项目 1.2 安装使用redux需要的依赖 npm in ...
- React+Redux开发实战项目【美团App】,没你想的那么难
README.md 前言 开始学习React的时候,在网上找了一些文章,读了官网的一些文档,后来觉得React上手还是蛮简单的, 然后就在网上找了一个React实战的练手项目,个人学完之后觉得这个项目 ...
- React 实践项目 (三)
React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! 上回说到使用Redux进行 ...
- React 实践项目 (五)
React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! React 实践项目 (一 ...
- 一键开启MacOS HiDPI
完整文件下载:一键开启MacOS HiDPI 引言 作为一个黑苹果用户,追求黑果的体验是当然的,当各个硬件都驱动完善后,要做的就是细节的优化了,毕竟装上是拿来用的,可不能因为体验差苦了自己啊.机器毕竟 ...
- 如何:使用 Visual Studio 中的一键式发布来部署 Web 应用程序项目
原文: 如何:使用 Visual Studio 中的一键式发布来部署 Web 应用程序项目 本主题介绍如何在以下产品中使用 一键式发布 发布(部署)Web 应用程序项目: Visual Studio ...
- 如何线上部署node.js项目
来源:http://blog.csdn.net/chenlinIT/article/details/73343793 前言 最近工作不是很忙,在空闲时间学习用node+express搭建自己的个人博客 ...
- 电脑知识,一键开启Win10“超级性能模式”
现在主流系统以及从WIN7慢慢的转移到了WIN10,微软也为WIN10做了很多优化跟更新.今天要跟大家说的这个功能很多人肯定没有听说过.那就是WIN10的超级性能模式. 1. 大多数Win10是没有滴 ...
随机推荐
- react-redux异步数据操作
import React, { Component } from 'react'; import './App.css'; import {connect} from 'react-redux'; i ...
- 123. 单词搜索(DFS)
描述 给出一个二维的字母板和一个单词,寻找字母板网格中是否存在这个单词. 单词可以由按顺序的相邻单元的字母组成,其中相邻单元指的是水平或者垂直方向相邻.每个单元中的字母最多只能使用一次. 样例 给出 ...
- 【译】Six Open Source Dashboards to Organize Your Data
作者:Ben Gregory on Jun 29, 2016 译者:carsonzhu 在天文学家看来,我们相信每个组织都可以从数据的正确集中,组织和清理中受益. 我们正在建立一个公司来做到这一点 ...
- YAML配置:mapping values are not allowed here
在配置Eureka服务器配置文件的时候,出现了mapping values not allowed here的错误,原因是的冒号 ”:“后面没有空格. 原因分析:yml文件中,键值对是以": ...
- Codeforces 1154C Gourmet Cat
题目链接:http://codeforces.com/problemset/problem/1154/C 题目大意: 主人有一只猫.周一&周四&周日:吃鱼周二&周六:吃兔子周三 ...
- python爬虫之git的使用(origin说明)
1.首先我们回忆两个命令 #git remote add origin 远程仓库链接 #git push -u origin master 我们一起看看这个命令,git是git的一级命令,push就是 ...
- Protocol buffers--python 实践(二) protocol buffers vs json
为什么专门开一个坑,来使用pb.放弃本在各平台上都支持得很好的json而使用pb的一个归根到底的理由,就是希望在保证强类型和跨平台的情况下,能够更轻,更快,更简单.既然是奔着这个目标去的,到底多快我需 ...
- html5 表單屬性
新的 form 属性: autocomplete novalidate 新的 input 属性: autocomplete autofocus form form overrides (formact ...
- 二、kubernetes
一.kubernetes(简称k8s) 集群示意图 Kubernetes工作模式server-client,Kubenetes Master提供集中化管理Minions.部署1台Kubernetes ...
- 数据库语法group by
因为在做pgsql和mysql数据库时group by 有报错,但是在以前做mysql5.6的时候没有问题,虽然知道时违反了sql的语法问题,但是没有搞清楚什么原因,也找了不少资料,查找原因,在盆友的 ...