1

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 にもあるコンテンツで上書きされ、機能します。私は何を間違っていますか？

お時間を割いてご協力いただき、誠にありがとうございました。

4

1 に答える 1

0

OK、すべてを機能させることができたのは、少ないファイルをcssフォルダーに入れることだけです。

于 2014-01-28T01:33:12.020 に答える