2013-10-14 4 views
6

Ich verwende die usemin Aufgabe in meinem Yeoman-Generator. Im HTML scheint es gut zu funktionieren, da die separaten JavaScript-Dateien durch einen Link zu einer einzelnen Datei ersetzt werden. Die Datei, auf die verwiesen wird, wurde jedoch nicht erstellt. Vermisse ich eine Einstellung?Grunt usemin: verkettete JavaScript-Datei nicht erstellt

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 --> 

Terminalprozess Nachricht

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: 
    {} 

Ergebnisse in (HTM L): <script src="assets/js/main.js"></script> aber keine main.js Datei erstellt

+0

Sie zeigen nicht die gesamte Gruntfile. Haben Sie Kopier- und Kontrataufgaben? Vielleicht wird dies hilfreich sein: http://stackoverflow.com/a/19130830/557612 – steveax

+0

Mit voller Gruntfile aktualisiert – Fisu

Antwort

13

Sie werden concat und min Aufgaben nach usemin benötigen. UseMin ändert nur die Konfiguration für concat.

In einem meiner Projekte habe ich folgendes:

<!-- 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 --> 

und meine Grunt Aufgabe ist dies:

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

Sie einfach concat & haben müssen, um Ihr Projekt installiert verunstalten, gibt es keine Konfiguration erforderlich, da UseMin das handhabt.

+0

Wenn Uminin die Konfiguration für Sie behandelt, was macht es nicht auch die Ausführung für Sie? –

+0

Meine Vermutung ist, weil es eine modulare Aufgabe ist. Wenn concat/uglify bereits existiert, stelle ich mir vor, dass die Projektbetreuer nicht die Notwendigkeit sahen, das Rad sozusagen neu zu erfinden. – imjared

+1

Es führt Ihre Konfiguration mit der vom Tool generierten zusammen, ich denke, es ist so, dass Sie es noch optimieren können. Vielleicht ist das erwartete Verhalten, dass es die generierte Konfiguration ausführen sollte. Sie können es selbst ausführen mit 'concat: generated', 'uglify: generated', 'cssmin: generated', –

Verwandte Themen