如果沒有完整的頁面重新加載，可能會咕嚕編譯更少，並且實時重新加載？

我有一個Angular JS項目與LESS，我正在使用grunt編譯並通過grunt serve來顯示我的頁面。但是，在每次保存/編譯LESS文件後，頁面會隨着更改而重新加載。如果我更改了頁面上的對象狀態並進行了少量編輯，則頁面重新加載會重新設置頁面狀態，我需要再次進行所有更改以查看我的CSS修補是否足夠。如果沒有完整的頁面重新加載，可能會咕嚕編譯更少，並且實時重新加載？

有沒有一種方法來配置LESS文件編譯，CSS重新加載而不加載整個HTML頁面？

這裏是我Grunt.js的連接部分：

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

和少部分：

//LESS 
less: { 
    theme: { 
    options: { 
     sourceMap: true, 
     sourceMapFilename: '.tmp/dist/css/theme.css.map', 
     sourceMapURL: 'theme.css.map', 
     outputSourceFiles: true 
    }, 
    files: [{ 
     ".tmp/dist/css/theme.css": "<%= yeoman.less %>/theme.less" 
    }] 
    }, 
    preview: { 
    options: { 
     sourceMap: true, 
     sourceMapFilename: '.tmp/live_preview/styles/main.css.map', 
     sourceMapURL: 'main.css.map', 
     outputSourceFiles: true 
    }, 
    files: [{ 
     ".tmp/live_preview/styles/main.css": "<%= yeoman.preview %>/less/main.less" 
    }] 
    }, 
    distTheme: { 
    options: { 
     compress: true, 
     yuicompress: true, 
     optimization: 2, 
     sourceMap: true, 
     sourceMapFilename: '<%= yeoman.dist %>/dist/css/theme.css.map', 
     sourceMapURL: 'theme.css.map', 
     outputSourceFiles: true 
    }, 
    files: [{ 
     "<%= yeoman.dist %>/dist/css/theme.css": "<%= yeoman.less %>/theme.less" 
    }] 
    } 
},

來源

2014-04-22 Steve

訣竅是僅在生成CSS livereload觸發，不就少了文件，否則你會得到一個頁面重新加載。

這款腕錶配置的伎倆對我來說：

watch: { 
    options: { 
    livereload: true, 
    }, 
    html: { 
    files: ['app/index.html', 'app/views/*.html', 'app/views/*/*.html'], 
    }, 
    js: { 
    files: ['app/scripts/*.js', 'app/scripts/*/*.js'] 
    }, 
    less: { 
    files: ['app/styles/less/*.less'], 
    tasks: ['less'], 
    options: { 
     livereload: false 
    } 
    }, 
    css: { 
    files: ['app/styles/*.css'], 
    } 
}

來源

2014-07-29 12:12:00

感謝您對這樣一個明確的答案。這令我困惑不已。 – Steve

感謝這個技巧！它仍然有效！ – Kursion

據我瞭解，如果觀察者通知它觸發重新加載相關的變化資源在瀏覽器中，但如果沒有相關資源，它會觸發完全重新加載。

因此，如果瀏覽器中未加載更改，則會觸發完全重新加載。

而.less文件沒有在瀏覽器中只加載生成的CSS。

我認爲它應該是足夠的類似的東西添加到您的守望者配置文件中禁用留意.LESS文件：

base: [ 
    '.tmp', 
    '<%= yeoman.app %>', 
    '!...yourlessfile.less' 
    ]

來源

2014-04-24 14:07:13

如果沒有完整的頁面重新加載，可能會咕嚕編譯更少，並且實時重新加載？

回答

相關問題