Grunt bower_concat不添加css

Question

我尝试使用bower_concat https://github.com/sapegin/grunt-bower-concat来编译我的bower_components中的所有css。 js编译得很好，但是css永远不会被创建。这里是我的这个部分的咕噜文件代码：

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

它永远不会创建“_bower.css”。为什么没有按照应有的方式工作？

Answer 1

grunt-bower-concat（和grunt-wiredep也一样）的工作将各个软件包的bower.json的main字段中提到的文件捆绑在一起的概念。

最初没有定义bower.json文件的main字段中应该包含哪些内容的规范。这完全取决于包创建者做出这个选择。然后Define main as the entry-point files, one-per-filetype出来（这导致已知的库，例如Bootstrap和Font Awesome从main场移除CSS文件，使像咕噜鲍尔-CONCAT工具没用不带手动应急）

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

因此，您是问题的一个可能的原因面临的问题与您试图包含的bower软件包的main字段未引用CSS文件有关。

Answer 2

我的问题是，我是失踪的CSS目录中的一个文件

1. pkg.name.less（这需要匹配 的package.json定义的包的名称），需要包含此：@导入“auto_imports.less”;

这基本上包括包括有一堆包括由我的呼噜声文件（auto_imports.less）自动生成（每个.LESS文件，你可能在你的应用程序） 而auto_imports.less

而且还我需要运行这个命令：

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

之前bower_concat，以便它可以得到所有的第三方库，这就是为什么bower_concat不是为我工作至少在CSS。我最终重写了整个Gruntfile，所以如果复制它，它应该可以正常工作。我做了一个模板出来的，是为我今后的项目笑

以下是完整的Gruntfile.js，希望这是有道理的，当你看它

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

我根据config example在页面底部固定它，即，而不是添加在所有参数的目标，创建目标参数和分别设定JS/CSS目的地：

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

Answer 4

作为1.0.0版本，有一个新的API和cssDest已被删除：

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. 

参见发行说明here。