有没有一种方法可以在同一项目中构建多个语义UI主题? [英] Is there a way to build multiple semantic-ui themes in the same project?
问题描述
我现在正在尝试创建一个原型，并不断碰壁.
I'm trying to create a prototype at the moment and keep running into walls.
我正在一个项目上，我们希望拥有一个供所有最终用户使用的代码库，并且该用户所属的组织将确定应用于该网站的皮肤(css文件).语义UI似乎非常适合此操作，因为它具有主题的概念以及围绕它的构建过程.我想利用此构建过程的强大功能，而不必完全重写它.
I'm working on a project where we hope to have one code base that all of our end-users use and where the organization that user is affiliated with will determine the skin(css file) that gets applied to the site. Semantic-UI seems like a great fit for this as it has the concept of themes and a build process around it. I wanted to tap into the power of this build process without having to completely rewrite it.
是否可以运行语义ui生成任务并使其生成多个CSS文件?
这是我到目前为止尝试过的:
Here is what I've tried so far:
尝试1
运行npm install --save-dev semantic-ui并选择安装中的所有默认选项后，我将semantic/tasks/build.js文件更新为以下内容:
ATTEMPT 1
After running npm install --save-dev semantic-ui and choosing all of the default options on the install, I updated the semantic/tasks/build.js file to the following:
/*******************************
Build Task
*******************************/
var
// dependencies
gulp = require('gulp-help')(require('gulp')),
runSequence = require('run-sequence'),
print = require('gulp-print'),
// config
config = require('./config/user'),
install = require('./config/project/install'),
// task sequence
tasks = []
;
// sub-tasks
if(config.rtl) {
require('./collections/rtl')(gulp);
}
require('./collections/build')(gulp);
const orgs = require('../../organizations.json').orgs;
module.exports = function(callback) {
tasks.push('build-javascript');
tasks.push('build-assets');
var lastTaskName = '';
for(var i = 0; i < orgs.length; i ++) {
console.info('Building Semantic');
const org = orgs[i];
gulp.task(`copy semantic ${org}`, function() {
console.info(`copy semantic ${org}`);
return gulp.src(`./orgs/${org}/semantic.json`)
.pipe(print())
.pipe(gulp.dest('../'));
});
gulp.task(`copy theme ${org}`, function() {
console.info(`copy theme ${org}`);
return gulp.src(`./orgs/${org}/theme.config`)
.pipe(print())
.pipe(gulp.dest('./src/'));
});
gulp.task(`build css ${org}`, [`build-css`]);
if( !install.isSetup() ) {
console.error('Cannot find semantic.json. Run "gulp install" to set-up Semantic');
return 1;
}
tasks.push(`copy semantic ${org}`);
tasks.push(`copy theme ${org}`);
tasks.push(`build css ${org}`);
};
runSequence(...tasks, callback);
};
其背后的想法是，对于每个组织，它都将拥有自己的semantic.json和theme.config文件.这些将覆盖默认文件(分别为/semantic.json和/semantic/src/theme.config)，然后为每个文件创建一个新的build-css任务.
The idea behind this being that for every organization it would have its own semantic.json and theme.config files. These would overwrite the default files(/semantic.json and /semantic/src/theme.config respectively) and then create a new build-css task for each one.
这种方法的问题在于，尽管构建过程已成功被覆盖，但构建过程似乎仅使用在构建开始之前就已存在的原始semantic.json文件. 例如，在原始的semantic.json文件中，output.packaged的值为'dist/'.在执行build-css任务之前，semantic.json已成功被覆盖，并且output.packaged的值为dist/org1，但是所有输出文件仍以'dist/'结尾.
The problem with this approach is that the build process only seems to use the original semantic.json file that was in place before the build started even though it is successfully getting overwritten. For instance, in the original semantic.json file, the value for output.packaged is 'dist/'. semantic.json is successfully getting overwritten and the output.packaged value is dist/org1 before the build-css task gets executed, but all of the output files still end up in 'dist/'.
ATTEMPT 2
运行npm install --save-dev semantic-ui并选择安装中的所有默认选项后，我将semantic/tasks/build/css.js文件更新为以下内容:
ATTEMPT 2
After running npm install --save-dev semantic-ui and choosing all of the default options on the install, I updated the semantic/tasks/build/css.js file to the following:
const console = require('better-console');
const extend = require('extend');
const fs = require('fs');
const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const chmod = require('gulp-chmod');
const minifyCSS = require('gulp-clean-css');
const clone = require('gulp-clone');
const concat = require('gulp-concat');
const concatCSS = require('gulp-concat-css');
const dedupe = require('gulp-dedupe');
const flatten = require('gulp-flatten');
const header = require('gulp-header');
const gulpif = require('gulp-if');
const less = require('gulp-less');
const plumber = require('gulp-plumber');
const print = require('gulp-print');
const rename = require('gulp-rename');
const replace = require('gulp-replace');
const uglify = require('gulp-uglify');
const requireDotFile = require('require-dot-file');
const runSequence = require('run-sequence');
const config = require('../config/project/config');
const defaults = require('../config/defaults');
const install = require('../config/project/install');
const tasks = require('../config/tasks');
const banner = tasks.banner;
const comments = tasks.regExp.comments;
const log = tasks.log;
const settings = tasks.settings;
const filenames = tasks.filenames;
const orgs = requireDotFile(`organizations.json`, __dirname).orgs;
module.exports = function(callback) {
orgs.forEach(org => {
const userConfig = requireDotFile(`semantic.${org}.json`, __dirname);
const gulpConfig = (!userConfig) ? extend(true, {}, defaults) : extend(false, {}, defaults, userConfig);
const compiledConfig = config.addDerivedValues(gulpConfig);
const globs = compiledConfig.globs;
const assets = compiledConfig.paths.assets;
const output = compiledConfig.paths.output;
const source = compiledConfig.paths.source;
const cssExt = { extname: `.${org}.css` };
const minCssExt = { extname: `.${org}.min.css` };
let tasksCompleted = 0;
let maybeCallback = function() {
tasksCompleted++;
if(tasksCompleted === 2 * orgs.length) {
callback();
}
};
let stream;
let compressedStream;
let uncompressedStream;
console.info('Building CSS');
if( !install.isSetup() ) {
console.error('Cannot build files. Run "gulp install" to set-up Semantic');
return;
}
// unified css stream
stream = gulp.src(source.definitions + '/**/' + globs.components + '.less')
.pipe(plumber(settings.plumber.less))
.pipe(less(settings.less))
.pipe(autoprefixer(settings.prefix))
.pipe(replace(comments.variables.in, comments.variables.out))
.pipe(replace(comments.license.in, comments.license.out))
.pipe(replace(comments.large.in, comments.large.out))
.pipe(replace(comments.small.in, comments.small.out))
.pipe(replace(comments.tiny.in, comments.tiny.out))
.pipe(flatten())
;
// two concurrent streams from same source to concat release
uncompressedStream = stream.pipe(clone());
compressedStream = stream.pipe(clone());
// uncompressed component css
uncompressedStream
.pipe(plumber())
.pipe(replace(assets.source, assets.uncompressed))
.pipe(rename(cssExt))
.pipe(gulpif(compiledConfig.hasPermission, chmod(compiledConfig.permission)))
.pipe(gulp.dest(output.uncompressed))
.pipe(print(log.created))
.on('end', function() {
runSequence(`package uncompressed css ${org}`, maybeCallback);
})
;
// compressed component css
compressedStream
.pipe(plumber())
.pipe(clone())
.pipe(replace(assets.source, assets.compressed))
.pipe(minifyCSS(settings.minify))
.pipe(rename(minCssExt))
.pipe(gulpif(compiledConfig.hasPermission, chmod(compiledConfig.permission)))
.pipe(gulp.dest(output.compressed))
.pipe(print(log.created))
.on('end', function() {
runSequence(`package compressed css ${org}`, maybeCallback);
})
;
});
gulp.task(`package uncompressed css ${org}`, function() {
return gulp.src(`${output.uncompressed}/**/${globs.components}.${org}${globs.ignored}.css`)
.pipe(plumber())
.pipe(dedupe())
.pipe(replace(assets.uncompressed, assets.packaged))
.pipe(concatCSS(`semantic.${org}.css`, settings.concatCSS))
.pipe(gulpif(compiledConfig.hasPermission, chmod(compiledConfig.permission)))
.pipe(header(banner, settings.header))
.pipe(gulp.dest('dist/'))
.pipe(print(log.created))
;
});
gulp.task(`package compressed css ${org}`, function() {
return gulp.src(`${output.uncompressed}/**/${globs.components}.${org}${globs.ignored}.css`)
.pipe(plumber())
.pipe(dedupe())
.pipe(replace(assets.uncompressed, assets.packaged))
.pipe(concatCSS(`semantic.${org}.min.css`, settings.concatCSS))
.pipe(gulpif(compiledConfig.hasPermission, chmod(compiledConfig.permission)))
.pipe(minifyCSS(settings.concatMinify))
.pipe(header(banner, settings.header))
.pipe(gulp.dest(output.packaged))
.pipe(print(log.created))
;
});
};
其背后的想法是，对于每个组织，它都会在运行css构建任务之前更新一些参数.
The idea behind this being that for every organization it would update a few parameters before running the css build task.
此方法的问题在于，构建过程似乎只使用了对theme.config文件的确认.我尝试将构建指向"theme.org1.config"等，但是它不起作用，也没有提供任何错误.
The problem with this approach is that the build process only seems to use the acknowledge a theme.config file. I tried pointing the build to 'theme.org1.config', etc, but it doesn't work and doesn't provide any error.
尝试3 ??? 如果我忽略了一些明显的路线，请告诉我.我已经为此工作了一段时间，无论我想我走多近，似乎都无法充分发挥作用.
ATTEMPT 3 ??? Please let me know if I'm ignoring some obvious route. I've been working on this for a while and no matter how close I think I'm getting, nothing seems to work fully.
任何帮助将不胜感激！！！
Any help would be greatly appreciated!!!
推荐答案
我终于可以将其与以下内容一起使用...
I finally got this to work with the following...
我将./semantic/build.js更新为包含以下内容:
I updated ./semantic/build.js to contain the following:
var
gulp = require('gulp-help')(require('gulp')),
runSequence = require('run-sequence'),
print = require('gulp-print'),
config = require('./config/user'),
install = require('./config/project/install'),
tasks = []
;
if(config.rtl) {
require('./collections/rtl')(gulp);
}
require('./collections/build')(gulp);
const orgs = require('../../build/organizations.json').orgs;
module.exports = function(callback) {
tasks.push('build-javascript');
tasks.push('build-assets');
for(var i = 0; i < orgs.length; i++) {
console.info('Building Semantic');
const org = orgs[i];
gulp.task(`copy theme ${org}`, function() {
return gulp.src(`./src/themes/${org}/theme.config`)
.pipe(gulp.dest('./src/'));
});
gulp.task(`build css ${org}`, [`build-css`]);
gulp.task(`copy output ${org}`, [`build css ${org}`], function() {
return gulp.src(`./dist/**/*.css`)
.pipe(gulp.dest(`../${org}/dist`));
});
if( !install.isSetup() ) {
console.error('Cannot find semantic.json. Run "gulp install" to set-up Semantic');
return 1;
}
tasks.push(`copy theme ${org}`);
tasks.push(`copy output ${org}`);
};
runSequence(...tasks, callback);
};
采用了上面 ATTEMPT 1 中的想法，只是稍微颠倒了操作顺序.尽管该构建似乎没有确认已更新的semantic.json文件，但它确实使用了已更新的theme.config文件，因此上述脚本为每个组织运行该构建，然后在完成构建后，将构建的文件复制到另一个组织中.目录，更新theme.config文件，然后再次执行相同的过程.
It takes the idea that I had in ATTEMPT 1 above and just reverses the order of operations a bit. While the build doesn't seem to acknowledge the updated semantic.json file, it does utilize the updated theme.config file, so the above script runs the build for each organization and then after that build is done it copies the built files to another directory, updates the theme.config file and then performs the same process again.
我将以上内容保存到了./build/override-semantic-ui-build.js，然后将以下内容添加到了package.json文件中:"postinstall": "ncp build/override-semantic-ui-build.js semantic/tasks/build.js"，以便在ci服务器上安装语义UI时，该构建文件将被以上内容覆盖适应.
I have the above saved to ./build/override-semantic-ui-build.js and then I added the following to my package.json file: "postinstall": "ncp build/override-semantic-ui-build.js semantic/tasks/build.js" so that when semantic-ui gets installed on the ci server, that build file will get overwritten with the above adaptation.
这篇关于有没有一种方法可以在同一项目中构建多个语义UI主题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
