Grunt bower_concat nicht hinzufügen css

Question

Ich versuche, alle meine CSS aus meinem bower_components mit bower_concat https://github.com/sapegin/grunt-bower-concat zu kompilieren. Die js kompiliert gut, aber die CSS wird nie erstellt. Hier ist meine Grunzen Datei Code für diesen Abschnitt:

bower_concat: { 
      all: { 
       dest: '<%= pkg.dist_dir %>/lib/_bower.js', 
       cssDest: '<%= pkg.dist_dir %>/lib/_bower.css', 
       dependencies: { 
        // 'angular': '' 
       }, 
       exclude: [ 
        'jquery' 
       ], 
       bowerOptions: { 
        relative: false 
       }, 
       includeDev: true 
      } 
     }, 

Es schafft nie „_bower.css“. Warum funktioniert nicht so, wie es sollte?

Answer 1

grunt-bower-concat (und grunt-wiredep auch) arbeiten auf der Konzept der Bündelung von Dateien, die im Feld main der bower.json des jeweiligen Pakets erwähnt werden.

Anfangs gab es keine Spezifikation, die definierte, was in main Feld der bower.json Datei enthalten sein sollte. Es war einzig und allein Sache des Paketerstellers, diese Wahl zu treffen. Dann kam Define main as the entry-point files, one-per-filetype (diese führen zu bekannten Bibliotheken wie Bootstrap und Font Awesome die CSS-Dateien aus main Feld zu entfernen, Rendering-Werkzeugen wie Grunzen-Lauben concat nutzlos ohne Handbetätigung)

mainFiles: { 
    package: [ 'path/to/its/file.css' ] 
} 

Daher ist eine wahrscheinliche Ursache des Problems Sie sind Die Ausrichtung hängt mit der Tatsache zusammen, dass das Feld main des Bower-Pakets, das Sie einfügen möchten, nicht auf die CSS-Dateien verweist.

Answer 2

Mein Problem war, dass ich ein Dateien im CSS-Verzeichnis fehlt

1. pkg.name.less (Dies muss den Paketnamen in package.json definiert übereinstimmen) und muss dies enthält: @ importiere "auto_imports.less";

Dies beinhaltet im Wesentlichen das Auto von meinem Grunzen-Datei (auto_imports.less) erzeugt sind, die ein Bündel umfasst hat (jede .Weniger Datei, die Sie vielleicht in Ihrem app) Und auto_imports.less

Und auch brauchte ich dies auszuführen:

bower:  { 
    install: { 
     options: { 
      cleanTargetDir: true, 
      targetDir:  '<%= pkg.dist_dir %>/lib' 
     } 
    } 
}, 

Vor bower_concat so, dass es all 3rd-Party-Bibliotheken zu bekommen, und deshalb bower_concat nicht für mich zumindest für die CSS arbeitet. Ich habe die ganze Gruntfile neu geschrieben, also wenn es kopiert wird, sollte es gut funktionieren. Ich habe eine Vorlage aus der es für mein zukünftiges Projekt lol

Hier wird die volle Gruntfile.js, hoffentlich macht es Sinn, wenn man sich anschaut, es

