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

  • 相关阅读:
    Linux合并iso
    Oracle中使用escape关键字实现like匹配特殊字符,以及&字符的转义
    hash算法-time33算法
    理解JMS规范中消息的传输模式和消息持久化
    Oracle启动
    Weblogic缓存
    shell
    Hibernate 延迟载入
    Android获取cpu使用率,剩余内存和硬盘容量
    TestNG的组測试和组中组測试
  • 原文地址:https://www.cnblogs.com/haogj/p/4864364.html
Copyright © 2011-2022 走看看