>

LiveReload与VisualStudio完美结合

- 编辑:金沙国际平台登录 -

LiveReload与VisualStudio完美结合

本文版权桂新浪和小编刘毛毛共同持有,转发和爬虫请注脚原著地址

写在前头我们好自家是腾讯网的蜗牛,新浪的蜗牛正是自己。学习这篇作品,你无需任何nodejs基础,当然你有个别话就更顺畅了。园子里有相当多全栈只怕是后面一个后台数据库都有亟待你发光发热的人。大概你很欣赏做着那样的事情,可能你恶感但是难以回避那样的配备。不过,无论你是前面二个,还是后端,还是全栈,好的工具和方法总是很关键的。当您在VS里写前端页面时,三次又三次的基础代谢浏览器给你带来的不光是沉闷,日久天长更是时间的浪费。后天享受的就能够完全帮忙您解决那样的难点——基于nodejs的Gulp LiveReload与VisualStudio完美结合。希望本篇小说,能带给劳顿要求开展前端工作的人或多或少便于。直入核心gulp读音,基于nodejs,所以这些条件是必不可缺的,如若您没设置,那就去官方网站也许百度下载安装包并依照教程安装上就好了。笔者平昔进去正题:耐心点,十步达成1.全局安装 gulp:  npm install --global gulp2.当做项目标支出重视(devDependencies)安装:  npm install gulp gulp-livereload --save-dev 命令来安装livereload3.用到命令来查阅你已经设置的npm包   npm list -g -depth 0,借使您看到上边两项,恭喜你安装成功。图片 1  图片 2图片 3图片 4图片 5图片 64.接下来到VS中成立你的MVC项目,本人动手写个demo。  图片 7图片 85.好了,未来二个新的MVC项目早已创办完毕,并且作者加多了TestController,况兼有一个Index的View.何况今后View中除了html框架,什么也从没,也没有须求引用什么。你独一要做的就是在Views目录中增加四个大家的布署文件内容如下:

var gulp = require('gulp');var livereload = require('gulp-livereload'), // 网页自动刷新(服务器控制客户端同步刷新)    webserver = require('gulp-webserver'); // 本地服务器// 注册任务gulp.task('webserver', function () {    gulp.src('./') // 服务器目录    .pipe(webserver({ // 运行gulp-webserver        livereload: true, // 启用LiveReload        open: true // 服务器启动时自动打开网页    }));});// 监听任务gulp.task('watch', function () {    gulp.watch('./**/**/*.cshtml', function  {  //该站点根目录        livereload.changed(file.path);        console.log("sss");    });});gulp.task('default', ['webserver', 'watch']);

  很好,现在在您的VS中布署完毕。6.Google浏览器须求安装三个插件,这是地点,安装不上的话,自行FQ,能够试下蓝灯。     若是设置后 你的浏览器多了那样一个申明,恭喜你成功安装了。图片 9  图片 10  那么有了如下那些盘算,你如何来行使它,将在看下边包车型大巴手续:7.右键Views,在文件能源管理器,来打听你的文书夹目录,并将它复制出来。不要问我何以用二〇一二,因为集团的种类。小编的目录是:  D:MyConfigurationws35040Documentsvisual studio 2012ProjectsGulpDemoGulpDemoViews  图片 11图片 128.在cmd中利用cd命令切换成您的目录吧,  图片 13
9.然后实施gulp命令后图片 14  图片 1510.好了 未来已经开头监听了 , 运维你的门类吧,打开到你的页面,点击下边的圆形,使其形成实心。  图片 16图片 17历次当您保存的时候,浏览器会自行为你刷新啦。你能够对照管下结果

图片 18

写在最终

今昔若是您安插成功了,作者的星星分享对你有一点点滴帮助,招待点击下方青莲关心,小编将四处分享。若是安顿战败了,接待留言,笔者将帮你消除

本文由编程发布,转载请注明来源:LiveReload与VisualStudio完美结合