在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):K15t/gulp-viewport开源软件地址(OpenSource Url):https://github.com/K15t/gulp-viewport开源编程语言(OpenSource Language):JavaScript 99.4%开源软件介绍(OpenSource Introduction):gulp-viewportDeprecation NoticeThe gulp-viewport plugin will be deprecated for its new alternative viewport-uploader. The new plugin uses webpack for bundling which allows to use ES6 style javascript in your custom theme. gulp-viewport won't receive any more updates in the future.
The Gulp plugin for Scroll Viewport theme development uploads theme resources directly into Scroll Viewport. This is useful, when developing a Scroll Viewport theme in a local IDE. In this case, Gulp can watch the resources, and automatically upload the build results into Scroll Viewport. Quick Start (Recommended)The fastest way to get started with Gulp viewport is to use the Viewport Developer tools (available https://github.com/K15t/viewport-tools) and start with a template project:
Manual SetupCreate ~/.viewportrcCreate a config file [DEV]
confluenceBaseUrl=http://localhost:1990/confluence
username=admin
password=admin Each section in the file is represents a Confluence server, also called target system. In the example above there is one target system called DEV. NOTE: If any entry contains a semicolon, make sure to escape it like this For advanced usage, please refer to the instructions below. Create a theme project with a Gulpfile.js
Advanced UsageBelow is the full list of configuration options: var viewportTheme = new ViewportTheme({
// name of the theme to upload to
themeName: 'your-theme-name',
// If you want to use space admin permissions instead of global, set the space key here
scope: ,
// For home-config users of .viewportrc - defines which config to use for target
env: 'DEV',
// If you want to set up your target via the gulpfile instead of a .viewportrc, use this.
// Notice that you should NOT check in your credentials with git!
// omit env, if you are using target.
target: {
// https://your-installation.com/confluence/
confluenceBaseUrl: 'http://localhost:1990/confluence',
// A user that is eligible to update viewport themes in the given space
username: 'admin',
password: 'admin',
},
// If the source is placed in a subfolder (dist/theme/...) use this path
sourceBase: '',
// If the source has to be placed somewhere else than /
targetPath: '',
}); Creating themes in a space (with space-admin-only permissions)If you want to create a viewport theme in a specific scope (space), just set the scope on the theme as follows: var viewportTheme = new ViewportTheme({
themeName: 'your-theme',
env: 'DEV', // taken from the ~/.viewportrc
scope: 'TEST' // space key
});
gulp.task('create', function() {
if(!viewportTheme.exists()) {
viewportTheme.create(); // will create a theme in the space with key 'test' (space admin permissions required!)
} else {
console.log('Theme with name \'' + THEME_NAME + '\' already exists.');
}
}); Targeting different environmentsYou may be deploying the theme to different environments (such as development or testing). To do so, you can configure different
environments in This is how you can configure different target environments: [DEV]
confluenceBaseUrl=http://localhost:1990/confluence
username=admin
password=admin
[TEST]
confluenceBaseUrl=http://confluence-test.example.com
username=admin
password=admin In the example above there are two target systems called DEV and TEST. Then you can use the Gulp Viewport plugin in your gulp file along with a command line parameter: var ViewportTheme = require('gulp-viewport');
var minimist = require('minimist');
var knownOptions = {
string: 'env',
default: { env: process.env.VPRT_ENV || 'DEV' }
};
var options = minimist(process.argv.slice(2), knownOptions);
var viewportTheme = new ViewportTheme({
themeName: 'theme-name',
env: options.env
}); Then you can pass the parameter on the gulp command line to specify the target system, or omit it to fallback to an environment variable or the default value:
Note: It is even possible to specify a themeName and scope for the environment, if you may want to upload the theme with different scopes (global or specific spaces) and/or names:
sourceBase & targetPathThese two settings are special, as they give you control over where the source comes from, and where it belongs to. Example with single file
We want to preprocess gulp.task('less', function () {
return gulp.src('src/less/main.less')
.pipe(gulpSourcemaps.init())
.pipe(gulpLess())
.pipe(minifyCss())
.pipe(gulp.dest('build/css'))
.pipe(viewportTheme.upload(
{
sourceBase: 'build/css/main.css',
targetPath: 'css/main.css'
}
))
}); In this case, we change paths, so we have to set a new sourceBase. If we just want different folders, but keep the extension and filename, you will use it like this: Example with multiple files
Templates are in gulp.task('less', function () {
return gulp.src('src/main_theme/templates/**/*.vm')
.pipe(viewportTheme.upload(
{
sourceBase: 'src/main_theme/templates',
}
))
}); This rebases the path for all uploaded files to So with these two options, you can remove or extend the path. Upload all files in a pipelineThe gulp-viewport plugin provides a special destination, that uploads a files in the pipeline to a target (that has been defined in the gulp.task('templates', function () {
return gulp.src('assets/**/*.vm')
.pipe(viewportTheme.upload()); // upload to viewport theme
});
Upload preprocessed filesEspecially CSS and JS files usually need some batching, minification and other pre-processing. Here is how to do it. gulp.task('less', function () {
return gulp.src('assets/less/main.less')
.pipe(gulpSourcemaps.init())
.pipe(gulpLess())
.pipe(minifyCss())
.pipe(viewportTheme.upload({
targetPath: 'css/main.css' // target destination of batched file
}));
}); Set-up BrowserSyncFor development gulp-watch and BrowserSync is super handy. To set up gulp-watch and BrowserSync: // Dependencies
var browserSync = require('browser-sync').create();
// [...]
var ViewportTheme = require('gulp-viewport');
var viewportTheme = new ViewportTheme({
themeName: 'theme-name',
// The target system needs to match with a section in .viewportrc
env: 'DEV',
sourceBase: 'assets'
});
gulp.task('watch', function () {
// init browser sync.
browserSync.init({
open: false,
// the target needs to define a viewportUrl
proxy: 'http://localhost:1990/confluence',
});
// Override the UPLOAD_OPTS to enable auto reload.
viewportTheme.on('uploaded', browserSync.reload);
gulp.watch('assets/less/**.less', ['less']);
gulp.watch('assets/**/*.vm', ['templates']);
// ... create more watches for other file types here
}); Delete all files from themegulp.task('reset-theme', function () {
viewportTheme.removeAllResources();
}); Example gulpfile.jsCheckout example/gulpfile.js for a full example gulpfile. To use the example, you need to install the following dependencies:
Using gulp without a .viewportrc for a CI serverFor tools like Bitbucket pipelines, where you can't rely on a file
Same with the config for the gulpfile: you can omit
Checkout example/gulpfile.js for a full example gulpfile. This example assumes theme source is found in a src/ subdirectory. To start from an existing theme, download the theme jar and unpack into src/, e.g.: cd example
mkdir src/
unzip -d src/ /tmp/scroll-webhelp-theme-2.4.3.jar Known Limitations
Resources & Further ReadingThe following resources have been used when creating the plugin:
LicensingMIT |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论