gulp构建项目（二）：browser-sync启本地服务并开启浏览器

一、安装browser-sync模块

npm i -D browser-sync

二、引入browser-sync模块，并初始化

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

gulp.task('browser', function(){
   browserSync.init({
       server: './dist'    // 访问目录
       // proxy: "你的域名或IP"    // 设置代理
   });
});

// 加入'browser'任务
gulp.task('default', ['clean'], function() {
   gulp.start(['html', 'js_libs', 'js_main','css_main','images', 'browser'])
});

三、执行gulp命令，完成后会自动打开浏览器

会发现报错：找不到图片。
原因是：执行browser任务时，images任务还没有执行完毕，所以找不到dist/images文件。
临时解决方案：重新刷新页面就可以了。
最终解决方案：是让说有的任务按照指定顺序执行，请参照下面文章

gulp构建项目（四）：run-sequence实现逐个执行任务

四、服务器地址说明

    [Browsersync] Access URLs:
 ----------------------------------------
       Local: http://localhost:3000
    External: http://169.254.109.182:3000

1、Local: http://localhost:3000

1） 默认打开此服务器地址
2） 默认端口号是3000，如果端口号被占用，则自动打开3001，依次类推

2、External: http://169.254.109.182:3000

1）此地址可用于手机访问我们的项目
2）需要手机调试的时候可以访问这个地址，但手机和电脑要在同一网络

.

项目地址（别忘了给星哦）

https://github.com/shiguang0116/gulp-project

相关文章

gulp构建项目（一）：环境准备及项目基础结构搭建
gulp构建项目（二）：browser-sync启本地服务并开启浏览器
gulp构建项目（三）：gulp-watch监听文件改变、新增、删除
gulp构建项目（四）：run-sequence实现逐个执行任务
gulp构建项目（五）：gulp-if条件判断及环境变量设置
gulp构建项目（六）：gulp-html-tpl处理公用模板
gulp构建项目（七）：gulp-uglify压缩js以及检查js语法错误
gulp构建项目（八）：gulp编译less，添加CSS前缀以及压缩css
gulp构建项目（九）：gulp-imagemin压缩图片及gulp-cache缓存
gulp构建项目（十）：gulp-rev-collector-dxb添加版本号（?hash）
gulp构建项目（十一）：gulp-htmlmin压缩html
gulp构建项目（十二）：gulp-babel编译es6
gulp构建项目（十三）：babel-polyfill编译es6新增api
gulp构建项目（十四）：gulp-rename重定义打包生成文件的路径
.
gulp构建项目（附录一）：gulp发生错误时，进程挂掉的问题