Question

调用gulp时，网站及其资产会正确生成一次。监视任务开始，但它们从未注册新的更改，也不会使用Browsersync刷新浏览器。

我的目标是在构建过程中实现完全自动化。例如，如果_config.yml更改，Jekyll将重建自己。同样的想法适用于每个文件。

到目前为止我尝试过：

为gulp.watch，build:scripts，build:styles和build:images创建单独的build:jekyll个任务。
在每个单独的.on('change', browserSync.reload)任务

gulp.watch

在.pipe(browserSync.reload({stream: true}))，build:styles，build:images和build:scripts

build:jekyll

以下是gulpfile.js的内容：

'use strict';

var autoprefixer = require('gulp-autoprefixer');
var browserSync  = require('browser-sync').create();
var concat       = require('gulp-concat');
var del          = require('del');
var gulp         = require('gulp');
var imagemin     = require('gulp-imagemin');
var rename       = require('gulp-rename');
var run          = require('gulp-run');
var runSequence  = require('run-sequence');
var sass         = require('gulp-sass');
var uglify       = require('gulp-uglify');

gulp.task('build:styles', function() {
    return gulp.src('_assets/styles/main.sass')
        .pipe(sass({
            outputStyle: 'compressed'
        }))
        .pipe(autoprefixer({ 
            browsers: ['last 4 versions'] 
        }))
        .pipe(rename('main.min.css'))
        .pipe(gulp.dest('assets/styles'))
        .pipe(browserSync.stream());
});

gulp.task('build:scripts', function() {
    return gulp.src('_assets/js/*.js')
        .pipe(concat('main.js'))
        .pipe(uglify())
        .pipe(rename('main.min.js'))
        .pipe(gulp.dest('assets/js'))
        .pipe(browserSync.stream());
});

gulp.task('build:images', function() {
    return gulp.src('_assets/img')
        .pipe(imagemin())
        .pipe(gulp.dest('assets/img'));
});

gulp.task('build:jekyll', function(callback) {
    // --incremental regeneration doesn't update front matter
    var shellCommand = 'jekyll build';

    return gulp.src('')
        .pipe(run(shellCommand))

    browserSync.reload();
    callback();
});


gulp.task('clean', function() {
    return del(['_site', 'assets']);
});

gulp.task('build', function(callback) {
    return runSequence('clean', ['build:scripts', 'build:styles', 'build:images'], 'build:jekyll', callback)
});

gulp.task('watch', ['build'], function() {

    browserSync.init({
        server: {
            baseDir: '_site'
        },
        open: true
    });

    gulp.watch(['_config.yml' , 
                '*.html', '_layouts/*.*', 
                '_pages/*.*', '_assets/**/**/*.*'], 
                ['build']).on('change', browserSync.reload);
});

gulp.task('default', ['watch']);

为什么Browsersync和Jekyll会正确注册更改？

Answer 1

我设法让Browsersync查看所需文件中的所有更改，并使用以下gulpfile.js任务重新加载浏览器：

'use strict';

var autoprefixer = require('gulp-autoprefixer');
var browserSync  = require('browser-sync').create();
var concat       = require('gulp-concat');
var del          = require('del');
var gulp         = require('gulp');
var imagemin     = require('gulp-imagemin');
var rename       = require('gulp-rename');
var run          = require('gulp-run');
var runSequence  = require('run-sequence');
var sass         = require('gulp-sass');
var uglify       = require('gulp-uglify');

gulp.task('clean', function() {
    return del(['_site', '.publish', 'assets']);
});

gulp.task('build:scripts', function() {
    return gulp.src('_assets/js/*.js')
        .pipe(concat('main.js'))
        .pipe(uglify())
        .pipe(rename('main.min.js'))
        .pipe(gulp.dest('assets/js'));
});

gulp.task('build:styles', function() {
    return gulp.src('_assets/styles/main.sass')
        .pipe(sass({
            outputStyle: 'compressed'
        }))
        .pipe(autoprefixer({ 
            browsers: ['last 4 versions'] 
        }))
        .pipe(rename('main.min.css'))
        .pipe(gulp.dest('assets/styles'));
});

gulp.task('build:images', function() {
    return gulp.src('_assets/img')
        .pipe(imagemin())
        .pipe(gulp.dest('assets/img'));
});

gulp.task('build:jekyll', function(callback) {
    // --incremental regeneration doesn't update front matter
    var shellCommand = 'jekyll build';

    return gulp.src('')
        .pipe(run(shellCommand));

    callback();
});

gulp.task('build', function(callback) {
    return runSequence('clean', ['build:scripts', 'build:styles', 'build:images'], 'build:jekyll', callback)
});

gulp.task('rebuild', ['build'], function(){
    browserSync.reload();
});

gulp.task('default', ['build'], function() {

    // maybe important (injectChanges: true)
    browserSync.init({
        server: {
            baseDir: '_site'
        },
        open: true
    });

    gulp.watch(['_config.yml' , 
                '*.html', '_layouts/*.*', 
                '_pages/*.*', '_assets/**/**/*.*'], 
                ['rebuild']);
});

使用带有Jekyll的Browsersync的Gulp监视任务不会传播修改后的内容

1 个答案: