我已经使用 Bootstrap 的 less 文件和 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 看到我对较少文件的修改的实时重新加载。
我错过了什么?我必须映射文件?什么文件到什么文件?我需要以相同的方式映射多个还是只映射一个文件。
我还添加了一张图片,您可以在其中看到文件树。
仅供参考,还请注意 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";
更新 如果从 Elements 选项卡编辑,我的 style.less 文件会被 style.css 中的内容覆盖,然后它就可以工作了。我究竟做错了什么 ?
非常感谢您的时间和帮助。