Question

下面的gulpfile中的BrowserSync没有显示对index.html所做的更改，即使在它说“重新加载浏览器”之后也是如此。在命令行以及“连接到BrowserSync”＃39; Chrome中的通知。

发生的另一件奇怪的事情是，在index.jade文件的第三次保存之后，Chrome中呈现的网站完全消失，渲染的DOM中没有任何内容。

我在github上跟随了ShakyShane的食谱（进行了一些调整）。它没有对我开始的另一个项目进行调整，但我无法看到这里的错误。

我的文件结构是：

project-folder
  /app
    /css
    /jade
    /js
    /sass
    index.html
  gulpfile.js
  package.json

非常感谢任何帮助。

/***********************************************************************************
1. DEPENDENCIES 
/***********************************************************************************/

var gulp = require ('gulp'),                        // gulp core
    plumber = require ('gulp-plumber'),             // disable interuption
    jade = require ('gulp-jade'),                   // jade compiler
    sass = require ('gulp-sass'),                   // sass compiler
    autoprefixer = require ('gulp-autoprefixer'),   // sets missinb browser prefixes
    browserSync = require ('browser-sync'),         // inject code to all devices
    reload = browserSync.reload;                    // browser sync reload

/*********************************************************************************
2. FILE DESTINATIONS (RELATIVE TO ASSETS FOLDER)
**********************************************************************************/

var target = {
    jadeSrc : 'app/jade/**/*.jade',                 // source of jade files
    htmlDest : 'app/',                              // html file destination
    sassSrc : 'app/sass/**/*.sass',                 // source of sass files
    cssDest : 'app/css',                            // minified css destination
    jsDest : 'dist/js'                              // where to put minified js
};

/**********************************************************************************
3. SASS TASK
***********************************************************************************/

gulp.task ('sass', function (){
    gulp.src(target.sassSrc)                        // get the files
    .pipe(plumber())                                // make sure gulp keeps runnin on errors
    .pipe(sass())                                   // compile all sass
    .pipe(autoprefixer())                           // complete css with correct vendor prefixes
    .pipe(gulp.dest(target.cssDest))                // file destination
    .pipe(reload({stream:true}));
});

/**********************************************************************************
4. JADE TASKS
**********************************************************************************/

gulp.task('jade', function(){
    var YOUR_LOCALS = {};

    gulp.src(target.jadeSrc)
    .pipe(jade({
        locals: YOUR_LOCALS,
        pretty: true
    }))
    .pipe(gulp.dest(target.htmlDest))
});
// separate watcher for browser-sync reaction to '.jade' file changes
gulp.task('jade-watch', ['jade'], reload);

/**********************************************************************************
5. BUILD SEQUENCES
**********************************************************************************/

gulp.task('default', ['sass', 'jade'], function(){
browserSync({server: target.htmlDest});
gulp.watch(target.sassSrc, ['sass']);
gulp.watch(target.jadeSrc, ['jade-watch']);
});

浏览器重新加载后，BrowserSync不会显示更改

0 个答案: