2013-10-14 13 views
6

私はYeomanジェネレータでというuseminタスクを使用しています。 HTMLでは、別々のJavaScriptファイルが1つのファイルへのリンクに置き換えられているので、うまくいきました。ただし、参照されているファイルは作成されていません。私は設定が欠けていますか?説明文:連結されたJavaScriptファイルが作成されていません

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

端末処理メッセージ(HTMで

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

結果L):<script src="assets/js/main.js"></script>ただし、main.jsファイルが作成されました

+0

あなたはGruntfile全体を表示しません。コピーと連結のタスクがありますか?おそらく、これは参考になるでしょう:http://stackoverflow.com/a/19130830/557612 – steveax

+0

完全なGruntfileで更新されました – Fisu

答えて

13

あなたはuseminの後にconcatおよびminタスクが必要になります。 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 --> 

と私の面倒な作業はこれです:あなたは、単に連結&がプロジェクトにインストールさuglifyれている必要があり

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

、ありますuseminがそれを処理するので、設定は必要ありません。

+0

useminがあなたのために設定を処理するのであれば、それはあなたのために実行もしませんか? –

+0

私の推測は、モジュラーな作業だからです。もしconcat/uglifyが既に存在するならば、私は、プロジェクトのメンテナーたちが、言い換えれば、ホイールを再発明する必要性を見ていないと考えています。 – imjared

+1

これはあなたの設定をツールによって生成されたものとマージします。私はそうしているので、まだそれを微調整できると思います。予想される動作は、生成された構成を実行する必要があるということです。 'concat:generated'、 'uglify:generated'、 'cssmin:generated'を使用して自分で実行できます。 –

関連する問題