Grunt服務落後於Chrome開發工具

Question

我正在使用本地開發的grunt服務來運行我的Angular應用程序，如果我檢查一個元素並嘗試使用Chrome開發工具調整瀏覽器中的樣式，那麼一切都變得非常緩慢和不可用。我試圖研究這個問題，但我找不到任何有用的東西。有人有主意嗎？

編輯： 我用generator-angular-ui-router來生成我的項目，可能有些東西只是在我的Gruntfile中搞砸了，因爲我不相信在使用grunt之前遇到過這個問題。

在回答我的Gruntfile的請求，那就是：

// Generated on 2014-09-04 using generator-angular 0.9.7 
'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); 

    // Configurable paths for the application 
    var appConfig = { 
    app: require('./bower.json').appPath || 'app', 
    dist: 'dist' 
    }; 

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

    // Project settings 
    yeoman: appConfig, 

// Watches files for changes and runs tasks based on the changed files 
watch: { 
    bower: { 
    files: ['bower.json'], 
    tasks: ['wiredep'] 
    }, 
    js: { 
    files: ['<%= yeoman.app %>/scripts/{,*/}*.js'], 
    tasks: ['newer:jshint:all'], 
    options: { 
     livereload: '<%= connect.options.livereload %>' 
    } 
    }, 
    jsTest: { 
    files: ['test/spec/{,*/}*.js'], 
    tasks: ['newer:jshint:test', 'karma'] 
    }, 
    compass: { 
    files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'], 
    tasks: ['compass:server', '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: { 
     open: true, 
     base: '<%= yeoman.dist %>' 
    } 
    } 
}, 

// Make sure code styles are up to par and there are no obvious mistakes 
jshint: { 
    options: { 
    force: false, 
    jshintrc: '.jshintrc', 
    reporter: require('jshint-stylish') 
    }, 
    all: { 
    src: [ 
     '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 
wiredep: { 
    options: { 
    //cwd: '<%= yeoman.app %>' 
    }, 
    app: { 
    src: ['<%= yeoman.app %>/index.html'], 
    ignorePath: /\.\.\// 
    }, 
    sass: { 
    src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'], 
    ignorePath: /(\.\.\/){1,2}bower_components\// 
    } 
}, 

// Compiles Sass to CSS and generates necessary files if requested 
compass: { 
    options: { 
    sassDir: '<%= yeoman.app %>/styles', 
    cssDir: '.tmp/styles', 
    generatedImagesDir: '.tmp/images/generated', 
    imagesDir: '<%= yeoman.app %>/images', 
    javascriptsDir: '<%= yeoman.app %>/scripts', 
    fontsDir: '<%= yeoman.app %>/styles/fonts', 
    importPath: '<%= yeoman.app %>/bower_components', 
    httpImagesPath: '/images', 
    httpGeneratedImagesPath: '/images/generated', 
    httpFontsPath: '/styles/fonts', 
    relativeAssets: false, 
    assetCacheBuster: false, 
    raw: 'Sass::Script::Number.precision = 10\n' 
    }, 
    dist: { 
    options: { 
     generatedImagesDir: '<%= yeoman.dist %>/images/generated' 
    } 
    }, 
    server: { 
    options: { 
     debugInfo: true 
    } 
    } 
}, 

// Renames files for browser caching purposes 
filerev: { 
    dist: { 
    src: [ 
     '<%= yeoman.dist %>/scripts/{,*/}*.js', 
     '<%= yeoman.dist %>/styles/{,*/}*.css', 
     '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', 
     '<%= yeoman.dist %>/styles/fonts/*/.{eot,svg,ttf,woff,woff2}' 
    ] 
    } 
}, 

// 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 filerev 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 will produce minified files in the dist folder 
// 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' 
//  ] 
//  } 
// } 
// }, 
// uglify: { 
// dist: { 
//  files: { 
//  '<%= yeoman.dist %>/scripts/scripts.js': [ 
//   '<%= yeoman.dist %>/scripts/scripts.js' 
//  ] 
//  } 
// } 
// }, 
// concat: { 
// dist: {} 
// }, 

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, 
     conservativeCollapse: true, 
     collapseBooleanAttributes: true, 
     removeCommentsFromCDATA: true, 
     removeOptionalTags: true 
    }, 
    files: [ 
     { 
     expand: true, 
     cwd: '<%= yeoman.dist %>', 
     src: ['*.html', 'views/{,*/}*.html'], 
     dest: '<%= yeoman.dist %>' 
     } 
    ] 
    } 
}, 

// ng-annotate tries to make the code safe for minification automatically 
// by using the Angular long form for dependency injection. 
ngAnnotate: { 
    dist: { 
    files: [ 
     { 
     expand: true, 
     cwd: '.tmp/concat/scripts', 
     src: ['*.js', '!oldieshim.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}', 
      'htmlImages/**', 
      'headerResources/**', 
      'styles/fonts/**' 
     ] 
     }, 
     { 
     expand: true, 
     cwd: '.tmp/images', 
     dest: '<%= yeoman.dist %>/images', 
     src: ['generated/*'] 
     }, 
     { 
     expand: true, 
     dot: true, 
     cwd: '<%= yeoman.app %>/bower_components/font-awesome', 
     src: ['fonts/*.*'], 
     dest: '<%= yeoman.dist %>' 
     } 
    ] 
    }, 
    styles: { 
    expand: true, 
    cwd: '<%= yeoman.app %>/styles', 
    dest: '.tmp/styles/', 
    src: '{,*/}*.css' 
    } 
}, 

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

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

ngconstant: { 
    // Options for all targets 
    options: { 
    space: ' ', 
    wrap: '\'use strict\';\n\n {%= __ngModule %}', 
    name: 'config' 
    }, 
    // Environment targets 
    development: { 
    options: { 
     dest: '<%= yeoman.app %>/scripts/config.js' 
    }, 
    constants: { 
     ENV: { 
     name: 'development', 
     apiEndpoint: 'http://localhost:3026/api' 
     } 
    } 
    }, 
    production: { 
    options: { 
     dest: '<%= yeoman.app %>/scripts/config.js' 
    }, 
    constants: { 
     ENV: { 
     name: 'production', 
     apiEndpoint: 'http://predictagram.com:3026/api' 
     } 
    } 
    } 
} 
    }); 


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

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

    grunt.registerTask('server', 'DEPRECATED TASK. Use the "serve" task instead', 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', 
'ngconstant:production', 
'wiredep', 
'useminPrepare', 
'concurrent:dist', 
'autoprefixer', 
'concat', 
'ngAnnotate', 
'copy:dist', 
'cdnify', 
'cssmin', 
'uglify', 
'filerev', 
'usemin', 
'htmlmin' 
]); 

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

Answer 1

我認爲主要的問題是從寶石指南針來了，因爲她是緩慢的，你做了更改，每次編譯SASS ，所以你可以嘗試更新寶石指南針。

gem update compass 

並且你可以顯示你的指南針& ruby​​版本請。

gem list compass 

ruby -v 

也可以檢查這個帖子：

Grunt LiveReload is really slow

由於我不知道你的CSS是如何發送到您的Chrome瀏覽器。

如果只是在Chrome中進行編輯，也許它是來自Chrome中的設置？

http://benfrain.com/test-your-sass-or-css-with-the-chrome-developer-tools/

或用Chrome Canary版或Firefox開發者版本的嘗試：

https://www.google.fr/chrome/browser/canary.html

https://www.mozilla.org/fr/firefox/developer/

多少行貴編譯CSS有哪些？