Gulp 网页上的GZIP文件

我目前正在使用gulp将我的内容提供给浏览器。我开始使用gulpgzip将它们压缩到更小的文件大小。我不确定以下几点： 1.如何使用gulp向浏览器提供Gzip？ 2.我是否需要更改HTML中的脚本标记以具有.gz的扩展名

目前，我已经创建了gzipgulp任务，它压缩文件并将它们放入tmp文件夹中。我想提供tmp文件夹或当前文件夹，该文件夹在下面的gulp文件中提供

'use strict';

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    gulpUtil = require('gulp-util'),
    jshint = require('gulp-jshint'),
    karma = require('gulp-karma'),
    preprocess = require('gulp-preprocess'),
    connect = require('gulp-connect'),
    rimraf = require('gulp-rimraf'),
    hl = require('highland'),
    rjs = require('requirejs'),
    resourcePipeline = require('connect-resource-pipeline'),
    modrewrite = require('connect-modrewrite'),
    jscs = require('gulp-jscs'),
    argv = require('yargs').argv,
    lintspaces = require('gulp-lintspaces'),
    rename = require('gulp-rename'),
    replace = require('gulp-replace'),
    stubServer = require('gulp-develop-server'),
    buildTime = require('moment')(),
    gzip = require('gulp-gzip');

function getVersionNumber() {
    return /SNAPSHOT/.test(argv.ver) ? argv.ver + buildTime.format('[-]YYYYMMDD[-]HHmmss') : argv.ver;
}

gulp.task('connect', function () {
    var extRes = !!argv.EXT_RES,
        startProxy = !argv.NO_PROXY_SERVER;
    connect.server({
        root: 'app',
        livereload: {
            port: 123456
        },
        port: 1337,
        middleware: function (connect) {
            return [
                connect().use(modrewrite(['^/?(\\?(.*))?$ /index.html?$2',
                    '^/abt-inv-web/secure/invView/(.*)$ /$1']))
                    .use(resourcePipeline({root: 'app'}, [
                        {
                            url: '/index.html',
                            factories: [preprocess.bind(null, {context: {DEV: true, EXT_RES: extRes}})]
                        },
                        {
                            url: '/',
                            factories: [preprocess.bind(null, {context: {DEV: true, EXT_RES: extRes}})]
                        },
                        {
                            url: '/scripts/main.js',
                            factories: [preprocess.bind(null, {context: {DEV: true, EXT_RES: extRes}})]
                        }
                    ]))
            ];
        }
    });

    // stub server
    if(startProxy) {
        stubServer.listen( { path: 'node_modules/abt-common-proxyserver/stub-server/stub-server.js' } );
    }
});

gulp.task('clean-js', function () {
    return gulp.src(['dist/scripts/*'])
        .pipe(rimraf());
});

gulp.task('check-formatting-js', function () {
    return gulp.src(['app/scripts/**/*.js', 'test/**/*.spec.js'])
        .pipe(jscs());
});

gulp.task('js-hint', function () {
    return gulp.src(['app/scripts/**/*.js', 'test/**/*.spec.js', 'Gulpfile.js'])
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'))
        .pipe(jshint.reporter('fail'));
});

gulp.task('test-js', ['js-hint'], function () {
    return gulp.src('./no-file')
        .pipe(karma({
            configFile: argv.DEBUG ? 'build-config/karma.conf.debug.js' : 'build-config/karma.conf.js',
            action: argv.DEBUG ? 'watch' : 'run'
        }));
});

gulp.task('test-watch', function () {
    watch(['app/scripts/**/*.js', 'test/**/*.spec.js'], function () {
        karma({
            configFile: 'build-config/karma.conf.debug.js',
            action: 'run'
        });
    });
});

gulp.task('gzip', function () {
    return gulp.src(['app/scripts/**/*.js', 'app/scripts/**/*.html'])
        .pipe(gzip())
        .pipe(gulp.dest('app/tmp'));
});

