2014-06-11 18 views
0

甚至不知道我應該在哪裏開始調試這個問題,但我所有的CSS類的似乎是重複的某些原因。我附上一張圖片供參考,但除此之外;我沒有想法從哪裏開始尋找。我使用Yeoman AngularJS生成器創建了我的項目。沒有Sass或LESS。有人有主意嗎?重複的CSS類?

編輯:CSS類不重複,直至縮小的文件是專爲生產。我不知道除了在線發佈我的Gruntfile.js以外,還需要做些什麼?看起來像矯枉過正,但我​​不確定在哪裏尋找。

// Generated on 2014-05-21 using generator-angular 0.8.0 
'use strict'; 

// # Globbing 
// for performance reasons we're only matching one level down: 
// 'test/spec/{,*/}*.js' 
// use this if you want to recursively match all subfolders: 
// 'test/spec/**/*.js' 

module.exports = function (grunt) { 

    // Load grunt tasks automatically 
    require('load-grunt-tasks')(grunt); 

    // Time how long tasks take. Can help when optimizing build times 
    require('time-grunt')(grunt); 

    // Define the configuration for all the tasks 
    grunt.initConfig({ 

     // Project settings 
     yeoman: { 
      // configurable paths 
      app: require('./bower.json').appPath || 'app', 
      dist: 'dist' 
     }, 

     // Watches files for changes and runs tasks based on the changed files 
     watch: { 
      bower: { 
       files: ['bower.json'], 
       tasks: ['bowerInstall'] 
      }, 
      js: { 
       files: ['<%= yeoman.app %>/scripts/{,*/}*.js'], 
       tasks: ['newer:jshint:all'], 
       options: { 
        livereload: true 
       } 
      }, 
      jsTest: { 
       files: ['test/spec/{,*/}*.js'], 
       tasks: ['newer:jshint:test', 'karma'] 
      }, 
      styles: { 
       files: ['<%= yeoman.app %>/styles/{,*/}*.css'], 
       tasks: ['newer:copy:styles', 'autoprefixer'] 
      }, 
      gruntfile: { 
       files: ['Gruntfile.js'] 
      }, 
      livereload: { 
       options: { 
        livereload: '<%= connect.options.livereload %>' 
       }, 
       files: [ 
        '<%= yeoman.app %>/{,*/}*.html', 
        '.tmp/styles/{,*/}*.css', 
        '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'] 
      } 
     }, 

     // The actual grunt server settings 
     connect: { 
      options: { 
       port: 9000, 
       // Change this to '0.0.0.0' to access the server from outside. 
       hostname: 'localhost', 
       livereload: 35729 
      }, 
      livereload: { 
       options: { 
        open: true, 
        base: [ 
         '.tmp', 
         '<%= yeoman.app %>'] 
       } 
      }, 
      test: { 
       options: { 
        port: 9001, 
        base: [ 
         '.tmp', 
         'test', 
         '<%= yeoman.app %>'] 
       } 
      }, 
      dist: { 
       options: { 
        base: '<%= yeoman.dist %>' 
       } 
      } 
     }, 

     // Make sure code styles are up to par and there are no obvious mistakes 
     jshint: { 
      options: { 
       jshintrc: '.jshintrc', 
       reporter: require('jshint-stylish') 
      }, 
      all: [ 
       'Gruntfile.js', 
       '<%= yeoman.app %>/scripts/{,*/}*.js'], 
      test: { 
       options: { 
        jshintrc: 'test/.jshintrc' 
       }, 
       src: ['test/spec/{,*/}*.js'] 
      } 
     }, 

     // Empties folders to start fresh 
     clean: { 
      dist: { 
       files: [{ 
        dot: true, 
        src: [ 
         '.tmp', 
         '<%= yeoman.dist %>/*', 
         '!<%= yeoman.dist %>/.git*'] 
       }] 
      }, 
      server: '.tmp' 
     }, 

     // Add vendor prefixed styles 
     autoprefixer: { 
      options: { 
       browsers: ['last 1 version'] 
      }, 
      dist: { 
       files: [{ 
        expand: true, 
        cwd: '.tmp/styles/', 
        src: '{,*/}*.css', 
        dest: '.tmp/styles/' 
       }] 
      } 
     }, 

     // Automatically inject Bower components into the app 
     bowerInstall: { 
      app: { 
       src: ['<%= yeoman.app %>/index.html'], 
       ignorePath: '<%= yeoman.app %>/' 
      } 
     }, 

     // Renames files for browser caching purposes 
     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/*'] 
       } 
      } 
     }, 

     // Reads HTML for usemin blocks to enable smart builds that automatically 
     // concat, minify and revision files. Creates configurations in memory so 
     // additional tasks can operate on them 
     useminPrepare: { 
      html: '<%= yeoman.app %>/index.html', 
      options: { 
       dest: '<%= yeoman.dist %>', 
       flow: { 
        html: { 
         steps: { 
          js: ['concat', 'uglifyjs'], 
          css: ['cssmin'] 
         }, 
         post: {} 
        } 
       } 
      } 
     }, 

     // Performs rewrites based on rev and the useminPrepare configuration 
     usemin: { 
      html: ['<%= yeoman.dist %>/{,*/}*.html'], 
      css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 
      options: { 
       assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images'] 
      } 
     }, 

     // The following *-min tasks produce minified files in the dist folder 
     cssmin: { 
      options: { 
       //root: '<%= yeoman.app %>' 
      } 
     }, 

     imagemin: { 
      dist: { 
       files: [{ 
        expand: true, 
        cwd: '<%= yeoman.app %>/images', 
        src: '{,*/}*.{png,jpg,jpeg,gif}', 
        dest: '<%= yeoman.dist %>/images' 
       }] 
      } 
     }, 

     svgmin: { 
      dist: { 
       files: [{ 
        expand: true, 
        cwd: '<%= yeoman.app %>/images', 
        src: '{,*/}*.svg', 
        dest: '<%= yeoman.dist %>/images' 
       }] 
      } 
     }, 

     htmlmin: { 
      dist: { 
       options: { 
        collapseWhitespace: true, 
        collapseBooleanAttributes: true, 
        removeCommentsFromCDATA: true, 
        removeOptionalTags: true 
       }, 
       files: [{ 
        expand: true, 
        cwd: '<%= yeoman.dist %>', 
        src: ['*.html', 'views/{,*/}*.html'], 
        dest: '<%= yeoman.dist %>' 
       }] 
      } 
     }, 

     // ngmin tries to make the code safe for minification automatically by 
     // using the Angular long form for dependency injection. It doesn't work on 
     // things like resolve or inject so those have to be done manually. 
     ngmin: { 
      dist: { 
       files: [{ 
        expand: true, 
        cwd: '.tmp/concat/scripts', 
        src: '*.js', 
        dest: '.tmp/concat/scripts' 
       }] 
      } 
     }, 

     // Replace Google CDN references 
     cdnify: { 
      dist: { 
       html: ['<%= yeoman.dist %>/*.html'] 
      } 
     }, 

     // Copies remaining files to places other tasks can use 
     copy: { 
      dist: { 
       files: [{ 
        expand: true, 
        dot: true, 
        cwd: '<%= yeoman.app %>', 
        dest: '<%= yeoman.dist %>', 
        src: [ 
         '*.{ico,png,txt}', 
         '.htaccess', 
         '*.html', 
         'views/{,*/}*.html', 
         'images/{,*/}*.{webp}', 
         'fonts/**/*', 
         'bower_components/greensock/src/minified/**/*', 
         'bower_components/soundmanager/**/*', 
         'sounds/*', ] 
       }, { 
        expand: true, 
        cwd: '.tmp/images', 
        dest: '<%= yeoman.dist %>/images', 
        src: ['generated/*'] 
       }] 
      }, 
      styles: { 
       expand: true, 
       cwd: '<%= yeoman.app %>/styles', 
       dest: '.tmp/styles/', 
       src: '{,*/}*.css' 
      }, 
      scripts: { 
       expand: true, 
       cwd: '<%= yeoman.app %>/bower_components/greensock/src/minified', 
       dest: '<%= yeoman.dist %>/scripts/gsap', 
       src: '{,*/}*.js' 
      } 
     }, 

     // Run some tasks in parallel to speed up the build process 
     concurrent: { 
      server: [ 
       'copy:styles'], 
      test: [ 
       'copy:styles'], 
      dist: [ 
       'copy:styles', 
       'imagemin', 
       'svgmin'] 
     }, 

     // By default, your `index.html`'s <!-- Usemin block --> will take care of 
     // minification. These next options are pre-configured if you do not wish 
     // to use the Usemin blocks. 
     // cssmin: { 
     // dist: { 
     //  files: { 
     //  '<%= yeoman.dist %>/styles/main.css': [ 
     //   '.tmp/styles/{,*/}*.css', 
     //   '<%= yeoman.app %>/styles/{,*/}*.css' 
     //  ] 
     //  } 
     // } 
     // }, 
     // uglify: { 
     // dist: { 
     //  files: { 
     //  '<%= yeoman.dist %>/scripts/scripts.js': [ 
     //   '<%= yeoman.dist %>/scripts/scripts.js' 
     //  ] 
     //  } 
     // } 
     // }, 
     // concat: { 
     // dist: {} 
     // }, 

     // Test settings 
     karma: { 
      unit: { 
       configFile: 'karma.conf.js', 
       singleRun: true 
      } 
     } 
    }); 


    grunt.registerTask('serve', function (target) { 
     if (target === 'dist') { 
      return grunt.task.run(['build', 'connect:dist:keepalive']); 
     } 

     grunt.task.run([ 
      'clean:server', 
      'bowerInstall', 
      'concurrent:server', 
      'autoprefixer', 
      'connect:livereload', 
      'watch']); 
    }); 

    grunt.registerTask('server', function (target) { 
     grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.'); 
     grunt.task.run(['serve:' + target]); 
    }); 

    grunt.registerTask('test', [ 
     'clean:server', 
     'concurrent:test', 
     'autoprefixer', 
     'connect:test', 
     'karma']); 

    grunt.registerTask('build', [ 
     'clean:dist', 
     'bowerInstall', 
     'useminPrepare', 
     'concurrent:dist', 
     'autoprefixer', 
     'concat', 
     'ngmin', 
     'copy:dist', 
     'cdnify', 
     'cssmin', 
     'uglify', 
     'rev', 
     'usemin', 
     'htmlmin']); 

    grunt.registerTask('default', [ 
     'newer:jshint', 
     'test', 
     'build']); 
}; 

