Grunt usemin没有在HTML中生成正确的路径

时间:2014-04-10 20:33:51

标签: gruntjs yeoman

我正在使用Yeoman和grunt,并且在运行grunt构建任务时遇到问题。一切都没有错误,但index.html我正在使用我们不更改正文底部包含的javascript文件的目录路径。

    <!-- build:js scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/jquery.min.js"></script>
    <script src="bower_components/bootstrap-sass/dist/js/bootstrap.min.js"></script>
    <script src="bower_components/stickUp/stickUp.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

这是我在Gruntfile.js中的代码供参考:

    grunt.initConfig({
    // configurable paths
    yeoman: {
        app: 'app',
        dist: 'dist'
    },
    watch: {
        compass: {
            files: ['<%= yeoman.app %>/scss/{,*/}*.{scss,sass}'],
            tasks: ['compass:server', 'autoprefixer']
        },
        styles: {
            files: ['<%= yeoman.app %>/css/{,*/}*.css'],
            tasks: ['copy:styles', 'autoprefixer']
        },
        livereload: {
            options: {
                livereload: '<%= connect.options.livereload %>'
            },
            files: [
                '<%= yeoman.app %>/*.html',
                '.tmp/styles/{,*/}*.css',
                '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
                '<%= yeoman.app %>/images/{,*/}*.{gif,jpeg,jpg,png,svg,webp}'
            ]
        }
    },
    connect: {
        options: {
            port: 9000,
            livereload: 35729,
            // change this to '0.0.0.0' to access the server from outside
            hostname: 'localhost'
        },
        livereload: {
            options: {
                open: true,
                base: [
                    '.tmp',
                    '<%= yeoman.app %>'
                ]
            }
        },
        test: {
            options: {
                base: [
                    '.tmp',
                    'test',
                    '<%= yeoman.app %>'
                ]
            }
        },
        dist: {
            options: {
                open: true,
                base: '<%= yeoman.dist %>',
                livereload: false
            }
        }
    },
    clean: {
        dist: {
            files: [{
                dot: true,
                src: [
                    '.tmp',
                    '<%= yeoman.dist %>/*',
                    '!<%= yeoman.dist %>/.git*'
                ]
            }]
        },
        server: '.tmp'
    },
    jshint: {
        options: {
            jshintrc: '.jshintrc',
            reporter: require('jshint-stylish')
        },
        all: [
            'Gruntfile.js',
            '<%= yeoman.app %>/scripts/{,*/}*.js',
            '!<%= yeoman.app %>/scripts/vendor/*',
            'test/spec/{,*/}*.js'
        ]
    },
    mocha: {
        all: {
            options: {
                run: true,
                urls: ['http://<%= connect.test.options.hostname %>:<%= connect.test.options.port %>/index.html']
            }
        }
    },
    compass: {
        options: {
            sassDir: '<%= yeoman.app %>/scss',
            cssDir: '.tmp/styles',
            generatedImagesDir: '.tmp/images/generated',
            imagesDir: '<%= yeoman.app %>/images',
            javascriptsDir: '<%= yeoman.app %>/scripts',
            fontsDir: '<%= yeoman.app %>/styles/fonts',
            importPath: '<%= yeoman.app %>/bower_components',
            httpImagesPath: '/images',
            httpGeneratedImagesPath: '/images/generated',
            httpFontsPath: '/styles/fonts',
            relativeAssets: false,
            assetCacheBuster: false
        },
        dist: {
            options: {
                generatedImagesDir: '<%= yeoman.dist %>/images/generated'
            }
        },
        server: {
            options: {
                debugInfo: true
            }
        }
    },
    autoprefixer: {
        options: {
            browsers: ['last 1 version']
        },
        dist: {
            files: [{
                expand: true,
                cwd: '.tmp/styles/',
                src: '{,*/}*.css',
                dest: '.tmp/styles/'
            }]
        }
    },
    // not used since Uglify task does concat,
    // but still available if needed
    /*concat: {
        dist: {}
    },*/
    // not enabled since usemin task does concat and uglify
    // check index.html to edit your build targets
    // enable this task if you prefer defining your build targets here
    /*uglify: {
        dist: {}
    },*/
    'bower-install': {
        app: {
            html: '<%= yeoman.app %>/index.html',
            ignorePath: '<%= yeoman.app %>/'
        }
    },
    rev: {
        dist: {
            files: {
                src: [
                    '<%= yeoman.dist %>/scripts/{,*/}*.js',
                    '<%= yeoman.dist %>/styles/{,*/}*.css',
                    '<%= yeoman.dist %>/images/{,*/}*.{gif,jpeg,jpg,png,webp}',
                    '<%= yeoman.dist %>/styles/fonts/{,*/}*.*'
                ]
            }
        }
    },
    useminPrepare: {
        options: {
            dest: '<%= yeoman.dist %>'
        },
        html: '<%= yeoman.app %>/index.html'
    },
    usemin: {
        options: {
            assetsDirs: ['<%= yeoman.dist %>'],
            basedir: '<%= yeoman.dist %>',
            dirs: ['<%= yeoman.dist %>']
        },
        html: ['<%= yeoman.dist %>/**/*.html'],
        css: ['<%= yeoman.dist %>/styles/**/*.css'],
    },
    imagemin: {
        dist: {
            files: [{
                expand: true,
                cwd: '<%= yeoman.app %>/images',
                src: '{,*/}*.{gif,jpeg,jpg,png}',
                dest: '<%= yeoman.dist %>/images'
            }]
        }
    },
    svgmin: {
        dist: {
            files: [{
                expand: true,
                cwd: '<%= yeoman.app %>/images',
                src: '{,*/}*.svg',
                dest: '<%= yeoman.dist %>/images'
            }]
        }
    },
    cssmin: {
        // This task is pre-configured if you do not wish to use Usemin
        // blocks for your CSS. By default, the Usemin block from your
        // `index.html` will take care of minification, e.g.
        //
        //     <!-- build:css({.tmp,app}) styles/main.css -->
        //
        // dist: {
        //     files: {
        //         '<%= yeoman.dist %>/styles/main.css': [
        //             '.tmp/styles/{,*/}*.css',
        //             '<%= yeoman.app %>/styles/{,*/}*.css'
        //         ]
        //     }
        // }
    },
    htmlmin: {
        dist: {
            options: {
                /*removeCommentsFromCDATA: true,
                // https://github.com/yeoman/grunt-usemin/issues/44
                //collapseWhitespace: true,
                collapseBooleanAttributes: true,
                removeAttributeQuotes: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeOptionalTags: true*/
            },
            files: [{
                expand: true,
                cwd: '<%= yeoman.app %>',
                src: '*.html',
                dest: '<%= yeoman.dist %>'
            }]
        }
    },
    // Put files not handled in other tasks here
    copy: {
        dist: {
            files: [{
                expand: true,
                dot: true,
                cwd: '<%= yeoman.app %>',
                dest: '<%= yeoman.dist %>',
                src: [
                    '*.{ico,png,txt}',
                    '.htaccess',
                    'images/{,*/}*.{webp,gif}',
                    'styles/fonts/{,*/}*.*',
                    'scripts/{,*/}*.*'
                ]
            }]
        },
        styles: {
            expand: true,
            dot: true,
            cwd: '<%= yeoman.app %>/styles',
            dest: '.tmp/styles/',
            src: '{,*/}*.css'
        }
    },
    modernizr: {
        devFile: '<%= yeoman.app %>/bower_components/modernizr/modernizr.js',
        outputFile: '<%= yeoman.dist %>/bower_components/modernizr/modernizr.js',
        files: [
            '<%= yeoman.dist %>/scripts/{,*/}*.js',
            '<%= yeoman.dist %>/styles/{,*/}*.css',
            '!<%= yeoman.dist %>/scripts/vendor/*'
        ],
        uglify: true
    },
    concurrent: {
        server: [
            'compass',
            'copy:styles'
        ],
        test: [
            'copy:styles'
        ],
        dist: [
            'compass',
            'copy:styles',
            'imagemin',
            //'svgmin',
            'htmlmin'
        ]
    }
});

我一直在尝试不同的东西,但结果是一样的。在dist目录index.html中,javascript路径与开发目录中的路径保持一致,并且文件出现404错误。

任何可以引导我朝正确方向前进的人?

1 个答案:

答案 0 :(得分:0)

我不知道你在哪里加载咕噜声任务

看起来像这样 -

grunt.loadNpmTasks(&#39;咕噜-的contrib-丑化&#39); - 单个任务

或者您可以使用 -

需要(&#39;负载咕噜任务&#39)(咕噜); - 加载所有grunt任务

如果你的package.json

中有load-grunt -tasks

您的代码未被module.exports = function(grunt){}

包装

module.exports = function(grunt){     &#39;使用严格的&#39;;

您的代码

};