实时编辑,使用Chrome工作区实时重新加载,grunt和Less

时间:2014-01-26 22:46:09

标签: less gruntjs google-chrome-devtools source-maps livereload

我已经设置了一个包含Bootstrap较少文件和gruntjs的项目,以便能够在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']);
};

我遇到的问题是,我无法直接在浏览器中看到通过Sublime Text 2或Chrome Workspaces对较少文件进行修改的实时重新加载,而无需刷新页面。

我缺少什么?我必须映射文件?究竟什么文件到什么文件?我是否需要以相同方式或仅一个文件映射多个。

我还添加了一个图像,您可以在其中看到文件树。

project files tree

仅供参考,请注意style.less导入bootstrap 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中的内容覆盖,然后就可以了。我做错了什么?

非常感谢您的时间和帮助。

1 个答案:

答案 0 :(得分:0)

好的,我唯一能让一切正常的工作就是将较少的文件放在我的css文件夹中。