3

私は現在、GulpJS を使用した JavaScript ビルドの自動化に関する John Papa のコースに従っています。現時点では、ブラウザの同期を維持するために、 gulp-nodemonでbrowser-syncをセットアップしようとしています。これは私の開発ビルドを提供するための私のgulpタスクです:

gulp.task('serve-dev', ['inject'], function () {
    var isDev = true;

    var nodeOptions = {
        script: config.settings.node.server,
        delayTime: 1,
        env: {
            'PORT': port,
            'NODE_ENV': isDev ? 'dev' : 'build'
        },
        watch: [config.server]
    };

    return $.nodemon(nodeOptions)
        .on('restart', ['vet'], function (event) {
            util.log('[nodemon] restarted');
        })
        .on('start', function () {
            util.log('[nodemon] started');
            startBrowserSync();
        })
        .on('crash', function () {
            util.log('[nodemon] crashed', 'red');
        })
        .on('exit', function () {
            util.log('[nodemon] exited cleanly');
        });
});

興味深い部分は関数startBrowserSync()です:

function startBrowserSync() {
    if (browserSync.active) {
        return;
    }

    util.log('[browser-sync] Starting on port ' + port);

    gulp
        .watch([config.sass], ['styles'])
        .on('change', function (event) {
            util.onChange(event);
        });

    var options = {
        proxy: 'localhost:' + port,
        port: 3000,
        files: [
            config.client + '**/*.*',
            '!' + config.sass,
            config.tmp + '**/*.css'
        ],
        ghostMode: {
            clicks: true,
            location: false,
            forms: true,
            scroll: true
        },
        injectChanges: true,
        logFileChanges: true,
        logLevel: 'debug',
        logPrefix: 'bsp',
        notify: true,
        reloadDelay: 1000
    };

    browserSync(options);
}

オプションでわかるfilesように、ファイルを除くクライアント フォルダー内のすべてのファイルを*.scss監視し、ディレクトリ内の CSS ファイルを明示的に監視したいと考えています.tmp。それが、ジョン・パパがコースで行っている方法です。ただし、ファイル内の何かを変更するたびに、*.scssページ全体がリロードされます。CSS を挿入し、ページ全体をリロードしないように設定injectChangesしたため、これは予想される動作ではありません。true問題は、!が監視対象からファイルを除外しないことです。ここで何が問題なのですか？

ところで; sass の設定は次のようになります。

var client = './src/client/';

var config = {
    [...]
    sass: client + 'styles/**/*.scss',
    [...]
}

私はすでに BrowserSync のドキュメントhereとhereを調べましたが、プロパティを使用してwatchOptionsファイルを無視しても機能しません。

別の問題は、config.tmp + '**/*.css'正しく機能していないことです。変数を と宣言しましたvar tmp = './.tmp/';。どういうわけか、BrowserSync に問題があり.tmpます。tmpそれをonlyに変更すると、機能します。ただし、 .tmpタスクなど、他のすべての gulp タスクで機能しstylesます。

gulp.task('styles', ['clean-styles'], function () {
    util.log('Compiling SCSS to CSS');

    if (production) {
        config.settings.sass.outputStyle = 'compressed';
    }

    return gulp
        .src(config.sass)
        .pipe($.plumber({
            errorHandler: util.onError
        }))
        .pipe($.sass(config.settings.sass))
        .pipe($.autoprefixer({
            browsers: [
                'last 2 versions',
                '> 5%'
            ]
        }))
        .pipe(gulp.dest(config.tmp));
});

ここで何が問題なのですか？何か案は？

編集：私はBrowserSync 2.7.1を使用しているのでcreate()、モジュールのエクスポートを呼び出してbrowserSyncインスタンスを作成する推奨方法も試しました。さらに、このブログ投稿に記載されているように、BrowserSync 呼び出しを次のように変更しました。

 browserSync.init([
            config.client + '**/*.*',
            '!' + config.sass,
            config.tmp + '**/*.css'
        ], options);

オプション オブジェクトからプロパティを削除し、それらを関数files内の配列として渡しました。init()それでもscssファイルは無視されないため、スタイルが変更されただけでもページ全体がリロードされます。

4

3 に答える 3

4

問題の解決策を見つけました。私のパス宣言のために実際にクラッシュしていました。これは私が以前持っていたものです：

var client = './src/client/';
var clientApp = client + 'app/';
var server = './src/server/';
var bower = './bower_components/';
var tmp = './.tmp/';

ご覧のとおり、各パスは./Windows 以外のマシンでのみ機能する a で始まります。これは、Windows.\が現在の作業ディレクトリのコマンドとして使用するためです。これを正しく変換しないのは BrowserSync かもしれませんが、私にとっては、次のように変更すると完全に機能します。

var client = 'src/client/';
var clientApp = client + 'app/';
var server = 'src/server/';
var bower = 'bower_components/';
var tmp = '.tmp/';

パスからすべてを削除し./、BrowserSync を開始する方法を、質問の編集でマイナーなリファクタリングで既に述べた推奨される方法に変更しました。

var files = isDev ? [
    config.client + '**/*.*',
    '!' + config.sass,
    config.tmp + '**/*.css'
] : [];

browserSync.init(files, options);

私が偶然見つけたいくつかのサイトは、それをテストする手がかりを与えてくれました:

誰かが私の問題に対するより良い解決策を持っている場合は、気軽に私の投稿に追加してください.

于 2015-05-28T19:46:48.403 に答える
0

browserSync のドキュメントから:

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.stream());
});

そのため、John Papa コースでは、スタイル タスクを次のように変更して動作するようにしました。

    gulp.task('styles', ['clean-styles'], function() {
        log('Compiling Less --> CSS');

        return gulp
            .src(config.less)
            .pipe($.less())
            .on('error', errorLogger)
            .pipe($.autoprefixer({browsers: ['last 2 version', '> 5%']}))
            .pipe(gulp.dest(config.temp))
            .pipe(browserSync.stream());
    });
于 2016-01-07T11:12:06.283 に答える