瀏覽器自動刷新——基於Nodejs的Gulp LiveReload與VisualStudio完美結合。

本文轉載自查看原文 2016-10-31 15:33 1696 Node.js/ 前端技能

本文版權桂博客園和作者吳雙共同所有，轉載和爬蟲請注明原文地址 http://www.cnblogs.com/tdws/p/6016055.html

寫在前面

大家好我是博客園的蝸牛，博客園的蝸牛就是我。學習這篇文章，你不需要任何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，如果你看到下面兩項，恭喜你安裝成功。

4.接下來到VS中創建你的MVC項目，自己動手寫個demo。

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']);