Grunt bower_concat 不添加 css

Question

我尝试使用 bower_concat https://github.com/sapegin/grunt-bower-concat 从我的 bower_components 编译我所有的 css。 js 编译正常，但 css 永远不会被创建。这是我这部分的 grunt 文件代码：

  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

我的问题是 css 目录中缺少一个文件

pkg.name.less（这个需要和定义的包名匹配 package.json) 并且需要包含这个：@import "auto_imports.less";

这基本上包括由我的 g运行t 文件 (auto_imports.less) 自动生成的包含，它有一堆包含（您的应用程序中可能有的每个 .less 文件）并且 auto_imports.less

而且我还需要运行这个：

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

在 bower_concat 之前，以便它可以获得所有第 3 方库，这就是为什么 bower_concat 对我不起作用的原因至少css。我结束了 re-writing 整个 G运行t 文件，所以如果复制它，它应该可以正常工作。我用它为我未来的项目制作了一个模板 lol

这是完整的 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 2

grunt-bower-concat (and grunt-wiredep）研究将各个包的 bower.json 的 main 字段中提到的文件捆绑在一起的概念。

最初没有任何规范定义应该包含在 bower.json 文件的 main 字段中的内容。做出这个选择完全取决于包的创建者。然后 Define main as the entry-point files, one-per-filetype came (This lead to known libraries like Bootstrap and Font Awesome 从 main 字段中删除 CSS 文件，渲染工具如 grunt-bower-concat 在没有手动覆盖的情况下无用）

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

因此，您面临的问题的可能原因可能与您尝试包含的 bower 包的 main 字段未引用 CSS 文件这一事实有关。

Answer 3

我根据页面底部的 config example 修复了它，即在所有参数中添加目的地，创建 dest 参数并单独设置 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。

Grunt bower_concat 不添加 css

Grunt bower_concat not adding css

javascript

gruntjs

bower