Come configurare Ember CLI per utilizzare uncss

Question

Ho difficoltà a configurare Ember CLI per utilizzare uncss. La messa a punto:

> ember new foobar 
> cd foobar 
> bower install --save-dev bootstrap 
> ember generate route index 

app/templates/index.hbs

<h1>Hello World!</h1> 

Brocfile.js

/* global require, module */ 

var EmberApp = require('ember-cli/lib/broccoli/ember-app'); 

var app = new EmberApp(); 

app.import('vendor/bootstrap/dist/css/bootstrap.css'); 

module.exports = app.toTree(); 

Che cosa devo fare per utilizzare https://github.com/sindresorhus/broccoli-uncss? La parte del patrimonio di http://iamstef.net/ember-cli/ dice che è facile ma non descrive come farlo realmente.

Answer 1

Non è ben documentato in readme broccoli-uncss, ma se si guarda il index.js e test.js, si otterrebbe l'idea.

Fondamentalmente si passa ad un albero come primo parametro e un hash di opzioni come secondo parametro, mentre hash di opzioni deve avere un'opzione html, che indica dove si trova index.html. Nel tuo caso, penso che quello che Oliver ha detto sia vero. Puoi usare l'html nella tua cartella dist. Non sono sicuro di come integrarlo con l'ember-cli, ma è probabile che tu abbia bisogno di un componente aggiuntivo ember-cli, http://reefpoints.dockyard.com/2014/06/24/introducing_ember_cli_addons.html.

var uncss = require('broccoli-uncss'); 

var cssTree = uncss('dist`, { 
// html file to uncss, or this could be a live link to the html 
html: ['dist/index.html'] 
}); 

// you might somewhat merge this with ember-cli app tree here. 

module.exports = cssTree; 

Answer 2

favore correggetemi se sbaglio ...

Presumo uncss non funziona come previsto in un "ambiente di templating"!

Supponiamo di avere un modello esterno e uno interno. L'esterno si presenta come

<div class="outer"> 
    {{outlet}} 
</div> 

e il modello interno sarà simile

<h1>Text</h1> 

Nel file css si forse scrivere qualcosa come

.outer h1 { 
    background: red; 
} 

Per quanto ne so uncss sarebbe respingere questa regola CSS perché uncss non è in grado di trovarlo in nessuno dei tuoi modelli.