zoukankan      html  css  js  c++  java
  • gulp

      Gulp plugin to run a webserver (with LiveReload)

    Install

    npm can help us to install the plugin.

    PS C:studygulp> npm install --save-dev gulp-connect
    gulp-connect@2.2.0 node_modulesgulp-connect
    ├── connect-livereload@0.3.2
    ├── event-stream@3.1.7 (duplexer@0.1.1, from@0.1.3, stream-combiner@0.0.4, pause-stream@0.0.11, map-stream@0.1.0, split@0.2.10, through@2.3.8)
    ├── tiny-lr@0.0.7 (debug@0.8.1, qs@0.5.6, faye-websocket@0.4.4, noptify@0.0.3)
    ├── gulp-util@2.2.20 (lodash._reinterpolate@2.4.1, minimist@0.2.0, vinyl@0.2.3, through2@0.5.1, chalk@0.5.1, multipipe@0.1.2, dateformat@1.0.11, lodash.template@2.4.1)
    └── connect@2.17.3 (parseurl@1.0.1, response-time@1.0.0, cookie@0.1.2, cookie-signature@1.0.3, fresh@0.2.2, debug@0.8.1, connect-timeout@1.1.0, vhost@1.0.0, qs@0.6.6, bytes@1.0.0, basic-auth-connect@1.0.0, on-headers@0.0.0, serve-favicon@2.0.0, errorhandler@1.0.1, morgan@1.1.1, cookie-parser@1.1.0, pause@0.0.1, type-is@1.2.0, method-override@1.0.2, compression@1.0.2, body-parser@1.2.2, express-session@1.2.1, csurf@1.2.0, serve-index@1.0.3, serve-static@1.1.0, multiparty@2.
    2.0)

    you can saw the connect-livereload already contained.

     Usage

    we get a connect object, it help us to serve static web server. default, the web server root is the location of gulpfile.js.

    create a js file, named to gulpfile.js, it is the specification name for gulp.

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

    open browser that your favorited, locate to http://localhost:8080/ 

    default, it support ditionary browser, so you should saw the dictionary.

    LiveReload

    you should use watch feature with livereload, so you will create watch task for it.

    in watch task, when file changed, watch task trigger specification task, in below, it is html task.

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

    in html task, we reload  target files.

    Start and stop server

    connect.server start the web server, connect.serverClose to close a web server.

    gulp.task('jenkins-tests', function() {
      connect.server({
        port: 8888
      });
      // run some headless tests with phantomjs 
      // when process exits: 
      connect.serverClose();
    });
    var gulp = require('gulp'),
      stylus = require('gulp-stylus'),
      connect = require('gulp-connect');
     
    gulp.task('connectDev', function () {
      connect.server({
        root: ['app', 'tmp'],
        port: 8000,
        livereload: true
      });
    });
     
    gulp.task('connectDist', function () {
      connect.server({
        root: 'dist',
        port: 8001,
        livereload: true
      });
    });
     
    gulp.task('html', function () {
      gulp.src('./app/*.html')
        .pipe(connect.reload());
    });
     
    gulp.task('stylus', function () {
      gulp.src('./app/stylus/*.styl')
        .pipe(stylus())
        .pipe(gulp.dest('./app/css'))
        .pipe(connect.reload());
    });
     
    gulp.task('watch', function () {
      gulp.watch(['./app/*.html'], ['html']);
      gulp.watch(['./app/stylus/*.styl'], ['stylus']);
    });
     
    gulp.task('default', ['connectDist', 'connectDev', 'watch']);

    API

    Type: Array or String Default: Directory with gulpfile

    The root path

    Type: Number Default: 8080

    The connect webserver port

    Type: String Default: localhost

    Type: Boolean Default: false

    Type: Object or Boolean Default: false

    Type: Number Default: 35729

    Type: String Default: undefined

    Fallback file (e.g. index.html)

    Type: Function Default: []

    gulp.task('connect', function() {
      connect.server({
        root: "app",
        middleware: function(connect, opt) {
          return [
            // ... 
          ]
        }
      });
    });

    Contributors

    AveVlad and schickling

  • 相关阅读:
    Python操作Excel
    JMeter生成UUID方式
    JMeter之Beanshell用法
    JMeter后置处理器
    JMeter后置处理器
    Python之正则匹配 re库
    read(),readline() 和 readlines() 比较
    Python的位置参数、默认参数、关键字参数、可变参数之间的区别
    调查管理系统 -(6)自定义Struts2的拦截器&自定义UserAware接口&Action中模型赋值问题&Hibernate懒加载问题
    调查管理系统 -(5)Struts2配置&用户注册/登录/校验
  • 原文地址:https://www.cnblogs.com/haogj/p/4864364.html
Copyright © 2011-2022 走看看