利用gulp,browserSync,nodemon搭建自动刷新的开发环境-原创手记-慕课网

一，前言。

一开始学习web编程时，在改了某个html或是css或是js文件之后如果想要看效果，我们通常会手动刷新浏览器。之后学了后端编程更是麻烦，还得在命令行中输入node app.js 然后再刷新浏览器才能看到效果。这对于开发来说效率非常低。

同时在web编程中，往往我们并没有直接写html，css，js文件，而是写一些需要编译的，但语义更好或是更加简洁的jade，scss，ls文件。这就需要我们编写一些代码对这些文件进行编译。gulp工具就能够充当这样的角色。

然而gulp的功能远多于此，这得得益于许多程序员造的gulp包。而其中就包括了能够帮助web开发人员在开发过程中自动启动服务端的gulp-nodemon包以及自动刷新浏览器的browser-sync包。

二，编写gulp文件。

使用gulp的时候，最重要的是在主目录之下编写gulpfile文件。因为我们在命令行中输入的每一条gulp命令，都必须要在gulpfile中有定义才能够顺利执行。一个gulpfile文件的例子如下：

'user strict'

var gulp = require('gulp'),
    wrench = require('wrench'),
    clean = require('gulp-clean');

wrench.readdirSyncRecursive('./gulp').filter(function(file){
    return (/\.js/).test(file);
}).map(function(file){
    require('./gulp/' + file);
});

gulp.task('clean', function(){
    return gulp.src('./tmp')
    .pipe(clean());
});

以上代码主要是实现将主目录的gulp目录中的js文件引入到gulpfile文件中。其中的包 wrench 现在已经不被维护了，但是包中的方法readdirSyncRecursive 方法仍可用。这个方法是用来读取 ./gulp目录下的下的 js 文件。这样在 ./gulp 目录下 js 文件中定义的gulp方法就能被引入到gulpfile文件之中，进而能在命令行中被调用。

此外该gulpfile中还定义了一个 clean 方法，用于将指定目录下的文件删除掉。

接着再看一下 ./gulp 的目录结构：

其中的 build.js , scripts.js, styles.js 分别是用来编译jade， livescript, scss 文件的。而 inject.js 则是用来将需要的css ，js 文件加载进 html 相应的地方。具体的插入方法可以看gulp-inject 包的介绍。gulp-inject

三，用于自启动服务器的gulp-nodemon包。

npm包 gulp-nodemon 和npm包 nodemon 的功能差不多一样，只是支持了与gulp的结合。根据npm包nodemon 官网的介绍，nodemon 的作用类似于 node。我们通常在命令行中输入 node app.js 就能启动某个本地的服务器（app.js 是某个文件名，名字由程序员决定）。如果我们输入 nodemon app.js同样也能启动。不同的是，nodemon能够检测 app.js 所在目录下的文件，如果有改变，就会自动重新启动 app.js。而gulp-nodemon 包的使用也类似的，代码如下：

'use strict'

var gulp = require('gulp');
var nodemon = require('gulp-nodemon');

gulp.task('nodemon', ['inject'], function(cb) {
  var started = false;

  return nodemon({
    script: 'app.js'
  }).on('start', function() {
    if (!started) {
      cb();
      started = true;
    }
  });
});

传给 nodemon 的参数 script: 'app.js 指明将要本地服务器的入口。之后和 app.js 同一个目录下的文件一有改变，本地服务器就会被重启。

nodemon 包与 gulp-nodemon 包官网资料分别是：nodemon，gulp-nodemon
。

四，用于自动刷新浏览器的browser-sync包。

npm包browser-sync 能够在本地服务器启动完成时自动帮我们打开浏览器，并且在相应的 jade，livescript，scss 文件改变时自动刷新浏览器。server.js 具体的代码如下：

use strict'

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('serve', ['nodemon'], function(){
    browserSync.init({
    proxy: 'http://localhost:3000',
    browser: 'chrome',
    port: 7000
  });

    gulp.watch('public/**/*.+(scss|jade|ls)', ['inject'])
    .on('change', browserSync.reload);
});

这里要注意的是proxy的端口号要和服务器端的端口号要一致。
代码最后的gulp.watch 就是用来监测我们编写的jade，livescript，scss 文件，如果有任何的改变，就执行inject 任务，即先对包括有改变的文件的所有文件进行编译在进行css 以及JavaScript 的注入。

npm包browser-sync 的官网是：browser-sync。

附上搭建好的一个简单环境：github地址。

参考资料：基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境。