Question

我目前正在使用Angular Bootstrap Colorpicker（https://github.com/buberdds/angular-bootstrap-colorpicker）

我在本地运行时工作正常。但是，当我使用Grunt构建文件时，colorpicker停止工作。它不会抛出任何错误，但是当用户单击颜色选择器时它不会执行任何操作。

我附上了Gruntfile.js：

// Project configuration.
    grunt.initConfig({
        connect: {
            main: {
                options: {
                    port: 9001
                }
            }
        },
        watch: {
            main: {
                options: {
                    livereload: true,
                    livereloadOnError: false,
                    spawn: false
                },
                files: [createFolderGlobs(['*.js', '*.less', '*.html']), '!_SpecRunner.html', '!.grunt'],
                tasks: [] //all the tasks are run dynamically during the watch event handler
            }
        },
        jshint: {
            main: {
                options: {
                    jshintrc: '.jshintrc'
                },
                src: createFolderGlobs('*.js')
            }
        },
        clean: {
            before: {
                src: ['dist', 'temp']
            },
            after: {
                src: ['temp']
            }
        },
        less: {
            production: {
                options: {
                },
                files: {
                    'temp/app.css': 'app.less'
                }
            }
        },
        ngtemplates: {
            main: {
                options: {
                    module: pkg.name,
                    htmlmin: '<%= htmlmin.main.options %>'
                },
                src: [createFolderGlobs('*.html'), '!index.html', '!_SpecRunner.html'],
                dest: 'temp/templates.js'
            }
        },
        copy: {
            main: {
                files: [
                  { src: ['img/**'], dest: 'dist/' },
                  { src: ['bower_components/font-awesome/fonts/**'], dest: 'dist/', filter: 'isFile', expand: true },
                  { src: ['bower_components/bootstrap/fonts/**'], dest: 'dist/', filter: 'isFile', expand: true },
                  { src: ['deploy.json'], dest: 'dist/', filter: 'isFile', expand: true },
                  { src: ['common/font/**'], dest: 'dist/', filter: 'isFile', expand: true }

                ]
            }
        },
        dom_munger: {
            read: {
                options: {
                    read: [
                      { selector: 'script[data-concat!="false"]', attribute: 'src', writeto: 'appjs' },
                      { selector: 'link[rel="stylesheet"][data-concat!="false"]', attribute: 'href', writeto: 'appcss' }
                    ]
                },
                src: 'index.html'
            },
            update: {
                options: {
                    remove: ['script[data-remove!="false"]', 'link[data-remove!="false"]'],
                    append: [
                      { selector: 'body', html: '<script src="app.full.js"></script>' },
                      { selector: 'head', html: '<link rel="stylesheet" href="app.full.min.css">' }
                    ]
                },
                src: 'index.html',
                dest: 'dist/index.html'
            }
        },
        cssmin: {
            main: {
                src: ['temp/app.css', '<%= dom_munger.data.appcss %>'],
                dest: 'dist/app.full.min.css'
            }
        },
        concat: {
            main: {
                src: ['<%= dom_munger.data.appjs %>', '<%= ngtemplates.main.dest %>'],
                dest: 'temp/app.full.js'
            }
        },
        ngAnnotate: {
            main: {
                src: 'temp/app.full.js',
                dest: 'dist/app.full.js'
            }
        },
        uglify: {
            main: {
                src: 'temp/app.full.js',
                dest: 'dist/app.full.min.js'
            }
        },
        htmlmin: {
            main: {
                options: {
                    collapseBooleanAttributes: true,
                    collapseWhitespace: true,
                    removeAttributeQuotes: true,
                    removeComments: true,
                    removeEmptyAttributes: true,
                    removeScriptTypeAttributes: true,
                    removeStyleLinkTypeAttributes: true
                },
                files: {
                    'dist/index.html': 'dist/index.html'
                }
            }
        }

任何帮助将不胜感激。谢谢！

Answer 1

让我们检查你的Build，看看grunt检索给我们的是什么。

构建时将这两个参数 - debug 和 - stack

Answer 2

我遇到了同样的问题。我想你在index.html中有一个指向css和模块的链接，如：

link rel =＆＃34; stylesheet＆＃34; HREF =＆＃34; ../ bower_components /角自举-颜色拾取/ CSS / colorpicker.min.css＆＃34;

和

script src =＆＃34; ../ bower_components / angular-bootstrap-colorpicker / js / bootstrap-colorpicker-module.min.js＆＃34;

事实上，缩小的版本不能正常工作。这就是为什么我删除＆＃34; .min＆＃34;来自index.html和绑定正常大小的文件：

link rel =＆＃34; stylesheet＆＃34; HREF =＆＃34; ../ bower_components /角自举-颜色拾取/ CSS / colorpicker.css＆＃34;

和

script src =＆＃34; ../ bower_components / angular-bootstrap-colorpicker / js / bootstrap-colorpicker-module.js＆＃34;

没有别的，它对我有用。

Angular Bootstrap Colorpicker在Minified Version中不起作用

2 个答案: