学习过程宝宝心里苦,不能怨政府.. 兴趣所致,一直放不下nodejs的学习,时隔多日,又把express捡起来打算重新再学学,一直没什么太大的长进,和实际的项目经验.真的醉了,太懒了. 今天在重新研究supervisor的时候,突然觉得这东西只有在服务端文件修改时才会触发刷新,前端样式文件模板等等刷新时不会, 能实现前端修改也自动刷新不?想想平时自己用gulp 搭虚拟服务器,用browser自动刷新,于是打算试试. gulp+browserSync 算是原来就有的,现在应该把目标分几步来实现,…

Browsersync能让浏览器实时.快速响应你的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试.你的任何一次代码保存,以上的设备都会同时显示你的改动”. Browsersync可以单独使用,也可以集成到gulp和grunt这样的构建工具中使用,在node.js项目中还能结合gulp-nodemon实现全栈的自动刷新,而在移动端设备上同步调试的功能对移动web开发显然是很有帮助的. 相关网站查看…

摘要 Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试.您可以想象一下:"假设您的桌子上有pc.ipad.iphone.android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动".无论您是前端还是后端工程师,使用它将提高您30%的工作效率. 安装环境 Wind…

添加nodemon模块 cnpm install --save nodemon 根目录添加文件 nodemon.json { "restartable": "rs", "ignore": [ ".git", ".svn", "node_modules/**/node_modules" ], "verbose": true, "execMap": {…

搬运自[简书:http://www.jianshu.com/p/2f923c8782c8]亲测可用哦! 最近在使用express框架及mongodb,由于前端和后端代码修改后都需要实现自动刷新功能,刚开始我后端使用的是nodemon进行代码修改后自动刷新,后来涉及到前端,自然而然我想到使用browser-sync进行刷新,按照官网给出的代理模式进行操作,虽然能够进行代理,但是还是不能后实时刷新前端代码,后来搜索找到这篇文章 gulp+browserSync+nodemon 实现express 全…

gulp是基于流的自动化构建工具官方网址:http://www.gulpjs.com.cn/ 一.安装需要的模块 1.新建package.json,输入下面的内容 { "name": "autopractice", "version": "1.0.0", "description": "", "main": "index.js", "sc…

本文版权桂博客园和作者吴双共同所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/p/6016055.html 写在前面 大家好我是博客园的蜗牛,博客园的蜗牛就是我.学习这篇文章,你不需要任何nodejs基础,当然你有的话就更顺利了.园子里有很多全栈或者是前端后台数据库都有需要你发光发热的人.也许你很喜欢做着这样的事儿,也许你不喜欢但是难以逃脱这样的安排.但是,无论你是前端,还是后端,还是全栈,好的工具和方法总是很重要的.当你在VS里写前端页面时,一遍又一遍的…

入门指南 1. 全局安装 gulp: npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: npm install --save-dev gulp 3. 在项目根目录下创建一个名为 gulpfile.js 的文件: var gulp = require('gulp'); gulp.task('default', function() { // 将你的默认的任务代码放在这 }); 4. 运行 gulp: gulp 默认的名为 defa…

很久没弄gulp了,都快忘了,今天又来温习下browser-sync 自动刷新插件,在安装的时候出现以下提示: $ npm install browser-sync --save-dev> ws@0.5.0 install /usr/local/lib/node_modules/browser-sync/node_modules/socket.io/node_modules/engine.io/node_modules/ws > (node-gyp rebuild 2> builderr…

BrowserSync “Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试.您可以想象一下:“假设您的桌子上有pc.ipad.iphone.android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动”.无论您是前端还是后端工程师,使用它将提高您30%的工作效率.” 简单的…

前段时间使用了gulp+browser-sync才发现这个东西真的很好用. 准备工作:(1).安装nodejs.gulp是基于nodejs使用的,所以先安装nodejs,https://nodejs.org/en/download/在这里直接下载安装就好. (2).新建一个项目目录,比如我在E盘中新建一个文件夹:gulpbrowsersync  .在其中新建一些文件夹或者文件比如style文件夹.js文件夹.images文件夹以及index.html, 开始工作: 1.进入项目目录E:\gulp…

1.全局安装 nodemon npm i nodemon -g -f 2. 在项目中安装nodemon npm i nodemon -f 3.使用nodemon 在express项目中 运行nodemon nodemon bin/www 这个时候就可以实现自动更新了…

本篇主要是以 http://www.imooc.com/article/14759 为参考来写的: 已经整理到github上:https://github.com/Macaulish/gulp-BrowserSync-nodemon 1,使用 Browsersync 来进行浏览器同步测试 参考: http://www.browsersync.cn/#install1)安装NodeJs,2)安装BrowserSync (npm install -g browser-sync)3)安装好之后,在控制…

基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境 Express 是比较经典的,也是最常用的 Nodejs Web框架. 一.Express 快速构建一个web应用程序或架 1.首先用全局安装 express-generator! npm install express-generator -g 2.生成项目 express express-gulp 3.执行 运行项目之前,先安装依赖包.在项目根目录下运行: npm install 安装完成之后,启动服务器:…

gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/35595198 为什么选择gulp,因为使用非常简单,学习成本低.以后想用别的工具再转去学也不难. 一个自动化构建工具都没用过的前端,何以谈人生? 以下是正题: 1.要玩gulp,首先得安装node,因为npm跟随node的包安装管理工具.具体下载直接百度nodejs中文网,根据自身的环境(wind…

gulp自动刷新的插件很多,但是感觉最好用的还是 browser-sync 插件.如果不想用命令行,也可以使用 browser-sync界面工具 先安装 browser-sync 插件: npm install browser-sync --save-dev 安装 browser-sync 插件可能遇到的问题 http://www.cnblogs.com/ayseeing/p/4201202.html browser-sync API gulpfile.js文件代码如下: // 先引入依赖模块…

---恢复内容开始--- 请想象这样一个场面:你开着两个显示器,一边是IDE里的代码,另一边是浏览器里的你正在开发的应用.此时桌上还放着你的手机,手机里也是这个开发中的应用.然后,你新写了一小段代码,按下了ctrl+s保存.紧接着,你的手机和另一个显示器里的应用,就变成了更新后的效果.你可以马上检查效果是否和你预想的一致,甚至都不需要动一下鼠标... 想起来还不错?嗯,这只是简单地省略掉那个开发过程中会按好多遍的F5刷新. 自动刷新 “自动刷新”并不是新的概念,但对关注“可见”的预览效果的前端开…

一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作. 易于学习 通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道. 二.依赖安装 1.安装node.js, 2.全局安装gulp npm install gulp -g 3.本地安装gulp npm init…

参考自:http://www.sheyilin.com/2016/02/gulp_introduce/ 在原先基础上增加了less编译 es6转码资源地图等,修改了一部分的热刷新. gulpfile.js文件 /*! * gulp * $ npm install gulp gulp-ruby-sass gulp-cached gulp-uglify gulp-rename gulp-concat gulp-notify gulp-filter gulp-jshint gulp-rev-appen…

[安装] 1 npm install -g browser-sync [静态项目使用browsersync] 自己可以去browsersync官网查看,其实使用很简单,总结下就是: 1 browser-sync start --server --files "**/*.css, **/*.html, **/*.js" cd到项目下,然后执行上面的方法即可, 简单的说就是会监听该目录下的html,css,js变化,然后自动刷新页面 [动态项目使用browsersync] 动态项目的意思,…

起因:需要搭建一个自动打包处理 sass / js (es6),自动监听文件变化时浏览器自动刷新的开发环境 项目目录 project build -css -js *.html src -html -sass -js 先放 gulpfile.js 文件,其他的详细配置稍后再介绍 const { src, dest, parallel,series, watch } = require('gulp'); const sass = require('gulp-sass'); const less =…

一.安装node nodejs下载地址:https://nodejs.org/ nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功 由于npm安装module太慢,建议使用淘宝镜像:npm install cnpm -g --registry=https://registry.npm.taobao.org 安装完成,查看cnpm -v 二.安装gulp 1,gulp安装分为全局安装和局部安装 首先进行全局安装:npm insta…

http://itakeo.com/blog/2016/05/19/gulpreload/?none=123 使用gulp插件来自动刷新页面.再也不用修改一次,按一下F5了. 首选通过npm install gulp安装gulp. 在安装npm install gulp-connect.自动刷新,主要是通过这个插件来完成的. 最后配置gulpfile.js,内容如下: var gulp = require('gulp'), connect = require('gulp-connect'); /…

一.前言 node从v0.10.26升级(为了匹配autoprefixer)到v5.3.0后出现了gulp插件兼容问题,在nodejs下各种新的插件出现问题,需要重新配置.livereload实现chrome自动刷新需要安装插件,偶尔被墙不是很方便.用webserver搭配livereload,可以实现本地(不需要apache服务器)服务器式文件自动刷新预览,所见即所得,so酷~!配合sublime text3 (大量的最新插件已经开始以3为基准)简直是神器 二.下载 现在很多插件描写的博文都是…

首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包. 先说一下gulp安装流程: 1:全局安装gulp,操作为: npm install gulp -g;2:在根目录下创建 package.json文件,操作为:npm init,之后根据操作输入“名字,版本号,描述”等内容,直接按回车则使用默认值,最后根据提示输入YES即可:输完后根目录下多了个package.json文件:3:本地安装gulp,先进入你的项目所在,如d盘下的…

搬运自[http://blog.csdn.net/zhu_free/article/details/51476525] gulp-express实现实时刷新 本来使用gulp-connect可以创建本地服务器,配合Livereload就可以实现实时刷新,但express项目自带了服务器,就不太好办了,之前用了gulp-express,实现了一部分,感觉很方便,但是只有jade模板变化会实时刷新,样式表和js文件则不会,之前的部分代如下: gulp.task('server', ['styles'…

使用gulp自动化构建项目是前端学习的重要部分,gulp依赖于node.js.首选电脑要配置node和npm. 查看node版本号 node --version 查看npm 版本 npm --version 一.安装gulp 1.全局安装gulp npm install gulp –g 我的项目结构如下图 2.在根文件夹下使用 npm init 一直回车直到OK?输入yes回车 会出现一个文件package.json(这里示例根文件夹为gulp-app) 3.配置项目的gulp环境,在根目录打开…

Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面. 更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试 1 安装 已经按照cnpm库的可以使用命令行来按照 cnpm install -g browser-sync --save-dev 启动 BrowserSync 一个基本用途是,如果您只希望在对某个css文件进行修改后会同步到浏览器里. 那么您只需要运行命令行工具,进入到该项目(目录)下,并运行相…

Browsersync 是一个很好用的工具,它可以实时监测文件的变动然后自动刷新浏览器,不用每次去点刷新或F5,特别在调试样式时非常有用. browsersync中文网  http://www.browsersync.cn/ 安装 首先安装node.js(直接下载后安装就行,http://nodejs.cn/download/) > 打开命令行(win+r 然后输入cmd打开命令行)> npm install -g browser-sync (通过npm安装browsersync,如果下载慢的…

摘要 Browsersync能让浏览器实时.快速响应您的文件更改(HTML.JavaScript.CSS.Sass.Less.PHP.Python等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试.您可以想象一下:"假设您的桌子上有pc.ipad.iphone.android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动".无论您是前端还是后端工程师,使用它将提高您…