Подтвердить что ты не робот

Grunt включает bower_components в блоке usemin

У меня есть следующий блок на моей странице index.html..

<!-- build:css(.tmp) styles/style.css -->
    <link rel="stylesheet" href="bower_components/normalize-css/normalize.css">
    <link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

Файлы css существуют правильно в моей структуре приложения, но когда я запускаю "grunt build", в результирующий файл styles/style.css входит только CSS из styles/main.css.

Я предполагаю, что мне нужно сказать Grunt, чтобы посмотреть в каталог bower_components для файлов CSS? Но я не уверен, как это сделать?

Копия моего gruntfile.js ниже...

    grunt.initConfig({
      yeoman: yeomanConfig,
      watch: {
        styles: {
          files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
          tasks: ['copy:styles', 'autoprefixer']
        },
        livereload: {
          options: {
            livereload: LIVERELOAD_PORT
          },
          files: [
            '<%= yeoman.app %>/{,*/}*.html',
            '.tmp/styles/{,*/}*.css',
            '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
            '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
          ]
        }
      },
      autoprefixer: {
        options: ['last 1 version'],
        dist: {
          files: [{
            expand: true,
            cwd: '.tmp/styles/',
            src: '{,*/}*.css',
            dest: '.tmp/styles/'
          }]
        }
      },
      connect: {
        options: {
          port: 9000,
          hostname: 'localhost'
        },
        livereload: {
          options: {
            middleware: function (connect) {
              return [
                lrSnippet,
                mountFolder(connect, '.tmp'),
                mountFolder(connect, yeomanConfig.app)
              ];
            }
          }
        },
        test: {
          options: {
            middleware: function (connect) {
              return [
                mountFolder(connect, '.tmp'),
                mountFolder(connect, 'test')
              ];
            }
          }
        },
        dist: {
          options: {
            middleware: function (connect) {
              return [
                mountFolder(connect, yeomanConfig.dist)
              ];
            }
          }
        }
      },
      open: {
        server: {
          url: 'http://localhost:<%= connect.options.port %>'
        }
      },
      clean: {
        dist: {
          files: [{
            dot: true,
            src: [
              '.tmp',
              '<%= yeoman.dist %>/*',
              '!<%= yeoman.dist %>/.git*'
            ]
          }]
        },
        server: '.tmp'
      },
      jshint: {
        options: {
          jshintrc: '.jshintrc'
        },
        all: [
          'Gruntfile.js',
          '<%= yeoman.app %>/scripts/{,*/}*.js'
        ]
      },
      rev: {
        dist: {
          files: {
            src: [
              '<%= yeoman.dist %>/scripts/{,*/}*.js',
              '<%= yeoman.dist %>/styles/{,*/}*.css',
              '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
              '<%= yeoman.dist %>/styles/fonts/*'
            ]
          }
        }
      },
      useminPrepare: {
        html: '<%= yeoman.app %>/index.html',
        options: {
          dest: '<%= yeoman.dist %>'
        }
      },
      usemin: {
        html: ['<%= yeoman.dist %>/{,*/}*.html'],
        css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
        options: {
          dirs: ['<%= yeoman.dist %>']
        }
      },
      imagemin: {
        dist: {
          files: [{
            expand: true,
            cwd: '<%= yeoman.app %>/images',
            src: '{,*/}*.{png,jpg,jpeg}',
            dest: '<%= yeoman.dist %>/images'
          }]
        }
      },
      svgmin: {
        dist: {
          files: [{
            expand: true,
            cwd: '<%= yeoman.app %>/images',
            src: '{,*/}*.svg',
            dest: '<%= yeoman.dist %>/images'
          }]
        }
      },
      cssmin: {

      },
      htmlmin: {
        dist: {
          options: {

          },
          files: [{
            expand: true,
            cwd: '<%= yeoman.app %>',
            src: ['*.html', 'views/*.html'],
            dest: '<%= yeoman.dist %>'
          }]
        }
      },
      // Put files not handled in other tasks here
      copy: {
        dist: {
          files: [{
            expand: true,
            dot: true,
            cwd: '<%= yeoman.app %>',
            dest: '<%= yeoman.dist %>',
            src: [
              '*.{ico,png,txt}',
              '.htaccess',
              'bower_components/**/*',
              'images/{,*/}*.{gif,webp}',
              'styles/fonts/*'
            ]
          }, {
            expand: true,
            cwd: '.tmp/images',
            dest: '<%= yeoman.dist %>/images',
            src: [
              'generated/*'
            ]
          }]
        },
        styles: {
          expand: true,
          cwd: '<%= yeoman.app %>/styles',
          dest: '.tmp/styles/',
          src: '{,*/}*.css'
        }
      },
      concurrent: {
        server: [
          'copy:styles'
        ],
        test: [
          'copy:styles'
        ],
        dist: [
          'copy:styles',
          'imagemin',
          'svgmin',
          'htmlmin'
        ]
      },
      karma: {
        unit: {
          configFile: 'karma.conf.js',
          singleRun: true
        }
      },
      cdnify: {
        dist: {
          html: ['<%= yeoman.dist %>/*.html']
        }
      },
      ngmin: {
        dist: {
          files: [{
            expand: true,
            cwd: '<%= yeoman.dist %>/scripts',
            src: '*.js',
            dest: '<%= yeoman.dist %>/scripts'
          }]
        }
      },
      uglify: {
        dist: {
          files: {
            '<%= yeoman.dist %>/scripts/scripts.js': [
              '<%= yeoman.dist %>/scripts/scripts.js'
            ]
          }
        }
      }
    });
