码迷,mamicode.com
首页 > Web开发 > 详细

使用Gulp实现网页自动刷新:gulp-connect

时间:2017-09-07 16:12:44      阅读:348      评论:0      收藏:0      [点我收藏+]

标签:depend   when   strong   刷新   代码   end   oba   前端   on()   

入门指南

1. 全局安装 gulp:

npm install --global gulp

 

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

npm install --save-dev gulp

 

3. 在项目根目录下创建一个名为 gulpfile.js 的文件:

var gulp = require(‘gulp‘);

gulp.task(‘default‘, function() {
  // 将你的默认的任务代码放在这
});

 

4. 运行 gulp:

gulp

 

默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。

想要单独执行特定的任务(task),请输入 gulp <task> <othertask>

 

正题

 

作用

想想看,在进行前前端开发的时候,如果js或css或其他文件有任何改动,网页就会自动加载,不用自己手动去按Ctrl+R或者什么F5,是不是很爽。今天给大家推荐的,就是这样一个插件:gulp-connect,它不仅能够自动启动一个web服务器,还能实现上述的热加载的功能

安装

前提是你已经安装好nodejsgulpnpm,并对他们的使用有基本的了解。且项目下已经初始化好了gulpfile.jspackage.js文件了。
如果这些你都还不知道,那就去了解一下吧。
安装命令:

 
npm install --save-dev gulp-connect

 

使用

使用默认的参数创建一个服务器:

var gulp = require(‘gulp‘),
  connect = require(‘gulp-connect‘);
 
gulp.task(‘connect‘, function() {
  connect.server();
});
 
gulp.task(‘default‘, [‘connect‘]);

 

监控并自动刷新

监控根目录下的app目录下所有的html文件情况,如有变动,则自动刷新,如果需要监控less,sass,css,js等等,请自动依葫芦画瓢啦!

var gulp = require(‘gulp‘),
  connect = require(‘gulp-connect‘);
 
gulp.task(‘connect‘, function() {
  connect.server({
    root: ‘app‘,
    livereload: true
  });
});
 
gulp.task(‘html‘, function () {
  gulp.src(‘./app/*.html‘)
    .pipe(connect.reload());
});
 
gulp.task(‘watch‘, function () {
  gulp.watch([‘./app/*.html‘], [‘html‘]);
});
 
gulp.task(‘default‘, [‘connect‘, ‘watch‘]);

 

启动与关闭服务器

 
gulp.task(‘jenkins-tests‘, function() {
  connect.server({
    port: 8888
  });
  // run some headless tests with phantomjs 
  // when process exits: 
//balabala可以做好多事情
  connect.serverClose();
});

 

监视当前目录中所有html,css,js文件

var gulp = require(‘gulp‘),
connect = require(‘gulp-connect‘);

gulp.task(‘connect‘, function() {
    connect.server({
      root: ‘./‘,
      livereload: true
    });
  });
  gulp.task(‘html‘, function () {
    gulp.src(‘./*.html‘)
      .pipe(connect.reload());
  });

  gulp.task(‘css‘, function () {
    gulp.src(‘./*.css‘)
      .pipe(connect.reload());
  });
  gulp.task(‘js‘, function () {
    gulp.src(‘./*.js‘)
      .pipe(connect.reload());
  });
  gulp.task(‘watch‘, function () {
    gulp.watch([‘./*.html‘,‘./*.css‘,‘./*.js‘], [‘html‘,‘css‘,‘js‘]);
  });
gulp.task(‘default‘, [‘connect‘,‘watch‘]);

 

使用Gulp实现网页自动刷新:gulp-connect

标签:depend   when   strong   刷新   代码   end   oba   前端   on()   

原文地址:http://www.cnblogs.com/yang-C-J/p/7490090.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!