刷新較少的CSS其他進口較少的文件沒有頁面加載

Question

我想在我的開發環境中使用手錶模式。它適用於單個較少的文件。但是我有很少的文件被導入到app.less。我app.less外觀

@import "variables"; 
@import "mixins"; 

看來我不能在此設置中使用手錶模式。還有其他方法嗎？

Answer 1

我與此評論 Refresh less css which has other imported less files without page load完全同意。 謝謝，thevasya。

但沒有必要啓動多個終端。

watch: { 
    less: { 
     files: ['less/*.less'], 
     tasks: 'less' 
    }, 
    reload: { 
     files: ['*.html', 
       'css/app.css', 
       'js/*.js'], 
     tasks: 'reload' 
    } 
} 

之後，你可以開始

$ grunt watch 

看，就是這樣。如果您更改了更少的文件，它將僅啓動less任務。

P.S：這個答案對於繁重的0.4適當的工作進行更新。

Answer 2

UPD。此語法適用於舊版本的Grunt版本，因此不應使用它。

您需要使用LiveReload應用這一點。或者也許是另一個可以使用LiveReload瀏覽器擴展程序重新加載頁面的軟件（也許是帶有插件的Sublime Text編輯器）。

可能的設置是與的Node.js Grunt已經咕嚕-的contrib少和咕嚕重裝載模塊安裝。

你grunt.js的配置應該是這樣的：

module.exports = function(grunt) { 
grunt.initConfig({ 
    // Start LiveReload server 
    reload: { 
     port: 35729, 
     liveReload: {} 
    }, 
    // Simple css compilation 
    less: { 
     src: 'less/app.less', 
     dest: 'css/app.css' 
    }, 
    // Reload files on change 
    watch: { 
     less: { 
      files: ['less/*.less'], 
      tasks: 'less' 
     }, 
     reload: { 
      files: ['*.html', 
        'css/app.css', 
        'js/*.js'], 
      tasks: 'reload' 
     } 
    } 
}); 

// Third party modules 
grunt.loadNpmTasks('grunt-reload'); 
grunt.loadNpmTasks('grunt-contrib-less'); 

// Register default task 
grunt.registerTask('default', 'less'); 
}; 

然後，你需要運行

$ grunt watch:less 

和

$ grunt watch:reload 

在兩個單獨的終端窗口。