Chrome ワークスペースでライブ編集できるようにするために、Bootstrap の少ないファイルと gruntjs を使用してプロジェクトをセットアップしました。
以下は私の 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 を介して、ページを更新せずにブラウザで直接、より少ないファイルで変更のライブ リロードを確認できないことです。
私は何が欠けていますか?ファイルをマップする必要がありますか? どのファイルからどのファイルに正確に? 同じ方法で複数をマップする必要がありますか、それとも 1 つのファイルのみをマップする必要がありますか。
ファイル ツリーが表示される画像も追加しました。
参考までに、style.less はブートストラップの 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 にもあるコンテンツで上書きされ、機能します。私は何を間違っていますか?
お時間を割いてご協力いただき、誠にありがとうございました。