为了账号安全,请及时绑定邮箱和手机立即绑定

gulp自动化构建项目(二)——自动化

标签:
前端工具

webp

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

我们继续在跟目录下创建src / htmldist /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');//创建任务,任务名为copygulp.task('copy',function(){    //读取文件
    gulp.src('src/html/index.html')    //写入文件
    .pipe(gulp.dest('dist/html'));
});

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

webp

执行命令

然后查看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服务,名为startgulp.task('start',function(){
    bs.init({        server:'./dist/html/'
    });
});

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

webp

调用http服务

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

多窗口同步

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

webp

多窗口同步展示

实现监听

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

//引入browser-sync模块并创建一个bs对象var bs = require('browser-sync').create();//创建server服务,名为startgulp.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,修改页面内容,发现多个浏览器窗口实时刷新,展示修改后的结果。

webp

修改实时同步预览

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



作者:墨鸿
链接:https://www.jianshu.com/p/9ccaed01737b


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消