自动刷新前后端大前端初学者必经过程 gulp,browserSync,nodemon

本文链接：https://blog.youkuaiyun.com/weixin_47601311/article/details/112009737

gulp,browserSync,nodemon 自动刷新前后端html css js 初学者必经过程

一：前提

学习大前端必须经历的就是node.js敲码，可是一次又一次刷新，F5的重复按键是不是弄得有点虚脱了。nodemon很好安装，但是只能实现运行文件（app.js）的改变更新，如果改变其他.css和.html就无法办到了，所以必须搞个自动刷新的东东来配合我们的懒惰。

二：起步各个插件版本

1：gulp的安装

npm install -g gulp@3.9.1

进行全局安装gulp，这里一定用4以下的版本，4以上gulp api用法变了，不用就会出现AssertionError [ERR_ASSERTION]: Task function must be specified。

npm install --save-dev gulp@3.9.1

在node.js所要运行项目的主目录下进行开发的gulp安装，以上先要建立npm init -y，创建package.json。

我的版本：

G:\webtest\nodeTest\nodeTest>gulp -v
[14:31:36] CLI version 3.9.1
[14:31:36] Local version 3.9.1

2： browserSync

npm install -g browser-sync

这个也进行全局安装，配置一次，本台电脑其他项目都可使用。这个安装使用可以官网查看一下，也比较简单。browserSync官网。

我的版本：

G:\webtest\nodeTest\nodeTest>browser-sync --version
2.26.13

-3：gulp-nodemon

npm install --save-dev gulp-nodemon

没什么说的，这个插件是node的主运行文件发生变化就进行更新如（app.js），还要安装主程序nodemon。

我的版本

G:\webtest\nodeTest\nodeTest>nodemon --version
2.0.6

以上一定要主要版本！！！

三：添加gulp脚本

在项目文件根目录里创建gulpfile.js文件，将下面代码存放到文件里，gulp@3 版本的代码，gulp@4 后期如有更新，进行更新。

// 添加引用
var gulp=require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');
 
//这个可以让express启动
gulp.task("node", function() {
    nodemon({
        script: 'app.js',
        ext: 'js html',
        env: {
            'NODE_ENV': 'development'
        }
    })
});
 
gulp.task('server', ["node"], function() {
    var files = [
        'views/**/*.html',
        'views/**/*.ejs',
        'views/**/*.jade',
        'public/**/*.*'
    ];
 
    //gulp.run(["node"]);
    browserSync.init(files, {
        proxy: 'http://localhost:3000',
        browser: 'chrome',
        notify: false,
        port: 4001 //这个是browserSync对http://localhost:3000实现的代理端口
    });
 
    gulp.watch(files).on("change", reload);
});

以上代码从nodejs自动刷新如何实现的？文章复制的，只是更改了主入口位置，自己可根据自己需求更改。注意以上files下配置需要监控的文件目录。

四：运行

以上全部配置完毕，在项目所在目录下运行：

gulp server

然后你的项目就可以.html,.css,.js 保存就刷新。

G:\webtest\nodeTest\nodeTest>gulp server
[14:53:54] Using gulpfile G:\webtest\nodeTest\nodeTest\gulpfile.js
[14:53:54] Starting 'node'...
[14:53:54] Finished 'node' after 423 ms
[14:53:55] Starting 'server'...
[14:53:55] Finished 'server' after 431 ms
[14:53:55] [nodemon] 2.0.6
[14:53:55] [nodemon] to restart at any time, enter `rs`
[14:53:55] [nodemon] watching path(s): *.*
[14:53:55] [nodemon] watching extensions: js,html
[14:53:55] [nodemon] starting `node app.js`
app listening on port 3000!
[Browsersync] Proxying: http://localhost:3000
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:4001
    External: http://192.168.0.106:4001
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Watching files...

结束~

gulp4.0以上的 gulpfile.js 内容

晚上没事把gulp在b站上看了个快速入门，大概知道了它的用法和结构，可惜看的还是4.0以下的API，自己又看了官网的新的API，拿旧的 gulpfile.js 胡乱改了一通，竟然把功能实现，但总感觉有很多漏洞，先记录下，如果有合适好的代码请留下你的脚步，让我好好学习下。下面就是gulp 4.0的gulpfile.js 文件内容：

// 添加引用
const { series, watch } = require('gulp');//引用gulp

let browserSync = require('browser-sync');//引用browser-sync 主要是刷新浏览器用

let nodemon = require('gulp-nodemon');//引用gulp-nodemon 主要是对node.js重启
 
 function node(cb) {//定义nodemon的参数
     nodemon({
         script: 'app.js',//nodemon app.js 入口参数
         ext: 'js html', //暂时不知道
         env: {'NODE_ENV': 'development'}//暂时不知道
     })
	 cb();//调用一下这个函数
 }
 
 function server() {
	let files = [//监控文件目录，需要监控哪个文件，自己更改
		'controllers/**/*.*',
		'models/**/*.*',
		'public/**/*.*',
		'routers/**/*.*',
		'views/**/*.*'
		];
		
    browserSync.init(files, {
        proxy: 'http://localhost:3000',
        browser: 'chrome',
        notify: false,
        port: 4001 //这个是browserSync对http://localhost:3000实现的代理端口
    });
	
    watch(files)//监控文件的监控函数，我也不知道怎么写，但这样可以执行，以后在来解决
}

exports.server = series(node,server);//把执行流暴露给cmd，可通过gulp server执行