實時編輯，使用Chrome工作區實時重新加載，咕嚕和少

我已經使用Bootstrap較少的文件和gruntjs設置了一個項目，以便能夠在Chrome工作區中進行實時編輯。實時編輯，使用Chrome工作區實時重新加載，咕嚕和少

下面是我的Gruntfile.js。它會自動編譯更少的文件到所需的style.css中，並在保存更改時創建源映射文件。將項目目錄添加到工作區之後，我還能夠編輯和保存Chrome工作區中較少的文件。

module.exports = function(grunt) { 
    'use strict'; 

    require('matchdep').filterDev('grunt-!(cli)').forEach(grunt.loadNpmTasks); 

    grunt.initConfig({ 
     pkg: grunt.file.readJSON('package.json'), 
     less: { 
      dev: { 
       options: { 
        sourceMap: true, 
        sourceMapFilename: 'public/css/style.map', 
        sourceMapBasepath: 'public/css' 
       }, 
       files: { 
        'public/css/style.css': 'less/style.less' 
       } 
      } 
     }, 
     watch: { 
      all: { 
       files: ['less/**/*.less'], 
       tasks: ['less'], 
      } 
     } 
    }); 

    grunt.loadNpmTasks('grunt-contrib-less'); 
    grunt.loadNpmTasks('grunt-contrib-watch'); 
    grunt.registerTask('default', ['less', 'watch']); 
};

我遇到的問題是，我無法通過在瀏覽器中崇高文本2或Chrome工作區直接看到我修改的現場重裝就少了文件而無需刷新頁面。

我錯過了什麼？我必須映射文件？什麼文件到什麼文件？我是否需要以相同的方式映射多個映射或只映射一個文件？

我也添加了一個圖像，你可以看到文件樹。

project files tree

僅供參考，還請注意，style.less進口引導少的文件和我的自定義減檔。

// Core variables and mixins 

@import "bootstrap/bootstrap"; 
@import "showtime/lib"; 
@import "showtime/intro"; 
@import "showtime/nav"; 
@import "showtime/portfolio"; 
@import "showtime/contact"; 
@import "showtime/footer"; 
@import "showtime/album";

更新如果從元素標籤編輯，我style.less文件獲取與此也是style.css文件，然後它的工作內容覆蓋。我究竟做錯了什麼？

非常感謝您的時間和幫助。

來源

2014-01-26 Gab

OK唯一我能夠做的一切工作是通過將更少的文件在我的css文件夾中。

來源

2014-01-28 01:33:12 Gab

實時編輯，使用Chrome工作區實時重新加載，咕嚕和少

回答

相關問題