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文件管理指令
    二叉树的创建与遍历(递归)
    小工具
    排序
    Project Euler Problem (1~10)
    福大软工 · 最终作业
    福大软工 · 第十二次作业
    Beta冲刺 7
    Beta冲刺 6
  • 原文地址:https://www.cnblogs.com/haogj/p/4864364.html
Copyright © 2011-2022 走看看