2013-08-17 14 views
8

Sto costruendo un'app Django che serve un'app Angolare singola pagina.Come posso dire a grunt-usemin di ignorare i tag modello statici di Django?

index.html di angolare che ha il seguente blocco di script usemin di Django servire:

<!-- build:js scripts/scripts.js --> 
<script src="{% static "scripts/app.js" %}"></script> 
<script src="{% static "scripts/controllers/main.js" %}"></script> 
<script src="{% static "scripts/controllers/stats.js" %}"></script> 
<script src="{% static "scripts/directives/highchart.js" %}"></script> 
<!-- endbuild --> 

Usemin cerca di trovare "{% statica "scripts/app.js" %}" sul filesystem e naturalmente fallisce perché quello che dovrebbe davvero cercare di trovare è "scripts/app.js".

Qualcuno ha visto una soluzione alternativa per questo?

+0

Hai costruito il sito con 'grunt build', non ci dovrebbe essere un blocco usemin servito al client, questo è solo per grunt e non ha nulla a che fare con il backend (afaik). – Patrick

+0

Sto cercando di sfruttare la ricerca di URL inverso di Django per l'url statico, quindi sto servendo l'indice index.html di Angular da una rotta Django, che mi permette di usare i tag modello Django in index.html. Da allora l'ho abbandonato e ora accedo a index.html dall'URL statico, piuttosto che da una corretta rotta Django. Mi limiterò a mordere il proiettile e se il mio file statico non cambierà mai aggiornerò index.html a mano. – davemckenna01

+0

@ davemckenna01 hai trovato qualcosa di nuovo su questo dal mese di agosto quando hai chiesto originariamente? Attualmente sto usando grunt/yeoman con Angular e l'integrazione del flusso di lavoro con django mi sta rallentando un po '. – kevins

risposta

9

OK, penso di avere una soluzione alternativa. Questo presuppone che tu voglia che il file costruito faccia anche riferimento all'url statico per le risorse create.

Questo richiederà di definire un STATIC_URL nel contesto della vista (invece di utilizzare src="{% static 'foo/bar.js' %}" verrà utilizzato src="{{STATIC_URL}}foo/bar.js"). Non ho potuto ottenere {% static %} per funzionare senza l'hacking della fonte grunt-usemin.

Così, attraverso il tuo esempio, questo:

<!-- build:js {{STATIC_URL}}scripts/scripts.js --> 
<script src="{{STATIC_URL}}scripts/app.js"></script> 
<script src="{{STATIC_URL}}scripts/controllers/main.js"></script> 
<script src="{{STATIC_URL}}scripts/controllers/stats.js"></script> 
<script src="{{STATIC_URL}}scripts/directives/highchart.js"></script> 
<!-- endbuild --> 

Compila fino a:

<script src="{{STATIC_URL}}scripts/scripts.js"></script> 

Al fine di raggiungere questo obiettivo, ho dovuto aggiungere le seguenti configurazioni grugnito (in Gruntfile.js):

// custom createConfig script for replacing Django {{STATIC_URL}} references 
// when building config for concat and cssmin 
var path = require('path'); 
function createDjangoStaticConcatConfig(context, block) { 
    var cfg = {files: []}; 
    var staticPattern = /\{\{\s*STATIC_URL\s*\}\}/; 

    block.dest = block.dest.replace(staticPattern, ''); 
    var outfile = path.join(context.outDir, block.dest); 

    // Depending whether or not we're the last of the step we're not going to output the same thing 
    var files = { 
    dest: outfile, 
    src: [] 
    }; 
    context.inFiles.forEach(function(f) { 
    files.src.push(path.join(context.inDir, f.replace(staticPattern, ''))); 
    }); 
    cfg.files.push(files); 
    context.outFiles = [block.dest]; 
    return cfg; 
} 


grunt.initConfig({ 
    /*...*/ 

    // add a preprocessor to modify the concat config to parse out {{STATIC_URL}} using the above method 
    useminPrepare: { 
     html: 'app/index.html', 
     options: { 
     dest: 'dist', 
     flow: { 
      steps: { 
      js: [ 
       { 
       name: 'concat', 
       createConfig: createDjangoStaticConcatConfig 
       }, 
       'uglifyjs' 
      ], 
      // also apply it to css files 
      css: [ 
       { 
       name: 'cssmin', 
       createConfig: createDjangoStaticConcatConfig 
       } 
      ] 
      }, 
      // this property is necessary 
      post: {} 
     } 
     } 
    }, 

    // add a pattern to parse out the actual filename and remove the {{STATIC_URL}} bit 
    usemin: { 
     html: ['dist/{,*/}*.html'], 
     css: ['dist/styles/{,*/}*.css'], 
     options: { 
     assetsDirs: ['dist'], 
     patterns: { 
      html: [[/\{\{\s*STATIC_URL\s*\}\}([^'"]*)["']/mg, 'django static']] 
     } 
     } 
    }, 


    // if you are using bower, also include the jsPattern to automatically 
    // insert {{STATIC_URL}} when inserting js files 
    'bower-install': { 
     app: { 
     html: 'app/index.html', 
     jsPattern: '<script type="text/javascript" src="{{STATIC_URL}}{{filePath}}"></script>' 
     } 
    } 
}); 
+0

grande opera

3

(ho trovato questa domanda quando ho cercato su Google una soluzione, quindi ho solo condiviso la soluzione che ho trovato e così che altri come me possono trovarlo.)

Ho appena scoperto un plugin per grunt chiamato grunt-bridge che può avvolgere file statici in un modello html con il tag static. La documentazione non è eccezionale, ma ho capito come farlo funzionare per il mio progetto.

Se si dispone di script come questo:

<!-- build:js({.tmp,app}) /scripts/scripts.js --> 
    <script src="scripts/app.js"></script> 
    <script src="scripts/util/util.js"></script> 
    ... 

E il risultato finale è qualcosa di output come questo:

<script src="{% static 'adjangoappname/scripts/94223d51.scripts.js' %}"></script> 

Installare gruntbridge con npm install grunt-bridge --save-dev e aggiungere una configurazione simile in grugnito .initConfig of the Gruntfile.js:

bridge: { 
    distBaseHtml: { 
     options: { 
      pattern: '{% static \'adjangoappname{path}\' %}', 
      html: '<%= yeoman.minifiedDir %>/index.html', dest: '<%= yeoman.templateDir %>/index.html' 
     } 
    }, 
    distIndexHtml: { 
     options: { 
      pattern: '{% static \'adjangoappname{path}\' %}', 
      html: '<%= yeoman.minifiedDir %>/index.html', dest: '<%= yeoman.templateDir %>/index.html' 
     } 
    }, 
    // ... etc for each html file you want to modify 
}, 

Dove <%= yeoman.minifiedDir %> è la directory di output dei file html minificati finali e <%= yeoman.minifiedDir %> è la directory del modello di destinazione. Sostituisci adjangoappname con il nome della tua app django o qualunque prefisso di directory che si desidera avere.

Quindi aggiungere grugnito-ponte ultimo nell'elenco registerTask in questo modo:

grunt.registerTask('build', [ 
    //... 
    'htmlmin', 
    'bridge' 
]); 

(penso che sia possibile effettuare la configurazione più compatta, ma questo è il primo metodo ho scoperto che ha funzionato)

+0

Il plugin grunt-bridge è ottimo. L'ho provato con yeoman-webapp. Avevo bisogno di rimuovere 'htmlmin' dall''attività 'build' perché a grunt-bridge non piacevano le citazioni mancanti 'htmlmin'. – tsand

Problemi correlati