您的位置:金沙手机版下载 > 澳门官网 > LiveReload与VisualStudio完美结合

LiveReload与VisualStudio完美结合

2019-10-10 16:48

正文版权桂今日头条和作者张宇彤共同持有,转发和爬虫请注解最早的文章地址

写在前边

大家好小编是新浪的蜗牛,今日头条的蜗牛正是自家。学习那篇小说,你无需别的nodejs基础,当然你某个话就更顺畅了。园子里有不菲全栈或然是前面一个后台数据库都有亟待您发光发热的人。恐怕你很爱怜做着这么的事务,或然你不希罕但是难以逃脱那样的配备。然则,无论你是前面贰个,依然后端,照旧全栈,好的工具和办法总是很入眼的。当你在VS里写前端页面时,一回又壹次的基础代谢浏览器给您带来的不但是压抑,日久天长更是时间的荒芜。明天享受的就能够完全援救您化解那样的标题——基于nodejs的Gulp LiveReload与VisualStudio完美组合。希望本篇小说,能带给劳苦要求开展前端职业的人有个别方便。

 

直入核心

gulp读音【galp】,基于nodejs,所以那一个景况是必需的,即便您没安装,那就去官方网站恐怕百度下载安装包并依据教程安装上就好了。小编直接进去正题:耐心点,十步完成

1.全局装置 gulp:

  npm install --global gulp

2.作为项目标开垦信任(devDependencies)安装:

  npm install gulp gulp-livereload --save-dev 命令来安装livereload

3.利用命令来查阅你已经安装的npm包

   npm list -g -depth 0,要是您看见上面两项,恭喜您安装成功。

图片 1

   图片 2

图片 3

图片 4

图片 5

图片 6

4.接下来到VS中开创你的MVC项目,本人动手写个demo。

  图片 7

图片 8

5.好了,今后贰个新的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 (file) {  //该站点根目录
        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

图片 12

8.在cmd中运用cd命令切换成您的目录吧,

  图片 13
9.然后实行gulp命令后

图片 14

   图片 15

10.好了 未来曾经上马监听了 , 运转你的项目吧,展开到您的页面,点击下边包车型大巴圈子,使其改为实心。

  图片 16

 

图片 17

历次当你保存的时候,浏览器会自动为你刷新啦。你可以相比较看下结果

图片 18

 

写在终极

今昔只要您安插成功了,小编的有限分享对您有一些滴援救,迎接点击下方水晶绿关心,小编将不仅仅分享。借使布署战败了,款待留言,笔者将帮您化解

 

本文由金沙手机版下载发布于澳门官网,转载请注明出处:LiveReload与VisualStudio完美结合

关键词: