我目前正在使用gulp将我的内容提供给浏览器。我开始使用gulp-gzip将它们压缩到更小的文件大小。我不确定以下事项： 1.如何使用gulp向浏览器提供Gzip服务？ 2.我是否需要更改HTML中的脚本标记以扩展.gz？
目前，我创建了 gzip gulp任务，它压缩文件并将它们放在 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']);
这会将页面速度提高2/3倍。
答案 0 :(得分：1)
您想要添加模块https://www.npmjs.com/package/connect-gzip-static
取自自述文件：
用于连接的中间件：提供压缩文件（如果存在），则会丢弃 如果没有，或者如果浏览器没有发送，则通过connect-static 'Accept-Encoding'标题。
如果你的构建过程已经存在，你应该使用connect-gzip-static 创建gzip压缩文件。如果你想在飞行中使用gzip你的数据 内置连接压缩中间件。如果你想gzip你的 动态文件你可能想查找连接gzip。
将它添加到您的连接中间件，一切都应该按照您的意愿运行！