gulp自动化构建项目（二）——自动化

第一次接触自动化构建我的表情是这样的

我们继续在跟目录下创建src / html，dist /html文件夹，,在src/ html下面创建index.html文件，现在的结构应该是这样的：

myweb
    |----- dist
          |-----html
    |----- node_modules
    |-----src
          |-----html
                |-----index.html

现在在index.html文件中写入<h1>hello world</h1>。

实现自动拷贝

接下来编写gulpfile.js文件，这是实现自动化的关键,目的是把src/ html下面的index.html文件拷贝到dist / html。

//引入gulp模块
var gulp = require('gulp');
//创建任务，任务名为copy
gulp.task('copy',function(){
    //读取文件
    gulp.src('src/html/index.html')
    //写入文件
    .pipe(gulp.dest('dist/html'));
});

编写完成后，在控制台用gulp copy执行copy任务

执行命令

然后查看dist --> html下面已经存在index.html文件。

创建http服务

下一个任务是创建一个http服务，通过http服务访问dist / html下面的idnex.html。这就需要引入browsersync插件。先用npm安装，

npm install browser-sync --save-dev

安装完成后在gulpfile.js中增加以下代码块：

//引入browser-sync模块并创建一个bs对象
var bs = require('browser-sync').create();
//创建server服务,名为start
gulp.task('start',function(){
    bs.init({
        server:'./dist/html/'
    });
});

完成后在控制台调用此任务

调用http服务

打开浏览器访问localhost:3000（也可能浏览器会自动打开），出现Hello World，按ctrl+c关闭服务，任务完成。

多窗口同步

接下来是一个有趣的事，如果上面编写的index.html足够长，在同时打开多个浏览器窗口浏览的情况下，所有窗口竟然会同步滚动！如果此时有手机和这台电脑处于同一个局域网络的话，手机访问控制台中External提供的URL打开的窗口会和PC上的保持同步！如下图所示效果

多窗口同步展示

实现监听

现在的任务是实现只要src中的源文件index.html有所改动，程序会自动拷贝到dist-->html下面（即执行上面编写的copy任务），并且浏览器自动刷新，实现实时浏览”这里用到了监听事件，继续编写start任务：

//引入browser-sync模块并创建一个bs对象
var bs = require('browser-sync').create();
//创建server服务,名为start
gulp.task('start',function(){
    bs.init({
        server:'./dist/html/'
    });
    gulp.watch('src/html/index.html',['copy']);
    gulp.watch(['src/html/index.html']).on('change',bs.reload);
});

编写完成后在控制台执行start任务，开启http服务。打开多个窗口，发现能实现同步滚动，现在不要关闭浏览器窗口，打开src/html/index.html，修改页面内容，发现多个浏览器窗口实时刷新，展示修改后的结果。

修改实时同步预览

到此，初步的自动化已经实现了，此处实时刷新的效率与电脑配置有关。