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）を見たとき、うまくいけば、それは理にかなって、フルGruntfile.jsです。ここ笑私の将来のプロジェクトのためにそれのうち

をテンプレートを作りましたそれぞれのパッケージのbower.jsonのmainフィールドに記載されているファイルをバンドルする概念。

最初は、bower.jsonファイルのmainフィールドに何を含めるべきかを定義する仕様はありませんでした。この選択をするのは、パッケージ作成者の責任でした。その後Define main as the entry-point files, one-per-filetypeはあなたが問題の原因したがって

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

（手動ずに作男-亭化連結のようなツール役に立たないレンダリング、mainフィールドからCSSファイルを削除BootstrapとFont Awesomeのような知られているライブラリにこのリードを）来ましたあなたが含めることを試みているbowerパッケージのmainフィールドがCSSファイルを参照していないという事実に関連しています。

Answer 2

私の問題は、私はCSSディレクトリ内の1つのファイル

1. pkg.name.lessを（これは package.jsonで定義されたパッケージ名と一致する必要があります）欠落しているとする必要がされたということでしたこのが含まれています@ import "auto_imports.less";
これは基本的に（あなたのアプリを持っているかもしれません各.lessファイル）を含んでいるの束を持っている私のうなり声ファイル（auto_imports.less）によって生成された自動含んが含ま

そしてauto_imports.less

そして、それは、すべてのサードパーティのライブラリを得ることができるように

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

bower_concat前に、とbower_concatが少なくともCSSの私のために働いていなかった理由は次のとおりです。また、私はこれを実行するために必要な。私はGruntfile全体を書き直してしまったので、コピーすればうまくいくはずです。私が上で動作し、あなたがそれ

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

私は代わりDESTパラメータを作成し、個別のJS/CSSの送信先を設定し、すべてのパラメータに宛先を追加して、ページの下部にconfig exampleに応じてそれを修正：のよう

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を指摘しています。