Grunt bower_concat non aggiungendo css

Question

Provo a compilare tutti i miei css dai miei bower_components usando bower_concat https://github.com/sapegin/grunt-bower-concat. Il js si compila bene ma il css non viene mai creato. Ecco il mio codice file grunt per questa sezione:

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 
      } 
     }, 

Non crea mai "_bot.css". Perché non funziona come dovrebbe?

Answer 1

grunt-bower-concat (e grunt-wiredep pure) I lavori per la concetto di raggruppare insieme i file menzionati nel campo main di bower.json del rispettivo pacchetto.

Inizialmente non esistevano specifiche che definissero ciò che dovrebbe essere incluso nel campo main del file bower.json. Spetta unicamente al creatore del pacchetto fare questa scelta. Poi Define main as the entry-point files, one-per-filetype venuto (Questo ha portato alle biblioteche noti come Bootstrap e Font Awesome rimozione dei file CSS da main campo, strumenti come grugnito-gazebo-concat inutili senza comando manuale di rendering)

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

Pertanto una probabile causa del problema si è il fronte sarebbe correlato al fatto che il campo main del pacchetto bower che si sta tentando di includere non fa riferimento ai file CSS.

Answer 2

Il mio problema era che mi mancava un file nella directory css

1. pkg.name.less (Questo deve corrispondere al nome del pacchetto definito in package.json) e deve contiene questo: @ import "auto_imports.less";

Questo include fondamentalmente il includere automaticamente generata dal mio file grugnito (auto_imports.less), che ha un sacco di include (ogni file .less si potrebbe avere nella vostra app) E auto_imports.less

E inoltre avevo bisogno di eseguire questo:

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

Prima bower_concat in modo che si può ottenere tutte le biblioteche 3rd party, ed è per questo bower_concat non funzionava per me, almeno per il css. Ho finito per riscrivere l'intero Gruntfile quindi, se lo copi, dovrebbe funzionare bene. Ho fatto un modello di fuori di esso per il mio progetto futuro lol

Ecco la piena Gruntfile.js, si spera ha senso quando la si guarda

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

ho fissato secondo il config example nella parte inferiore della pagina, che viene invece aggiungendo le destinazioni il parametro all, creando il parametro di destinazione e impostando js/destinazioni css singolarmente:

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

Answer 4

partire rilascio 1.0.0, v'è una nuova API e cssDest è stata rimossa:

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. 

See note di rilascio here.