gulp自动刷新 监听改变自动刷新完整版

有时候web小项目用不到cli脚手架,自己撸一个监听文件改变自动刷新浏览器就非常适合.废话不多说,上搭建流程.

目标

• gulp运行项目成功后,自动打开浏览器且打开指定页面
• 监听项目下特定文件改变刷新浏览器

环境

• macos系统
• node.js
• npm
• gulp

关于node.js和npm的安装这里就不在赘述,网上的教程比较全.这里主要关注gulp

一 gulp的安装

1 全局安装

首先确保你已经正确安装了node.js环境.然后以全局的方式安装gulp:

npm install -g gulp

2 项目安装

全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：

npm install gulp

这里可加 -D也可不加,根据个人项目的需要而定

全部安装的gulp和本地项目安装的gulp版本必须要一致，否则启动项目的时候就会报错

这样就完成了gulp的安装。至于为什么在全局安装gulp后，还需要在项目中本地安装一次，有兴趣的可以看下stackoverflow上有人做出的回答：why-do-we-need-to-install-gulp-globally-and-locally、what-is-the-point-of-double-install-in-gulp。大体就是为了版本的灵活性，但如果没理解那也不必太去纠结这个问题，只需要知道通常我们是要这样做就行了。

二 gulp文件配置

所需要的插件

• gulp-connect
• gulp-watch
• process
• shelljs

npm i gulp-connect gulp-watch process shelljs -D

将上面的插件安装到项目中.就可以配置gulpfile.js文件了

新建gulpfile.js文件到项目根目录下

gulpfile.js内容如下

var gulp = require("gulp")
, connect = require("gulp-connect")
, watch = require("gulp-watch")
, process = require("process")
, sh = require("shelljs")

//使用gulp-connect开启一个服务器
gulp.task("connect", function (