2013-10-14 7 views
6

Sto utilizzando l'attività usemin nel mio generatore Yeoman. Nell'HTML sembra che abbia funzionato correttamente poiché i file JavaScript separati sono sostituiti da un collegamento a un singolo file. Tuttavia, il file a cui si fa il riferimento non è stato creato. Mi manca un'impostazione?Usbin grunt: file JavaScript concatenato non creato

Gruntfile.js

'use strict'; 

module.exports = function (grunt) { 
    // load all grunt tasks 
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); 

    // configurable paths 
    var yeomanConfig = { 
     app: 'app', 
     dev: 'dev', 
     dist: 'dist' 
    }; 

    grunt.initConfig({ 
     yeoman: yeomanConfig, 

     clean: { 
      dist: { 
       files: [{ 
        dot: true, 
        src: [ 
         '.tmp', 
         '<%%= yeoman.dist %>/*', 
         '!<%%= yeoman.dist %>/.git*' 
        ] 
       }] 
      } 
     }, 

     copy: { 
      dev: { 
       files: [ 
        {expand: true, cwd: '<%%= yeoman.app %>', src: ['**', '!**/scss/**'], dest: '<%%= yeoman.dev %>'}, 
        {expand: true, cwd: '<%%= yeoman.app %>/assets/scss/fonts', src: ['**'], dest: '<%%= yeoman.dev %>/assets/css/fonts'}, 
        {expand: true, cwd: '<%%= yeoman.app %>/assets/bower_components/jquery', src: ['jquery.min.js'], dest: '<%%= yeoman.dev %>/assets/js/lib', rename: function (dest) { 
         var jQConf = grunt.file.readJSON('app/assets/bower_components/jquery/bower.json'); 
         return dest + '/jquery-' + jQConf.version + '.min.js'; 
        }}, 
        {expand: true, cwd: '<%%= yeoman.app %>/assets/bower_components/jquery-legacy', src: ['jquery.min.js'], dest: '<%%= yeoman.dev %>/assets/js/lib', rename: function (dest) { 
         var jQLegConf = grunt.file.readJSON('app/assets/bower_components/jquery-legacy/.bower.json'); 
         return dest + '/jquery-' + jQLegConf.version + '.min.js'; 
        }}, 
        // Only copy over the unminified migrate plugin 
        {expand: true, cwd: '<%%= yeoman.app %>/assets/bower_components/jquery-migrate', src: ['jquery-migrate.js'], dest: '<%%= yeoman.dev %>/assets/js/lib', rename: function (dest) { 
         var jqMigConf = grunt.file.readJSON('app/assets/bower_components/jquery-migrate/.bower.json'); 
         return dest + '/jquery-migrate-' + jqMigConf.version + '.js'; 
        }} 
       ] 
      }, 

      dist: { 
       files: [ 
        {expand: true, cwd: '<%%= yeoman.app %>', src: ['**', '!**/scss/**', '!**/js/*.js', '!**/bower_components/**'], dest: '<%%= yeoman.dist %>'}, 
        {expand: true, cwd: '<%%= yeoman.app %>/assets/scss/fonts', src: ['**'], dest: '<%%= yeoman.dist %>/assets/css/fonts'}, 
        {expand: true, cwd: '<%%= yeoman.app %>/assets/bower_components/jquery', src: ['jquery.min.js'], dest: '<%%= yeoman.dist %>/assets/js/lib', rename: function (dest) { 
         var jQConf = grunt.file.readJSON('app/assets/bower_components/jquery/bower.json'); 
         return dest + '/jquery-' + jQConf.version + '.min.js'; 
        }}, 
        {expand: true, cwd: '<%%= yeoman.app %>/assets/bower_components/jquery-legacy', src: ['jquery.min.js'], dest: '<%%= yeoman.dist %>/assets/js/lib', rename: function (dest) { 
         var jQLegConf = grunt.file.readJSON('app/assets/bower_components/jquery-legacy/.bower.json'); 
         return dest + '/jquery-' + jQLegConf.version + '.min.js'; 
        }}, 
        // Only copy over the minified migrate plugin 
        {expand: true, cwd: '<%%= yeoman.app %>/assets/bower_components/jquery-migrate', src: ['jquery-migrate.min.js'], dest: '<%%= yeoman.dist %>/assets/js/lib', rename: function (dest) { 
         var jqMigConf = grunt.file.readJSON('app/assets/bower_components/jquery-migrate/.bower.json'); 
         return dest + '/jquery-migrate-' + jqMigConf.version + '.min.js'; 
        }} 
       ] 
      } 
     }, 

     compass: { 
      dev: { 
       options: { 
        sassDir: '<%%= yeoman.app %>/assets/scss', 
        cssDir: '<%%= yeoman.dev %>/assets/css', 
        environment: 'development' 
       } 
      }, 

      dist: { 
       options: { 
        sassDir: '<%%= yeoman.app %>/assets/scss', 
        cssDir: '<%%= yeoman.dist %>/assets/css', 
        environment: 'production' 
       } 
      } 
     }, 

     replace: { 
      dev: { 
       options: { 
        patterns: [{ 
         match: '/@jquery-migrate-local/g', 
         replacement: function() { 
          var jQMigConf = grunt.file.readJSON('app/assets/bower_components/jquery-migrate/.bower.json'); 
          return 'assets/js/lib/jquery-migrate-' + jQMigConf.version + '.js'; 
         }, 
         expression: true 
        }] 
       } 
      }, 

      dist: { 
       options: { 
        patterns: [{ 
         match: '/@jquery-cdn/g', 
         replacement: function() { 
          var jQConf = grunt.file.readJSON('app/assets/bower_components/jquery/bower.json'); 
          return '//ajax.googleapis.com/ajax/libs/jquery/' + jQConf.version + '/jquery.min.js'; 
         }, 
         expression: true 
        }, { 
         match: '/@jquery-legacy-cdn/g', 
         replacement: function() { 
          var jQLegConf = grunt.file.readJSON('app/assets/bower_components/jquery-legacy/bower.json'); 
          return '//ajax.googleapis.com/ajax/libs/jquery/' + jQLegConf.version + '/jquery.min.js'; 
         }, 
         expression: true 
        }, { 
         match: '/@jquery-local/g', 
         replacement: function() { 
          var jQConf = grunt.file.readJSON('app/assets/bower_components/jquery/bower.json'); 
          return 'assets/js/lib/jquery-' + jQConf.version + '.min.js'; 
         }, 
         expression: true 
        }, { 
         match: '/@jquery-legacy-local/g', 
         replacement: function() { 
          var jQLegConf = grunt.file.readJSON('app/assets/bower_components/jquery-legacy/bower.json'); 
          return 'assets/js/lib/jquery-' + jQLegConf.version + '.min.js'; 
         }, 
         expression: true 
        }, { 
         match: '/@jquery-migrate-local/g', 
         replacement: function() { 
          var jQMigConf = grunt.file.readJSON('app/assets/bower_components/jquery-migrate/.bower.json'); 
          return 'assets/js/lib/jquery-migrate-' + jQMigConf.version + '.min.js'; 
         }, 
         expression: true 
        }] 
       }, 
       files: [ 
        {src: ['app/index.html'], dest: 'app/index.html'} 
       ] 
      } 
     }, 

     processhtml: { 
      dev: { 
       files: { 
        '<%%= yeoman.dev %>/index.html': ['<%%= yeoman.app %>/index.html'] 
       } 
      }, 
      dist: { 
       options: { 
        data: { 
         message: '.min' 
        } 
       }, 
       files: { 
        '<%%= yeoman.dist %>/index.html': ['<%%= yeoman.app %>/index.html'] 
       } 
      } 
     }, 

     useminPrepare: { 
      html: '<%%= yeoman.app %>/index.html', 
      options: { 
       dest: '<%= yeoman.dist %>' 
      } 
     }, 

     usemin: { 
      options: { 
       dirs: ['<%%= yeoman.dist %>'] 
      }, 
      html: ['**/*.html'], 
      css: ['**/*.css'] 
     } 

    }); 

    grunt.registerTask('server', []); 

    grunt.registerTask('dev', [ 
     'clean', 'copy:dev', 'compass:dev', 'replace' 
    ]); 

    grunt.registerTask('build', [ 
     'clean', 'copy:dist', 'compass:dist', 'replace:dist', 'useminPrepare', 'usemin' 
    ]); 
}; 

