server.gzipped.assets Recipe Not Picking Up .html Files about recipes

[shinnn]

This would work.

gulp.task('serve', function () {
  browserSync({
    server: "./_site",
    files: ['./_site/public/css/*.css', './_site/public/js/*.js', './_site/**/*.html{,.gz}'],
    middleware: require("connect-gzip-static")("./_site")
  });
});

[realph]

@shinnn I've used the above code, but Chrome is still picking up my 67KB file rather than my 28KB .gz file.

[shinnn]

@realph I thought "pick up my .html.gz files" means "BrowserSync watches my .html.gz files". What do you mean by "pick up"?

[realph]

@shinnn I want BrowserSync to serve my .html.gz files to Chrome, so Chrome renders the compressed html files.

[shinnn]

@realph OK, thanks. I have no experience in serving gzipped files with Browsersync, so I'd like to leave this issue to @shakyShane.

[realph]

@shinnn Thanks for your help. @shakyShane ...?

[shakyShane]

@realph the problem here is that the middleware is too late in the stack when added via the options for .html files as serve-static ends the request prematurely thinking that the index file doesn't exist.

The following will work perfectly though because override will put your middleware at the front of the stack.

gulp.task('serve', function () {
    browserSync({
        server: "./_site",
        files: ['./_site/public/css/*.css', './_site/public/js/*.js', './_site/*.html', './_site/**/*.html']
    }, function (err, bs) {
        bs.addMiddleware("*", require('connect-gzip-static')('./_site'), {
            override: true
        });
    });
});

[shakyShane]

Updated the recipe to reflect this

[realph]

Thanks for this @shakyShane! Works perfectly now.

[shakyShane]

[realph]

@shakyShane Sorry to nag. I've just realised that I don't know how to add back my BrowserSync reload. I'm calling BrowserSync's reload at the end of my tasks like so:

.pipe(reload({stream: true}))

Any idea what I've got to do to get it back?

[shakyShane]

Can you show us your gulpfile and explain what you expect to happen :)

[realph]

@shakyShane

My gulpfile.js looks like this:

    var gulp = require('gulp');

    var browserSync = require('browser-sync');
    var browserSyncCreate = browserSync.create();
    var middleware = require('connect-gzip-static')('./_site');
    var reload = browserSync.reload;

    // Start server
    gulp.task('serve', function () {
      browserSyncCreate.init({
        server: './_site',
        files: [
          './_site/**/*.html',
          './_site/public/css/*.css',
          './_site/public/js/*.js'
        ],
      }, function (err, bs) {
          bs.addMiddleware("*", middleware, {
            override: true
         });
      });
    });

    // Jekyll task
    gulp.task('jekyll', function() {
      return gulp.src('./index.html')
        .pipe(shell(['jekyll build']))
        .pipe(reload({stream: true}))
    });

    // Default task
    gulp.task('default', ['jekyll'], function() {
      gulp.watch(['./index.html', './*.md', '_includes/**/*.html', '_layouts/**/*.html', 'posts/*.html', '_posts/**/*'], ['jekyll']);
    });

When changes are made to the watch directory in the default task, I want to run my jekyll task, at the end of the jekyll task, you'll see I'm using .pipe(reload({stream: true})). I want BrowserSync to reload my browser when a change is detected.

Ever since I changed the server task to browserSyncCreate.init() the reloads haven't worked the same, I was previously using simply browserSync() for my my server task, and reloads worked.

Hope that explains it. Thanks!

[shakyShane]

You can use .stream() for that

var gulp = require('gulp');

var browserSync = require('browser-sync').create();
var middleware = require('connect-gzip-static')('./_site');

// Start server
gulp.task('serve', function () {
    browserSync.init({
        server: './_site',
        files: [
            './_site/**/*.html',
            './_site/public/css/*.css',
            './_site/public/js/*.js'
        ],
    }, function (err, bs) {
        bs.addMiddleware("*", middleware, {
            override: true
        });
    });
});

// Jekyll task
gulp.task('jekyll', function() {
    return gulp.src('./index.html')
        .pipe(shell(['jekyll build']))
        .pipe(browserSync.stream())
});

// Default task
gulp.task('default', ['jekyll'], function() {
    gulp.watch(['./index.html', './*.md', '_includes/**/*.html', '_layouts/**/*.html', 'posts/*.html', '_posts/**/*'], ['jekyll']);
});

[shakyShane]

or try this, (which i prefer, as is keeps Browsersync related stuff out of the jekyll task

var gulp = require('gulp');

var browserSync = require('browser-sync').create();
var middleware = require('connect-gzip-static')('./_site');

// Start server
gulp.task('serve', function () {
    browserSync.init({
        server: './_site',
        files: [
            './_site/**/*.html',
            './_site/public/css/*.css',
            './_site/public/js/*.js'
        ],
    }, function (err, bs) {
        bs.addMiddleware("*", middleware, {
            override: true
        });
    });
});

// Jekyll + reload
gulp.task('jekyll-reload', ['jekyll'], browserSync.reload);

// Jekyll task
gulp.task('jekyll', function() {
    return gulp.src('./index.html')
        .pipe(shell(['jekyll build']));
});

// Default task
gulp.task('default', ['jekyll'], function() {
    gulp.watch(['./index.html', './*.md', '_includes/**/*.html', '_layouts/**/*.html', 'posts/*.html', '_posts/**/*'], ['jekyll-reload']);
});

[shakyShane]

^ note that I call jekyll-reload in the watch task there

[realph]

@shakyShane I'll give these a try. Any reason why you like to keep BrowserSync away from main task and its own separate task? Do you also do this for Sass, JS tasks?

[shakyShane]

because, sometimes you only want to run gulp jekyll or a similar command without the whole watching/reloading setup. In this context, whilst it will still work, it doesn't make sense to pipe anything to Browsersync.

[realph]

@shakyShane I'm using your second example, but BrowserSync doesn't seem to be running the .reload meth. Manual reload works just fine.

[schiz]

@realph did you succeed? can you paste the code, how did you manage to do it? I use the same stack - and found out that only when using connect-gzip-static reload doesn't work. None of fixes listed above didn't work for me.

[johnpapa]

@shakyShane How would i serve gzip files when I am using the config file instead of gulp?

      middleware: [
        require('connect-gzip-static')('./dist'), {override: true }
      ]

does not seem to work like this ... obviously the array element needs to be one thing ..., usually it is the function. but in this case i am not sure how to pass the override

[shakyShane]

@johnpapa 2 solutions.

On recent versions of BS, (2.15 + I think), you can provide an array of objects/functions as middleware definitions and on any object you can specify the override prop

modules.exports = {
    server: './app',
    middleware: [
        {
            route: "", // empty 'route' will apply this to all paths
            handle: require('connect-gzip-static')('./app'), // the callable
            override: true
        }
    ]
};

As mentioned above, the override boolean will cause this middleware to be applied to the FRONT of the stack.

Alternatively, when using the configuration file, you can still get hold of the running instance through callbacks

const middleware = require('connect-gzip-static')('./app');

modules.exports = {
    server: './app',
    callbacks: {
        ready: function (err, bs) {
            // access bs methods as normal
            bs.addMiddleware("*", middleware, {
                override: true
            });

            // also have access to 'options' here which contains
            // info available only to a running instance, such as 'urls'
           console.log(bs.options.get('urls').toJS())
        }
    }
};

Hope that helps :)

[shakyShane]

@johnpapa assuming your files are already gzipped of course! to gzip on the fly look at 'compression' module