0

Ich bin derzeit mit Angular Bootstrap Colorpicker (https://github.com/buberdds/angular-bootstrap-colorpicker)Angular Bootstrap Colorpicker funktioniert nicht in minimierte Version

Es funktioniert gut, wenn ich es lokal ausgeführt. Wenn ich jedoch Grunt verwende, um die Dateien zu erstellen, funktioniert der Colorpicker nicht mehr. Es wirft keine Fehler, aber es tut nichts, wenn der Benutzer auf den Colorpicker klickt.

lege ich die 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' 
       } 
      } 
     } 

Jede mögliche Hilfe geschätzt wird. Vielen Dank!

Antwort

0

Lassen Sie uns Ihren Build überprüfen, um zu sehen, was der Grunt für uns abruft.

Wenn Sie diese 2 Parameter --debug und --stack

0

Ich hatte das gleiche Problem gestellt bauen. Ich nehme an, Sie in der index.html einen Link zur CSS und an das Modul haben, so etwas wie:

link rel = "stylesheet" href =“../ bower_components/Winkel-Bootstrap-colorpicker/css/Colorpicker .min.css "

und

script src =" ../ bower_components/Winkel-Bootstrap-colorpicker/js/Bootstrap-Colorpicker-module.min.js“

Tatsächlich sind die minimierte Versionen funktionieren nicht richtig. Deshalb habe ich ".min" aus index.html entfernt und normale Dateigrößen gebunden:

Link rel = "Stylesheet" href = "../ bower_components/eckig-bootstrap-colorpicker/css/colorpicker.css"

und

script src = "../ bower_components/Winkel-Bootstrap-colorpicker/js/Bootstrap-Colorpicker-module.js"

Nichts anderes und es funktionierte für mich.

Verwandte Themen