index.html

<!-- build:js assets/js/main.js --> 
<script src="assets/js/variables.js"></script> 
<script src="assets/js/functions.js"></script> 
<script src="assets/js/script.js"></script> 
<script src="assets/js/events.js"></script> 
<!-- endbuild --> 

messaggi processo terminale

Running "useminPrepare:html" (useminPrepare) task 
Going through app/index.html to update the config 
Looking for build script HTML comment blocks 

Found a block: 
     <!-- build:js assets/js/lteie8.main.js --> 
     <script src="assets/bower_components/selectivizr/selectivizr.js"></script> 
     <script src="assets/bower_components/respond/respond.src.js"></script> 
     <!-- endbuild --> 
Updating config with the following assets: 
    - app/assets/bower_components/selectivizr/selectivizr.js 
    - app/assets/bower_components/respond/respond.src.js 

Found a block: 
    <!-- build:js assets/js/main.js --> 
    <script src="assets/js/variables.js"></script> 
    <script src="assets/js/functions.js"></script> 
    <script src="assets/js/script.js"></script> 
    <script src="assets/js/events.js"></script> 
    <!-- endbuild --> 
Updating config with the following assets: 
    - app/assets/js/variables.js 
    - app/assets/js/functions.js 
    - app/assets/js/script.js 
    - app/assets/js/events.js 

