作者:____L振豪 | 来源:互联网 | 2023-06-29 16:52
曾几何时,一直梦想能够有超酷的前端开发环境,加快工作进度,减轻工作强度,看了这张图有些震撼了,慢慢研究他们是怎么玩的。。。varprojectrootabsdirhomevagra
曾几何时,一直梦想能够有超酷的前端开发环境,加快工作进度,减轻工作强度,看了这张图有些震撼了,慢慢研究他们是怎么玩的。。。
var projectrootabsdir = '/home/vagrant/Code/kidsit/';
gulp.task('less',function(){
var pagelessentry = config.pagelessentry;
log(pagelessentry);
return gulp
.src(pagelessentry)
.pipe(plumber())
.pipe(expect({ checkRealFile: true },pagelessentry))
.pipe(printfileinfo())
// .pipe(sourcemaps.init())
.pipe(less())
// .pipe(rename('bootstrap.css'))
// .on('error',errorhandler)
// .pipe(sourcemaps.write())
.pipe(gulp.dest(projectrootdir+'public/build/css/'));
});
function startBrowserSync () {
if(browserSync.active){
return;
}
log('starting browser-sync ...');
var optiOns={
proxy: 'kidsit.cn',
files: [projectrootabsdir+'public/build/css/**/*.css'], //projectrootdir+'public
ghostMode: {
clicks: true,
location: false,
forms: true,
scroll: true
},
injectChanges: true,
logFileChanges: true,
logLevel: 'debug',
logPrefix: 'kidist-browser-sync',
notify: true,
reloadDelay: 0
};
browserSync(options);
}
gulp.task('watchless',function(){//entry task to be launched
log(config.lessfiles);
gulp.watch('../Code/kidsit/resources/assets/less/**/*.less', ['less'])
.on('change',function (event) {
// var srcPattern = new RegExp('/.*(?=/')
log(event.type);
});
startBrowserSync();
});
注意:browsersync的file watch功能只对绝对地址的文件有效,不能使用relative path的格式,否则files section无效!
如何使用browsersync proxy laravel的前端开发?
当你在使用laravel或者其他的后端框架开发时,前端页面往往由后端生成传给浏览器,并不是静态的html,这时如何快速设计前端的页面?这时最好就要使用browser-sync的proxy功能了:
browser-sync start --proxy="homestead.localhost" --files="resources\views\viewdirectory"
上面的例子就将proxy local dev 环境,并且watch 对应的view目录,一旦view目录中的文件变更,browsersync都将reload,提高开发的效率
总结几种工作模式:
1. http://192.168.1.x 模式访问(可以在局域网内任何机器访问web服务器)+ webpack dev host:8080/xxx.js 可以通过HMR即改即看前端效果, 如果enable vConsole则可以在mobile上产看js的log,查看dom结构
该模式下,注意apache必须使用require all granted, 否则只能本地访问,其他机器访问被拒绝!!
2. http://ngrok.dnsname模式访问本地web服务器 + webpack dev host:8080/xxx.js 既可以调试后端internet回调,又可以通过本地HMR即改即看前端效果, 如果enable vConsole则可以在mobile上产看js的log,查看dom结构
以上两种模式无法调试移动端的css,但是也可以利用webpack快速改,看效果
3. ghostlab起一个服务器,模拟任何页面,serve来自任何设备的访问(可以包含webpack dev host:8080/xxx.js),这个的好处是可以调测任何移动端的css,并且能够多部设备同时测试,甚至支持任何填表单,COOKIE等有状态的调试功能