gulp构建项目（二）：启本地服务

版权声明：原创文章，引用请注明出处！ https://blog.csdn.net/guang_s/article/details/84666263

一、安装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"    // 设置代理
        });
    });

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

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

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

四、服务器地址说明

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

1、Local: http://localhost:3000（默认打开此服务器地址）

2、External: http://169.254.109.182:3000（可用手机访问）

注意：需要手机调试的时候可以访问这个地址，但手机和电脑要在同一网络

相关文章

gulp构建项目（一）：环境准备