module.exports = function (grunt) { 
    require('time-grunt')(grunt); 
    require('load-grunt-tasks')(grunt); 
    grunt.initConfig({ 
     //define pkg object and point to package.json 
     pkg:   grunt.file.readJSON('package.json'), 
     //define notifications 
     notify_hooks: { 
      options: { 
       enabled:     true, 
       max_jshint_notifications: 5, // maximum number of notifications from jshint output 
       title:     "<%= pkg.name %>", // defaults to the name in package.json, or will use project directory's name 
       success:     false, // whether successful grunt executions should be notified automatically 
       duration:     3 // the duration of notification in seconds, for `notify-send only 
      } 
     }, 
     notify:  { 
      build: { 
       options: { 
        title: '<%= pkg.name %> Build', 
        message: 'Build Completed' 
       } 
      }, 
      js: { 
       options: { 
        message: 'Completed JS Build' 
       } 
      }, 
      css: { 
       options: { 
        message: 'Completed CSS Build' 
       } 
      }, 
      bower: { 
       options: { 
        message: 'Completed Bower' 
       } 
      } 
     }, 
     //define clean task 
     clean:  { 
      bower: ["<%= bower.install.options.targetDir %>", "bower_components"] 
     }, 
     //define bower task 
     bower:  { 
      install: { 
       options: { 
        cleanTargetDir: true, 
        targetDir:  '<%= pkg.dist_dir %>/lib' 
       } 
      } 
     }, 
     bower_concat: { 
      all: { 
       dest:   '<%= pkg.dist_dir %>/lib/_bower.js', 
       cssDest:  '<%= pkg.dist_dir %>/lib/_bower.css', 
       bowerOptions: { 
        relative: false 
       }, 
       dependencies: { 
        'angular': ['jquery', 'moment'], 
        'datePicker': ['moment'] 
       }, 
       mainFiles: { 
        'ng-flags': 'src/directives/ng-flags.js' 
       }, 
       includeDev: true 
      } 
     }, 
     //define concat task to concat all js files 
     concat:  { 
      js: { 
       options: { 
        separator: '\n' 
       }, 
       src:  [ 
        'js/app/app.js', 'js/**/*.js' 
       ], 
       dest: '<%= pkg.dist_dir %>/<%= pkg.name %>.js' 
      } 
     }, 
     uglify:  { 
      options: { 
       banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n', 
       mangle: false 
      }, 
      js:  { 
       files: { 
        '<%= pkg.dist_dir %>/<%= pkg.name %>.min.js': ['<%= concat.js.dest %>'] 
       } 
      } 
     }, 
     jshint:  { 
      files: ['Gruntfile.js', 'js/**/*.js', '!js/lib/*.js'], 
      options: { 
       globals: { 
        jQuery: true, 
        console: true, 
        module: true 
       } 
      } 
     }, 
     //define less task 
     less:   { 
      all: { 
       options: { 
        paths: ["css"] 
       }, 
       files: { 
        "<%= pkg.dist_dir %>/<%= pkg.name %>.css": "css/<%= pkg.name %>.less" 
       } 
      } 
     }, 
     less_imports: { 
      options: { 
       inlineCSS: false 
      }, 
      all:  { 
       src: [ 'css/**/*.less', '!<%= less_imports.all.dest %>', '!css/<%= pkg.name %>.less'], 
       dest: 'css/auto_imports.less' 
      } 
     }, 
     //define the watch task. (documented at https://github.com/gruntjs/grunt-contrib-watch) 
     watch:  { 
      js:   { 
       files: ['<%= concat.js.src %>'], 
       tasks: ['build_js'] 
      }, 
      css:  { 
       files: ['css/**/*.less'], 
       tasks: ['build_css'] 
      }, 
      grunt_file: { 
       files: ['Gruntfile.js'], 
       tasks: ['build'] 
      } 
     } 
    }); 

    //bower tasks 
    grunt.registerTask('bower_install', [ 'clean:bower', 'bower', 'bower_concat', 'notify:bower']); 

    grunt.registerTask('build_css', ['less_imports', 'less', 'notify:css']); 
    grunt.registerTask('build_js', ['jshint', 'concat:js', 'uglify:js', 'notify:js']); 

    // the default task can be run just by typing "grunt" on the command line 
    grunt.registerTask('build', [ 
     'bower_install', 'build_css', 'build_js' 
    ]); 
    grunt.registerTask('default', ['build']); 

    // Start the notification task. 
    grunt.task.run('notify_hooks'); 

}; 

Answer 3

I fixed es gemäß der config example am unteren Rand der Seite, dass stattdessen die Ziele in dem alle Parameter hinzufügen, erstellen die dest Parameter und JS/CSS Ziele individuell einstellen:

bower_concat: { 
    all: { 
    dest: { 
     'js': 'build/_bower.js', 
     'css': 'build/_bower.css' 
    } 
    } 
} 

Answer 4

Ab 1.0.0 freigeben, gibt es eine neue API und cssDest entfernt wurde:

Concatenation of any file types 

The new API looks like this: 

bower_concat: { 
    main: { 
     dest: { 
      js: 'build/_bower.js', 
      scss: 'build/_bower.scss', 
      coffee: 'build/_bower.coffee' 
     }, 
     // ... 
    } 
} 
The old dest as a string ({dest: 'build/_bower.js'}) is still working but the cssDest was removed. 

Siehe Release notes here.