1. घर
  2. सवाल और जवाब
  3. Grunt usemin: concatenated जावास्क्रिप्ट फ़ाइल नहीं बनाई गई

Grunt usemin: concatenated जावास्क्रिप्ट फ़ाइल नहीं बनाई गई

2013-10-14 4 views
6

मैं अपने यमन जनरेटर में usemin कार्य का उपयोग कर रहा हूं। एचटीएमएल में ऐसा लगता है कि यह ठीक काम करता है क्योंकि अलग-अलग जावास्क्रिप्ट फ़ाइलों को एक फ़ाइल के लिंक द्वारा प्रतिस्थापित किया जाता है। हालांकि, जिस फ़ाइल का संदर्भ दिया जा रहा है उसे बनाया नहीं गया है। क्या मुझे एक सेटिंग याद आ रही है?Grunt usemin: concatenated जावास्क्रिप्ट फ़ाइल नहीं बनाई गई

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

में टर्मिनल प्रक्रिया संदेश

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

परिणाम (HTM एल): <script src="assets/js/main.js"></script> लेकिन main.js फ़ाइल बनाई गई

स्रोत

2013-10-14 Fisu

+0

आप संपूर्ण ग्रंटफाइल नहीं दिखाते हैं। क्या आपके पास प्रतिलिपि और संक्षिप्त कार्य हैं? शायद यह सहायक होगा: http://stackoverflow.com/a/19130830/557612 – steveax

+0

पूर्ण ग्रंटफाइल – Fisu

उत्तर

13

आपको उपयोगकर्ता के बाद संक्षिप्त और न्यूनतम कार्यों की आवश्यकता होगी। Usemin बस concat के लिए विन्यास बदलता है।

अपनी परियोजनाओं में से एक में, मैं निम्नलिखित है:

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

और मेरे ग्रंट कार्य यह है:

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

आप बस concat & अपनी परियोजना के लिए स्थापित बदसूरत करना है की जरूरत है, वहाँ है Usemin हैंडल के बाद से कोई विन्यास की जरूरत नहीं है।

स्रोत

2013-10-15 13:06:33 imjared

+0

के साथ अपडेट किया गया है यदि उपयोगकर्ता आपके लिए कॉन्फ़िगरेशन को संभालता है तो यह आपके लिए निष्पादन भी नहीं करता है? –

+0

मेरा अनुमान है क्योंकि यह एक मॉड्यूलर कार्य है। यदि concat/uglify पहले से मौजूद है, तो मुझे लगता है कि प्रोजेक्ट रखरखाव करने वाले को पहिया को फिर से शुरू करने की आवश्यकता नहीं दिखाई दे रही थी। – imjared

+1

यह टूल द्वारा जेनरेट किए गए एक के साथ आपकी कॉन्फ़िगरेशन को विलय करता है, मुझे लगता है कि ऐसा करता है ताकि आप इसे अभी भी ट्विक कर सकें। शायद अपेक्षित व्यवहार यह है कि इसे उत्पन्न विन्यास निष्पादित करना चाहिए। आप इसे 'concat: जेनरेट' के साथ चला सकते हैं, 'uglify: जेनरेटेड', 'cssmin: जेनरेट', –

संबंधित मुद्दे

 संबंधित मुद्दे