Configuration is now: 

    cssmin: 
    {} 

    concat: 
    { 'dist/assets/js/lteie8.main.js': 
    [ 'app/assets/bower_components/selectivizr/selectivizr.js', 
    'app/assets/bower_components/respond/respond.src.js' ], 
    'dist/assets/js/main.js': 
    [ 'app/assets/js/variables.js', 
    'app/assets/js/functions.js', 
    'app/assets/js/script.js', 
    'app/assets/js/events.js' ] } 

    uglify: 
    { 'dist/assets/js/lteie8.main.js': 'dist/assets/js/lteie8.main.js', 
    'dist/assets/js/main.js': 'dist/assets/js/main.js' } 

    requirejs: 
    {} 

Risultati in (HTM L): <script src="assets/js/main.js"></script> ma nessuno main.js di file creato

+0

Non si visualizza l'intero file Grunt. Avete compiti di copia e concatenamento? Forse questo sarà utile: http://stackoverflow.com/a/19130830/557612 – steveax

+0

Aggiornato con Gruntfile completo – Fisu

risposta

13

Si sta andando ad avere bisogno di concat e compiti min dopo usemin. Usemin cambia semplicemente la configurazione per concat.

In uno dei miei progetti, ho le seguenti:

<!-- build:js /js/scripts.min.js --> 
    <script src="/assets/javascript/source/index.js"></script> 
    <script src="/assets/javascript/source/flipper.js"></script> 
    <script src="/assets/javascript/source/utils.js"></script> 
    <script src="/assets/javascript/source/overlay.js"></script> 
    <script src="/assets/javascript/source/views.js"></script> 
    <script src="/assets/javascript/source/rotator.js"></script> 
    <script src="/assets/javascript/source/promos.js"></script> 
    <!-- endbuild --> 

e il mio compito Grunt è questo:

grunt.registerTask('produce', [ 
    'useminPrepare', 
    'concat', 
    'uglify', 
    'cssmin', 
    'usemin' 
]); 

Hai semplicemente bisogno di avere concat & uglify installato al vostro progetto, non c'è nessuna configurazione necessaria dal momento che usemin lo gestisce.

+0

Se usemin gestisce la configurazione per te perché non esegue l'esecuzione anche per te? –

+0

La mia ipotesi è perché è un compito modulare. Se concat/uglify esiste già, immagino che i manutentori del progetto non vedessero la necessità di reinventare la ruota, per così dire. – imjared

+1

Unisce la tua configurazione a quella generata dallo strumento, suppongo che lo faccia in modo che tu possa ancora modificarlo. Forse il comportamento previsto è che dovrebbe eseguire la configurazione generata. Puoi eseguirlo da solo con 'concat: generated', 'uglify: generated', 'cssmin: generated', –