4b9b3361

Ответ 1

Вот один из решений.

copy: {

  ...

  styles: {
    expand: true,
    cwd: '<%= yeoman.app %>',
    dest: '.tmp/',
    src: [
      'styles/{,*/}*.css',
      'bower_components/**/*.css'
    ]
  }

Проблема возникает из-за того, что normalize.css не существует в каталоге .tmp, хотя файл index.html говорит <!-- build:css(.tmp) styles/style.css -->. Поэтому вам нужно скопировать файл CSS (фактически все файлы CSS в каталоге bower_components в приведенном выше случае) в каталог .tmp.

В качестве альтернативы вы можете использовать оператор @import в стилях /main.css(или main.scss?).

Ответ 2

Я решил это в самом HTML:

    <!-- build:css styles/modules.css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="bower_components/animate.css/animate.css">
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="not_bower/foo/plugin.css">
    <!-- endbuild -->

    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->

Вам просто нужно создать два файла, один с "внешним" css вне вашей папки app/css, а другой с вашим приложением CSS.

С помощью этого решения вам не нужно касаться Gruntfile.js.

Надеюсь, что это поможет.

Ответ 3

Генераторы Yeoman Angular для версии позже 0.9.0 используют grunt-wiredep для автоматизации впрыскивания зависимостей бауэр в app/index.html. wiredep смотрит на конфигурации bower.json каждой из ваших зависимостей в bower_components и добавляет hrefs к app/index на основе основного свойства.

Например, у вас может быть зависимость jquery-ui с файлом bower.json, который выглядит следующим образом:

{
  "name": "jquery-ui",
  "version": "1.11.1",
  "main": [
    "jquery-ui.js"
  ], ...
}

Затем, когда вы запускаете grunt, wiredep будет автоматически вводить "jquery-ui.js" в ваш файл app/index.html. Neato!

Проблема заключается в том, что может отсутствовать зависимость. Если вы используете bower для управления каталогом bower_components, вы не хотите изменять файл bower.json в bower_components/jquery-ui, так как любые изменения будут удалены, если вам когда-либо понадобится перестроить ваши зависимости.

Вместо этого вы можете переопределить основное свойство в своем приложении bower.json. Вместо этого вы можете использовать переопределить столбик:

  "overrides": {
    "jquery-ui": {
      "main": [
        "jquery-ui.js",
        "this/was/missing/jquery-ui.css"
      ]
    }
  }

Это позволяет вам сохранить переопределения вашего проекта, где они принадлежат, в вашей собственной конфигурации приложения.

Ответ 4

Вы можете попробовать следующее:

<!-- build:css({app,.tmp}) styles/style.css -->
    <link rel="stylesheet" href="bower_components/normalize-css/normalize.css">
    <link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

Подробнее см. эту проблему.