2012-07-19 13 views
9

Ho un documento .html con CSS e Javascript all'interno del documento (nessun file esterno). C'è qualche strumento online che dovrebbe minificare documento e Javascript per un ingombro molto ridotto? Ho visto molti script come illeggibili, in cui tutte le variabili e i nomi delle funzioni sono stati sostituiti con nomi di una sola lettera, ecc. Si prega di avvisare.Come ridurre HTML con CSS e Javascript?

+1

Penso che la parola chiave che stai cercando qui sia "minify" – Jrod

+1

@Jrod: E "offuscamento" :) – mouad

risposta

10

Edit 2 (Feb 22, 2017): Ora lo strumento migliore per minify il vostro patrimonio (e molto altro, aggiungendo caricatori e plugin) è sicuramente Webpack.

Esempio di configurazione per spostare tutti i vostri .css in un unico file e minify esso:

{ 
    test: /\.css$/, 
    use: [ 
    { 
     loader: 'css-loader', 
     options: { 
     minimize: true 
     } 
    } 
    ] 
} 

Edit 1 (16 Settembre 2014): Ancora meglio, ora avete corridori compito come Gulp o Grunt.

corridori Task sono piccole applicazioni che vengono utilizzate per automatizzare molti dei del tempo, noioso (ma molto importante) attività che si devono fare durante lo sviluppo di un progetto. Questi includono attività come l'esecuzione di test , concatenazione di file, minificazione e preelaborazione CSS. Con semplicemente creando un file di attività, è possibile istruire il runner di attività su automaticamente a occuparsi di qualsiasi attività di sviluppo che è possibile considerare come quando si apportano modifiche ai file. È un'idea molto semplice: che ti farà risparmiare un sacco di tempo e ti permetterà di rimanere concentrato sullo sviluppo .

deve leggere: Getting started with Gulp.js

Esempio di operazione con la concatenazione Javascript e minification (e JSHint):

gulp.task('scripts', function() { 
    return gulp.src('src/scripts/**/*.js') 
    .pipe(jshint('.jshintrc')) 
    .pipe(jshint.reporter('default')) 
    .pipe(concat('main.js')) 
    .pipe(gulp.dest('dist/assets/js')) 
    .pipe(rename({suffix: '.min'})) 
    .pipe(uglify()) 
    .pipe(gulp.dest('dist/assets/js')) 
    .pipe(notify({ message: 'Scripts task complete' })); 
}); 
risposta

originale (19 luglio 2012): vi consiglio il HTML5 Boilerplate Build Script che può ridurre il tuo JS e CSS.

3

Utilizzando uno degli manyavailableminifiers.

Ci sono evensome che minimizzano CSS.

+1

Ma i minifinzionali javascript non cambiano i nomi delle funzioni in nomi di una sola lettera se vengono utilizzati dal documento, come ad esempio 'onload = "pageLoad" '- quindi' pageLoad' rimane: -/ –

+2

Alcuni minificatori hanno la possibilità di selezionare se ridurre o meno i valori letterali/nomi di funzioni/nomi di variabili. –

+0

Ma finora ho sempre trovato solo minifiers non complessi. Vorrei usare alcuni che si occupino di tutte le parti: js, css, html –

0

ho mai provato, ma hanno sentito reale buone recensioni su Google chiusura compiler..You potrebbe voler provare

1

Mentre il codice JavaScript può essere compresso e decompresso in JavaScript (vedere altre risposte), è davvero difficile ottenere lo stesso risultato in CSS.Attualmente non esiste uno strumento che faccia di più che rimuovere spazi bianchi non necessari (vedere anche Are there any agressive CSS Minification tools?), poiché i nomi di identificatori e classi non possono essere modificati senza distruggere il collegamento tra HTML e CSS.

Inoltre, non è possibile rimuovere nulla dal markup HTML tranne gli spazi. Bene, puoi minimizzare i nomi delle classi e l'identificatore, ma attualmente non ci sono strumenti che aggiornino quei valori minificati nei tuoi file CSS/JS, quindi questo renderebbe il tuo sito brutto e danneggiato. E anche gli elementi vuoti sono spesso necessari per ottenere alcuni effetti CSS corretti (sì, ti sto guardando, IE6). Questo vale anche per i nomi delle funzioni JavaScript.

TL; DR: Sfortunatamente non esiste uno strumento all-in-one-minify-everything. La cosa più vicina è htmlcompressor.

