Gulp Livereload based on Nodejs is perfectly integrated with VisualStudio.

This article Copyright GUI Blog Park and the author Wu Di Common All, reproduced and crawler please specify the original address http://www.cnblogs.com/tdws/p/6016055.html

Write in front everyone good I am the Snail of Blog Park, the Snail of Blog Park is me. Learn this article, you do not need any Nodejs foundation, of course, you have the words more smoothly. There are many full stacks or front-end databases in the garden that require you to glow and heat. Maybe you like doing this kind of thing, maybe you don't like it but it's hard to escape the arrangement. However, whether you are a front end, a backend, or a full stack, good tools and methods are always important. When you write a front-end page in VS, the refresh of the browser over and over again brings you more than just the hassle, it's a waste of time. Sharing today will help you solve this problem--gulp Livereload and VisualStudio, based on Nodejs, are perfectly integrated. Hope this article, can bring to the hard-working people need to work a little bit convenient. Straight into the theme Gulp pronunciation "Galp", based on Nodejs, so this environment is necessary, if you do not install, then go to the official website or Baidu download the installation package and follow the tutorial installed on the good. I go straight to the point: Be patient, ten steps to complete 1. Global Installation Gulp:NPM Install--global Gulp 　　 2. As a project development-dependent (devdependencies) Installation:npm Install gulp gulp-livereload--save-devcommand to install LIVERELOAD3. Use the command to view the NPM packages you have installednpm list-g-depth 0, if you see the following two items, congratulations on your installation success.　　4. Next, create your MVC project in VS and write a demo yourself. 5. OK, now a new MVC project has been created, and I have added TestController, and there is a view of index. And now in view, there is nothing and no reference to the HTML frame. All you have to do is add one of our configuration files in the views directory as follows:

varGulp = require (' Gulp '));varLivereload = require (' Gulp-livereload '),//Web page refresh automatically (server Control client synchronization refresh)webserver = require (' Gulp-webserver ');//Local server//Registering TasksGulp.task (' webserver ',function() {GULP.SRC (‘./‘)//Server directory (./representing root directory). Pipe (webserver ({//Run Gulp-webserverLivereload:true,//Enable LivereloadOpentrue //automatically open Web page when server starts    }));});//Monitoring TasksGulp.task (' Watch ',function() {Gulp.watch ('./**/**/*.cshtml ',function(file) {//the site root directorylivereload.changed (File.path); Console.log ("SSS"); });}); Gulp.task (' Default ', [' webserver ', ' watch ']);

Well, now the configuration is complete in your vs. 　　6. Google Browser needs to install a plug-in, which is the address, not installed on the words, self-fq, you can try the blue light. Https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei If your browser has such a flag after installation, 　　　　Congratulations on your successful installation. So with these preparations, how do you use it, take a look at the following steps: 7. Right-click the view, in the File Explorer, to learn about your folder directory and copy it out. Don't ask me why I use 2012 because of the company's project. My directory is: D:\MyConfiguration\ws35040\Documents\visual Studio 2012\projects\gulpdemo\gulpdemo\views 8. Switch to your directory using the CD command in CMD,
9. Then execute the Gulp command after 10. Okay, now that you've started listening, run your project, open it to your page, and click the circle below to make it solid. Every time you save, the browser will automatically refresh for you. You can take care of the results.

Written in the last

Now if you configure the success, my drip share to you a bit of help, welcome to click below the red attention, I will continue to share. If the configuration fails, please leave a message, I will help you solve

Gulp Livereload based on Nodejs is perfectly integrated with VisualStudio.