Grunt usemin:未创建连接的 JavaScript 文件

Question

我正在我的Yeoman生成器中使用usemin任务。在HTML中，它看起来工作正常，因为单独的JavaScript文件被单个文件的链接所取代。但是，尚未创建所引用的文件。我是否缺少设置？

咕噜

咕噜.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'
    ]);
};

索引.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:
  {}

结果在 （HTML）： <script src="assets/js/main.js"></script>但没有创建主文件.js

Answer 1

在使用min之后，您将需要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 -->

我的咕噜声任务是这样的：

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

你只需要将concat和uglify安装到你的项目中，不需要配置，因为usemin处理它。