gulp.task('build-js', ['clean-js', 'check-formatting-js', 'gzip', 'js-hint', 'test-js'], function (done) {
// gulp.task('build-js', ['clean-js'], function (done) {

    /*  Getting some sass from gulp-requirejs so wrapping
     *  it ourselves using highland stream library
     */

    /* Initial call to gulp.src gets a list of modules we
     * need to explicitly require otherwise the optimizer will miss them
     */

    var plugins = ['plugins/router',
        'plugins/dialog'];

    function build(explicitModules) {
        var versionNumber = getVersionNumber();
        return hl(function (push, next) {
            function callback(text) {
                push(null, new gulpUtil.File({
                    path: 'main.js',
                    contents: new Buffer(text)
                }));
                push(null, hl.nil);
                next();
            }

            //optimize to one file using rjs optimizer
            var rjsConfig = {
                mainConfigFile: 'app/scripts/main.js',
                name: 'main',
                baseUrl: 'app/scripts',
                include: explicitModules,
                out: callback,
                optimize: 'none',
                paths: {
                    'globals-json': 'empty:',
                    'permissions-json': 'empty:',
                    'appConfig-json': 'empty:'
                }
            };
            rjs.optimize(rjsConfig);
        })
            .pipe(preprocess({context: {DEV: false}}))
            .pipe(rename(function (path) {
                if (path.extname) {
                    path.basename += '-v' + versionNumber;
                }
            }))
            .pipe(replace(/(define\('main)(')/, '$1-v' + versionNumber + '$2'))
            .pipe(gulp.dest('dist/scripts/'))
            .pipe(connect.reload())
            .on('end', done);
    }

    return gulp.src('app/scripts/**/*.html')
        .pipe(hl())
        .map(function (file) {
            return 'text!' + file.relative;
        })
        .concat(gulp.src('app/scripts/viewmodules/**/*.js')
            .pipe(hl())
            .map(function (file) {
                return 'viewmodules/' + file.relative.match(/(.*)\.js/)[1];
            })
    )
        .toArray(function (viewsAndViewmodels) {
            build(viewsAndViewmodels.concat(plugins));
        });


});

gulp.task('clean-html', function () {
    return gulp.src(['dist/WEB-INF/views/secure/*'])
        .pipe(rimraf());
});

gulp.task('build-html', ['clean-html'], function () {
    return gulp.src('app/index.html')
        .pipe(preprocess({context: {DEV: false, LOCAL: false, VERSION: getVersionNumber()}}))
        .pipe(gulp.dest('dist/WEB-INF/views/secure/'));
});

gulp.task('clean-vendor', function () {
    return gulp.src(['dist/vendor/*'])
        .pipe(rimraf());
});

gulp.task('lint-html', function() {
    return gulp.src(['app/index.html', 'app/scripts/**/*.html'])
        .pipe(lintspaces({
                    editorconfig: '.editorconfig'
                }))
        .pipe(lintspaces.reporter())
        .on('error', function () {
            process.exit(1);
        });
});

gulp.task('lint-html-report', function() {
    return gulp.src(['app/index.html', 'app/scripts/**/*.html'])
        .pipe(lintspaces({
                    editorconfig: '.editorconfig'
                }))
        .pipe(lintspaces.reporter());
});

gulp.task('copy-styles', ['clean-vendor'], function () {
    return gulp.src(['app/bower_components/abt-inv-view-style/dist/**', 'app/favicon.ico'])
        .pipe(rename(function (path) {
            if (path.extname === '.css') {
                path.basename += '-v' + getVersionNumber();
            }
        }))
        .pipe(gulp.dest('dist/vendor/'));
});

gulp.task('copy-js', ['clean-vendor'], function () {
    return gulp.src(['app/bower_components/requirejs/require.js',
        'app/bower_components/modernizer/modernizr.js',
        'app/bower_components/abt-common-web-logging/dist/logging-lib.js'])
        .pipe(rename(function (path) {
            if (path.extname) {
                path.basename += '-v' + getVersionNumber();
            }
        }))
        .pipe(gulp.dest('dist/vendor/js/'));
});

gulp.task('watch', function () {
    gulp.watch(['app/index.html', 'app/scripts/**/*.html'], ['lint-html-report']);
    gulp.watch('app/**/*.html', function () {
        connect.reload();
    });
    gulp.watch(['app/scripts/**/*.js', 'test/**/*.js'], ['build-js']);
});

gulp.task('copy-assets', ['copy-styles', 'copy-js']);

gulp.task('build', ['copy-assets', 'build-js', 'lint-html', 'build-html']);

gulp.task('default', ['build-js', 'build-html']);

gulp.task('serve', ['build', 'connect', 'watch']);

gulp.task('serve-no-watch', ['build', 'connect']);

---

这将使页面速度优化三分之二。

是否要添加模块

摘自自述：

用于连接的中间件：提供压缩文件（如果存在的话） 如果他们没有，或者如果浏览器没有发送 “接受编码”标题

如果构建过程已经完成，那么应该使用connect gzip static 创建gzip文件。如果您想动态地gzip数据，请使用 内置的连接压缩中间件。如果你想把你的 动态文件您可能需要查找connect gzip

---

将它添加到您的连接中间件中，一切都应该按照您的意愿工作

您使用的是什么服务器？我是通过gulp提供服务的。所以应该通过gulp connect.server@AllanKimmerJensenThanks Allan提供服务，我已经为此定义了一个中间件。我不知道如何使用gzipStatic调用。嗨@Allan，我用完全相同的gz结构替换了我目录中的所有内容。浏览器显示找不到*.js文件，但文件夹结构中存在*.js.gz文件。您可以发布当前配置吗？我只启用了gulp服务