enter image description here

+4

您可能包括在文件兩次或文件包含規則集的兩倍.. –

+3

由於屏幕截圖顯示了這兩個規則在同一行我的猜測是,CSS文件包含兩次 –

+0

如果您閱讀該行,則兩個結果都具有「:1」。所以它可能只是把班級兩次。 –

回答

0

問題已得到糾正。頂部是我錯誤的代碼,而底部反映了正確的工作。

// Reads HTML for usemin blocks to enable smart builds that automatically 
// concat, minify and revision files. Creates configurations in memory so 
// additional tasks can operate on them 
useminPrepare: { 
    html: '<%= yeoman.app %>/index.html', 
    options: { 
    dest: '<%= yeoman.dist %>', 
    flow: { 
     html: { 
     steps: { 
      js: ['concat', 'uglifyjs'], 
      css: ['cssmin'] 
     }, 
     post: {} 
     } 
    } 
    } 
}, 

// Performs rewrites based on rev and the useminPrepare configuration 
usemin: { 
    html: ['<%= yeoman.dist %>/{,*/}*.html'], 
    css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 
    options: { 
    assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images'] 
    } 
}, 

// The following *-min tasks produce minified files in the dist folder 
cssmin: { 
    options: { 
    //root: '<%= yeoman.app %>' 
    } 
}, 

