同じプロジェクトで複数の意味論的テーマを構築する方法はありますか？

Question

私は現時点でプロトタイプを作成し、壁に流れ続けるつもりです。

私はすべてのエンドユーザーが使用するコードベースと、そのユーザーが所属する組織がサイトに適用されるスキン（cssファイル）を決定するプロジェクトに取り組んでいます。 。 Semantic-UIは、テーマの概念とその周りにプロセスを構築するので、これにはうってつけのようだ。私は完全に書き直すことなく、このビルドプロセスの力を利用したいと思っていました。

セマンティックUIビルドタスクを実行し、複数のCSSファイルを作成する方法はありますか？

：npm install --save-dev semantic-uiを実行し、インストールのデフォルトのオプションをすべて選択した後、私は次のようにsemantic/tasks/build.jsファイルを

ATTEMPT 1 を更新：ここで

は、私がこれまで試したものです

/******************************* 
      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タスクを作成します。

このアプローチの問題は、ビルドプロセスのみのビルドは、それが正常に上書きされてきているにもかかわらず、開始する前の場所にいた元semantic.jsonファイルを使用するように思われることです。たとえば、元のsemantic.jsonファイルでは、output.packagedの値は「dist /」です。 build-cssタスクが実行される前にsemantic.jsonが上書きされ、の値がdist/org1になりますが、すべての出力ファイルは「dist /」になります。これはすべてのためのものであることの背後にある

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)) 
      ; 
     }); 
}; 

アイデア：

---

ATTEMPT 2 npm install --save-dev semantic-uiを実行し、インストールのデフォルトのオプションをすべて選択した後、私は次のようにsemantic/tasks/build/css.jsファイルを更新します組織は、cssビルドタスクを実行する前に、いくつかのパラメータを更新します。

この方法の問題点は、ビルドプロセスが肯定応答theme.configファイルを使用しているように見えることです。私は 'theme.org1.config'などにビルドを指してみましたが、動作しないため、エラーは発生しません。

---

ATTEMPT 3 ??? 明白なルートを無視している場合は教えてください。私はこれをしばらくは続けてきましたが、私がどれほど近づいても、何も完全には動作していないようです。

ご協力いただければ幸いです！

Answer 1

私は最終的に私は、次を含むように./semantic/build.jsを更新し、次...

で動作するようにこれを得た：

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ファイルを開き、同じプロセスを再度実行します。

私は./build/override-semantic-ui-build.jsに保存された上記を持っているし、私は私のpackage.jsonファイルに以下を追加しました：セマンティック-UIはCIサーバにインストールされるとき、そのビルドファイルは、上記の適応で上書きされますように"postinstall": "ncp build/override-semantic-ui-build.js semantic/tasks/build.js"。