Редактирование в реальном времени, перезагрузка в реальном времени с помощью Chrome Workspaces, grunt и Less

Я настроил проект с меньшим количеством файлов Bootstrap и gruntjs, чтобы иметь возможность редактировать в реальном времени в рабочих пространствах Chrome.

Ниже мой Gruntfile.js. Он автоматически компилирует меньше файлов в желаемый style.css и создает файл исходной карты, когда я сохраняю свои изменения. Я также могу редактировать и сохранять меньше файлов из Chrome Workspaces после добавления каталога проекта в Workspaces.

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']);
};

Проблема, с которой я сталкиваюсь, заключается в том, что я не могу увидеть перезагрузку моих модификаций в меньшем количестве файлов через Sublime Text 2 или Chrome Workspaces непосредственно в браузере без обновления страницы.

Что я упустил? Мне нужно сопоставить файлы? Какой файл к какому именно файлу? Мне нужно будет сопоставить несколько файлов таким же образом или только один файл.

Я также добавил изображение, на котором вы можете увидеть дерево файлов.

дерево файлов проекта

К вашему сведению, также обратите внимание, что style.less импортирует файлы bootstrap less и мои пользовательские файлы 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, после чего все работает. Что я делаю не так?

Большое спасибо за ваше время и помощь.


person Gab    schedule 26.01.2014    source источник


Ответы (1)


ОК, единственное, что мне удалось заставить все работать, это поместить меньше файлов в мою папку css.

person Gab    schedule 28.01.2014