+0

Quello che mi aspetto è di sostituire i nomi delle funzioni in html e poi anche in Javascript. Per ora, per esempio, se hai 'onload = pageLoad', allora questo nome di funzione rimarrà tale dimensione, ma sarebbe bello sostituirlo con un nome breve (una-due lettere). Quindi c'è un po 'di potente oltre la compressione degli spazi ... –

+0

Beh, è ​​fondamentalmente lo stesso problema con CSS/HTML - devi cambiare i nomi delle funzioni ovunque e fare attenzione alle collisioni. – Zeta

3

temo che dovrete farlo in due fasi:

  1. ricerca manuale e sostituzione di oggetti globali in un editor di testo
  2. minifiers per finire il lavoro sui CSS e JS

Ho avuto una domanda simile qualche tempo fa (su oggetti globali e chiavi di oggetti). La risposta che ho ottenuto è che nessuno strumento farà ipotesi sul contesto globale. Nel tuo esempio, non ridimensioneranno "pageLoad" perché potrebbe essere utilizzato da un altro frammento di html o js che non hai fornito.

Una soluzione nel tuo esempio sarebbe quello di rendere la funzione pageload locale e aggiungere l'evento onload dinamicamente nello script:

elt.onload=function(){pageLoad();}; 
+0

+1: buon punto con onload dinamico - grazie –

5

Closure compiler è stato correttamente indicato per JS; ma non molti sono a conoscenza di Google Closure stylesheets. Una delle caratteristiche fogli di stile chiusura è la ridenominazione, dove

<style> 
    .descriptive-parent-class-name .descriptive-element-class-name {color:red;} 
</style> 
<div class="descriptive-parent-class-name"> 
    <p class="descriptive-element-class-name">Lorem ipsum</p> 
    <p class="descriptive-element-class-name">Lorem ipsum</p> 
</div> 

diventerebbe

<style> 
    .a-b .a-c {color:red;} 
</style> 
<div class="a-b"> 
    <p class="a-c">Lorem ipsum</p> 
    <p class="a-c">Lorem ipsum</p> 
</div> 

Ci sarà un'ulteriore minimizzazione troppo; e dato che OP indica che tutte le risorse sono incluse nell'html, questo potrebbe finire per risparmiare un po 'nel sovraccarico del traffico.

NB: se si ispezionare qualsiasi pagina dei risultati di ricerca di Google, vedrai i loro nomi class e id sono quasi mai più di 4 caratteri casuali

1

Prova http://prettydiff.com/. Offre il rilevamento automatico della lingua e può ridurre html, css e javascript. Questo strumento presuppone che i tag script senza un tipo mime o con un tipo mime rilevante per javascript debbano contenere javascript o nulla. Allo stesso modo, si presume che i tag di stile senza un tipo mime o con il tipo mime "text/css" contengano CSS. Il CSS e il JavaScript sono minimizzati di conseguenza. Lo strumento stesso è scritto in javascript. Non c'è motivo per cui dovresti usare più di uno strumento.

+0

Non rinomina per esempio classi, ecc. - facendo così (se ...) risulterebbe molto più breve –

+0

Corretto, la ridenominazione non è minimizzazione. Questa è offuscazione. L'obiettivo della minificazione non è quello di danneggiare, con l'eccezione dei commenti, la capacità di leggere il documento dopo l'uso di uno strumento di abbellimento. Un buon minificatore non rinominerà nulla o altererà la funzionalità di javascript o css e lascerà il codice dell'intero documento su una singola riga con solo la quantità minima di spazio bianco senza impatto sul contenuto. – austincheney

0

Vi consiglio di provare WebMarkupMin Online.

Il WebMarkupMin Online è uno strumento online gratuito per minimizzare il codice HTML, XHTML e XML. I minifiers HTML e XHTML supportano la minificazione del codice CSS dai tag style e gli attributi e la minificazione del codice JavaScript dai tag script, gli attributi evento e i collegamenti ipertestuali con lo pseudo-protocollo javascript:.Questi minifiers supportano più algoritmi di minification CSS (Mads Kristensen's Efficient stylesheet minifier, Microsoft Ajax CSS Minifier e YUI CSS Compressor) e JavaScript minification (Douglas Crockford's JSMin, Microsoft Ajax JS Minifier e YUI JS Compressor).

Questi strumenti si basano sulla libreria WebMarkupMin.