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 () {
  connect.server({
    host: '0.0.0.0',
    port: '8868',
    root: './',
    livereload: true //自动刷新
  })
})

//自动刷新
gulp.task("html", function () {
  gulp.src(["./*.html", "./*/*.html"]).pipe(connect.reload())
})

//监听文件
gulp.task("watch", function () {
  watch(['**', '!node_modules/**'], function () {
    gulp.start('html')
  })
})

//自动打开浏览器
gulp.task("openweb", function () {
  var platform = process.platform;
  var shellStr1 = "open -a '/Applications/Google Chrome.app' 'http://192.168.2.199:8868'";
  var shellStr2 = "start http://192.168.2.199:8868";
  // 打开浏览器方法：
  var openFunc = function (str, flag) {
    // 执行并对异常处理
    if (sh.exec(str).code !== 0) {
      sh.echo(flag + '下打开浏览器失败,建议您安装chrome并设为默认浏览器!');
      sh.exit(1);
    }
  };
  if (platform === 'darwin') {
    openFunc(shellStr1, 'Mac');
  } else if (platform === 'win32' || platform === 'win64') {
    openFunc(shellStr2, 'Windows');
  } else {
    sh.echo('现在只支持Mac和windows系统!如果未打开页面，请确认安装chrome并设为默认浏览器!');
  }
})

//开启任务
gulp.task("server", ["connect", "watch"], function () {
  //前两个服务开启后 再打开浏览器
  gulp.start("openweb")
})

然后在运行gulp server就可以启动项目了

三 注意点

gulp-connect

//使用gulp-connect开启一个服务器
gulp.task("connect", function () {
  connect.server({
    host: '0.0.0.0',
    port: '8868',
    root: './',
    livereload: true //自动刷新
  })
})

其中host端口号在gulp-cennect版本大于5.0的时候 需要填写0.0.0.0 才能用ip地址访问。
小于5.0的时候可不填写，就能用ip访问

gulp-watch

//监听文件
gulp.task("watch", function () {
  watch(['*', '*/*', '!node_modules'], function () {
    gulp.start('html')
  })
})

因为gulp自带的watch无法监听gulp运行后新建的文件，而gulp-watch可以监听新建的文件。
便使用gulp-watch 替代gulp自带的watch。
其中

watch(['*', '*/*', '!node_modules']

表示监听项目下所有文件，但不包括node_modules文件夹下的文件

demo使用插件版本

"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-connect": "^5.7.0",
    "gulp-watch": "^5.0.1",
    "process": "^0.11.10",
    "shelljs": "^0.8.3"
  }

四 效果

完结撒花