咕unt的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字段應包含的內容。 做出此選擇完全取決於包裝創建者。 然后將main定義為入口點文件，每個文件類型一個 （這導致已知的庫（如Bootstrap和Font Awesome）從main字段中刪除CSS文件，使諸如grunt-bower-concat之類的工具在沒有手動覆蓋的情況下無法使用）

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

因此，您可能會遇到的問題的原因可能與以下事實有關：您嘗試包含的bower包的main字段未引用CSS文件。

Answer 2

我根據頁面底部的配置示例修復了該問題，即在all參數中添加了目標，創建了dest參數並分別設置了js / css目標：

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

Answer 3

從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.

請參閱此處的發行說明。

Answer 4

我的問題是我在css目錄中缺少一個文件

1. pkg.name.less（這需要與package.json中定義的包名稱匹配），並且需要包含以下內容：@import“ auto_imports.less”;

這基本上包括由我的咕unt聲文件（auto_imports.less）自動生成的include，其中包含一堆includes（您可能在應用程序中包含的每個.less文件）和auto_imports.less

而且我還需要運行以下命令：

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

在bower_concat之前，以便它可以獲取所有第3方庫，這就是為什么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');

};