工作拷貝

// Reads HTML for usemin blocks to enable smart builds that automatically 
// concat, minify and revision files. Creates configurations in memory so 
// additional tasks can operate on them 
useminPrepare: { 
    html: '<%= yeoman.app %>/index.html', 
    options: { 
    dest: '<%= yeoman.dist %>' 
    } 
}, 

// Performs rewrites based on rev and the useminPrepare configuration 
usemin: { 
    options: { 
     assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images'] 
    }, 
    html: ['<%= yeoman.dist %>/{,*/}*.html'], 
    css: ['<%= yeoman.dist %>/styles/{,*/}*.css'] 
}, 
1

我猜想,文件只有一個很長的線,因爲它是minificated(以避免緩存文件還具有獨特的前綴)。只需打開該文件並計算可以找到該聲明的次數。

+0

你可以嘗試從構建任務中禁用** cssmin **任務,其他可能性 - 也許你已經把模板文件中的css文件放入時間了? –

1

我可以在你的呼嚕聲文件中看到的唯一的事情,可能是一個問題,就是在你的cssmin任務。你註釋掉了指定根文件夾的選項。我認爲cssmin看起來不再只是在你的應用程序,但在根目錄中,包括.TMP,距離,等嘗試取消註釋選項,看看是否能解決您的問題