Gulp lädt nur CSS nach Browser

Question

aktualisieren Wenn ich gulp starten, alles funktioniert wie es sein sollte, aber wenn ich gulp clean (entfernt bauen Ordner) starten und ich starten dann gulp wieder geht es wie folgt:

• Die Browser öffnet
• die html-Datei geladen wird, ohne Auszeichnungs
• Browser-Synchronisation wird der Browser
• Nun werden die CSS-Datei geladen und hTML mit Markierung zeigt sich

Wenn meine Konsole Überprüfung, ich main.css can't be found einen Fehler feststellen, aber es ist auf jeden Fall geladen, wenn ich die Quellen Registerkarte überprüfen ..

gulp.task('compass', function(){ 
    gulp.src('_sass/**/*.scss') 
     .pipe(compass({ 
      css: 'css/', 
      sass: '_sass/', 
      image: 'images/', 
      logging: true, 
      style: 'compressed' 
     })) 
     .on('error', function(error){ 
      console.log('Compass Error') 
      console.log(error) 
     }) 
     .pipe(minifyCSS({ 
      keepBreaks: false, 
      keepSpecialComments:true 
     })) 
     .pipe(gulp.dest('css/')); 
     console.log('COMPASS') 
}); 

gulp.task('css', function(){ 
    gulp.src('_css/**/*.css') 
     .pipe(gulp.dest('css/')) 
}); 

gulp.task('js', function() { 
    gulp.src(['_scripts/plugins/*.js','_scripts/main.js']) 
     .pipe(concat(pkg.name + '.js')) 
     .pipe(gulp.dest('scripts/')) 
     .pipe(rename(pkg.name + '.min.js')) 
     .pipe(uglify()) 
     .pipe(gulp.dest('scripts/')); 

    gulp.src(['_scripts/vendor/*.js']) 
     .pipe(concat(pkg.name + '.js')) 
     .pipe(gulp.dest('scripts/')) 
     .pipe(rename('vendors.min.js')) 
     .pipe(uglify()) 
     .pipe(gulp.dest('scripts/')); 
}); 

gulp.task('html', ['jekyll'], function() { 
    // --> Minhtml 
    gulp.src([ 
     path.join('_site/', '*.html'), 
     path.join('_site/', '*/*/*.html'), 
     path.join('_site/', '*/*/*/*.html') 
    ]) 
    .pipe(htmlmin({collapseWhitespace: true})) 
    .pipe(gulp.dest('_site/')) 
    .pipe(browserSync.reload({stream:true})); 
    console.log('HTML') 
}); 

gulp.task('html-watch',['html'], function(done){ 
    browserSync.reload(); 
    done(); 
}); 

gulp.task('browser-sync', function() { 
    browserSync.init(null, { 
     server: { 
      baseDir: './_site/' 
     }, 
     browser: "google chrome" 
    }); 
}); 

gulp.task('default', ['css', 'compass', 'js', 'html'], function (event) { 
    //--> HTML 
    gulp.watch([ 
     path.join('./', '*.html'), 
     path.join('./', '*/*.html'), 
     path.join('./', '*/*.md'), 
     path.join('./', '*/*.markdown'), 
     '!_site/*.html', 
     '!_site/*/*.html' 
    ], ['html-watch']); 

    //--> JS & SASS tasks 
    gulp.watch('_sass/**/*.scss', ['compass']); 
    gulp.watch('_scripts/**/*.js', ['js']); 

    // ---> CSS 
    gulp.watch('_css/**/*.css', ['css']); 

    //After compass & sass tasks are run, start jekyll 
    gulp.watch(['css/*.css', 'scripts/*.js'],['jekyll-watch']); 
    gulp.run('browser-sync'); 
}); 

// Clean build folders 
gulp.task('clean', function (cb) { 
    del.sync([ 
    'scripts', 
    'css', 
    '_site' 
    ], cb); 
}); 

Answer 1

Sie haben browserSync.reload(); nur in Aufgaben html und html-watch, so dass es neu zu laden, nur wenn .html.md usw. werden geändert. Sie müssen es auch in CSS- und JS-Aufgaben einfügen.

gulp.task('compass', function(){ 
    gulp.src('_sass/**/*.scss') 
    .pipe(compass({ 
     css: 'css/', 
     sass: '_sass/', 
     image: 'images/', 
     logging: true, 
     style: 'compressed' 
    })) 
    .on('error', function(error){ 
     console.log('Compass Error') 
     console.log(error) 
    }) 
    .pipe(minifyCSS({ 
     keepBreaks: false, 
     keepSpecialComments:true 
    })) 
    .pipe(gulp.dest('css/')) 
    .pipe(browserSync.reload({stream:true})); 
    console.log('COMPASS') 
}); 

gulp.task('css', function(){ 
    gulp.src('_css/**/*.css') 
    .pipe(gulp.dest('css/')) 
    .pipe(browserSync.reload({stream:true})); 
}); 

gulp.task('js', function() { 
    gulp.src(['_scripts/plugins/*.js','_scripts/main.js']) 
    .pipe(concat(pkg.name + '.js')) 
    .pipe(gulp.dest('scripts/')) 
    .pipe(rename(pkg.name + '.min.js')) 
    .pipe(uglify()) 
    .pipe(gulp.dest('scripts/')) 
    .pipe(browserSync.reload({stream:true})); 

    gulp.src(['_scripts/vendor/*.js']) 
    .pipe(concat(pkg.name + '.js')) 
    .pipe(gulp.dest('scripts/')) 
    .pipe(rename('vendors.min.js')) 
    .pipe(uglify()) 
    .pipe(gulp.dest('scripts/')) 
    .pipe(browserSync.reload({stream:true})); 
}); 

Edit:

Auch Ihre Standard-Aufgabe wartet nicht richtig für ['css', 'compass', 'js', 'html'] zu beenden. Sie sollten ein Versprechen zurückgeben, damit dies ordnungsgemäß funktioniert.

Auf css und scss Aufgaben, fügen Sie einfach return vor gulp.src:

return gulp.src('_css/**/*.css') 

return gulp.src('_sass/**/*.scss') 

Auf js Aufgabe dies etwas komplizierter ist, da es zwei gulp.src ‚s hat, aber Sie können hier (github) für Beratung oder teile es in zwei Aufgaben.