css – Grunt在usemin块中包含bower_components

前端之家收集整理的这篇文章主要介绍了css – Grunt在usemin块中包含bower_components前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的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”时,只有样式/ main.css中的CSS才包含在生成的styles / style.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: '{,dest: '.tmp/styles/'
          }]
        }
      },connect: {
        options: {
          port: 9000,hostname: 'localhost'
        },livereload: {
          options: {
            middleware: function (connect) {
              return [
                lrSnippet,mountFolder(connect,'.tmp'),yeomanConfig.app)
              ];
            }
          }
        },test: {
          options: {
            middleware: function (connect) {
              return [
                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/{,'<%= yeoman.dist %>/styles/{,'<%= yeoman.dist %>/images/{,svg}','<%= yeoman.dist %>/styles/fonts/*'
            ]
          }
        }
      },useminPrepare: {
        html: '<%= yeoman.app %>/index.html',options: {
          dest: '<%= yeoman.dist %>'
        }
      },usemin: {
        html: ['<%= yeoman.dist %>/{,*/}*.html'],css: ['<%= yeoman.dist %>/styles/{,options: {
          dirs: ['<%= yeoman.dist %>']
        }
      },imagemin: {
        dist: {
          files: [{
            expand: true,cwd: '<%= yeoman.app %>/images',jpeg}',dest: '<%= yeoman.dist %>/images'
          }]
        }
      },svgmin: {
        dist: {
          files: [{
            expand: true,*/}*.svg',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,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/',*/}*.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'
            ]
          }
        }
      }
    });

解决方法

这是解决方案之一.
copy: {

  ...

  styles: {
    expand: true,dest: '.tmp/',src: [
      'styles/{,'bower_components/**/*.css'
    ]
  }

这个问题是由于normalize.css不存在于.tmp目录下,尽管index.html文件表示<! - build:css(.tmp)styles / style.css - &gt ;.
因此,您需要将CSS文件(实际上在上述情况下将bower_components目录下的所有CSS文件)复制到.tmp目录.

或者,您可以在style / main.css(或main.scss?)中使用@import语句.

猜你在找的CSS相关文章