金沙澳门官网登录-www.js8.com-金沙澳门官网下载app

浏览器自动刷新——基于Nodejs的Gulp LiveReload与V

本文版权桂博客园和作者吴双共同所有,转载和爬虫请注明原文地址

写在前面

大家好我是博客园的蜗牛,博客园的蜗牛就是我。学习这篇文章,你不需要任何nodejs基础,当然你有的话就更顺利了。园子里有很多全栈或者是前端后台数据库都有需要你发光发热的人。也许你很喜欢做着这样的事儿,也许你不喜欢但是难以逃脱这样的安排。但是,无论你是前端,还是后端,还是全栈,好的工具和方法总是很重要的。当你在VS里写前端页面时,一遍又一遍的刷新浏览器给你带来的不仅仅是烦恼,长此以往更是时间的浪费。今天分享的就能完全帮助你解决这样的问题——基于nodejs的Gulp LiveReload与VisualStudio完美结合。希望本篇文章,能带给辛苦需要进行前端工作的人一点方便。

 

浏览器自动刷新——基于Nodejs的Gulp LiveReload与VisualStudio完美结合。。直入主题

gulp读音【galp】,基于nodejs,所以这个环境是必要的,如果你没安装,那就去官网或者百度下载安装包并按照教程安装上就好了。我直接进入正题:耐心点,十步完成

1.全局安装 gulp:

浏览器自动刷新——基于Nodejs的Gulp LiveReload与VisualStudio完美结合。。  npm install --global gulp

2.作为项目的开发依赖(devDependencies)安装:

浏览器自动刷新——基于Nodejs的Gulp LiveReload与VisualStudio完美结合。。  npm install gulp gulp-livereload --save-dev 命令来安装livereload

3.使用命令来查看你已经安装的npm包

   npm list -g -depth 0,如果你看到下面两项,恭喜你安装成功。

图片 1

浏览器自动刷新——基于Nodejs的Gulp LiveReload与VisualStudio完美结合。。   图片 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.谷歌浏览器需要安装一个插件,这是地址 ,安装不上的话,自行FQ,可以试下蓝灯。   

  如果安装后 你的浏览器多了这样一个标志,恭喜你成功安装了。

图片 9

   图片 10

  那么有了如下这些准备,你如何来使用它,就要看下面的步骤:

7.右键Views,在文件资源管理器,来了解你的文件夹目录,并将它复制出来。不要问我为什么用2012,因为公司的项目。我的目录是:

  D:MyConfigurationws35040Documentsvisual studio 2012ProjectsGulpDemoGulpDemoViews

  图片 11

图片 12

8.在cmd中使用cd命令切换到你的目录吧,

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

图片 14

   图片 15

10.好了 现在已经开始监听了 , 运行你的项目吧,打开到你的页面,点击下面的圆圈,使其变为实心。

  图片 16

 

图片 17

每次当你保存的时候,浏览器会自动为你刷新啦。你可以对照看下结果

图片 18

 

写在最后

现在如果你配置成功了,我的点滴分享对你有点滴帮助,欢迎点击下方红色关注,我将持续分享。如果配置失败了,欢迎留言,我将帮你解决

 

本文由金沙澳门官网登录发布于金沙澳门官网登录,转载请注明出处:浏览器自动刷新——基于Nodejs的Gulp LiveReload与V

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。