Livereload de index.html avec Gulp

Je suis tente de faire de mon navigateur à jour lorsque j'effectue un changement d'index.html dans la racine de mon projet. Livereloading fonctionne bien lors de la mise à jour de la feuille de style CSS.
J'ai supprimé les efforts que j'ai fait pour obtenir ce travail à mon gulpfile.js, ci-dessous...

Merci!

var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
lr = require('tiny-lr'),
server = lr();
gulp.task('styles', function() {
return gulp.src('components/sass/style.scss')
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6',         'android 4'))
.pipe(gulp.dest(''))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest(''))
.pipe(livereload(server))
.pipe(notify({ message: 'Styles task complete' }));
});
gulp.task('scripts', function() {
return gulp.src('components/js/*.js')
//.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js'))
.pipe(livereload(server))
.pipe(notify({ message: 'Scripts task complete' }));
});
gulp.task('images', function() {
return gulp.src('components/img/*')
.pipe(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true }))
.pipe(gulp.dest('img'))
.pipe(livereload(server))
.pipe(notify({ message: 'Images task complete' }));
});
//gulp.task('clean', function() {
//  return gulp.src(['css', 'js', 'img'], {read: false})
//    .pipe(clean());
//});
gulp.task('watch', function() {
server.listen(35729, function (err) {
if (err) {
return console.log(err)
};
//Watch .scss files
gulp.watch('components/sass/*.scss', ['styles']);
//Watch .js files
gulp.watch('components/js/*.js', ['scripts']);
//Watch image files
gulp.watch('components/img/*', ['images']);
});    
});
//gulp.task('default', ['clean'], function() {
gulp.task('default', function() {
gulp.start('styles', 'scripts', 'images');
});

OriginalL'auteur Pete Norris | 2014-02-10

gulp livereload

1

Il peut y avoir une meilleure façon de faire ce que vous voulez faire.

Avez-vous pensé peut-être à l'aide d'une instance de express avec livereload?

L'alternative est d'utiliser gulp-connect qui fera de ce que vous essayez de faire beaucoup plus facile. Dans les deux cas, au lieu d'invoquer livereload dans les tâches, gérer livereloading dans la tâche qui permet de configurer votre serveur. L'idée générale est que vous définissez une montre de tâches sur vos fichiers que vous souhaitez livereloading puis recharger sur les changements.
```
gulp.task('serve', function(event) {
connect.server({
root: destinations.docs,
port: 1987,
livereload: true
});
//sets up a livereload that watches for any changes in the root
watch({glob: [sources.html, sources.styles]})
.pipe(connect.reload());
});
```
J'ai expérimenté avec à la fois des moyens et gulp-connect est une option beaucoup plus facile. Peu importe, j'ai écrit deux gulp boilerplates de laquelle vous pouvez voir à https://github.com/jh3y/gulp-boilerplate-v2 et https://github.com/jh3y/gulp-boilerplate .

Espère que ça aide!

gulp-connect a été mis sur la liste noire github.com/gulpjs/plugins/issues/33

OriginalL'auteur jh3y

Vous pouvez essayer de mettre de mettre vos fichiers html dans un sous-dossier comme components/html et l'utilisation d'une tâche similaire à la styles tâche:

gulp.task('html', function() {
return gulp.src('components/html/**/*.html')
.pipe(gulp.dest(''))
.pipe(livereload(server))
.pipe(notify({ message: 'HTML task complete' }));
});

Votre tâche par défaut devrait ressembler à:

//gulp.task('default', ['clean'], function() {
gulp.task('default', function() {
gulp.start('styles', 'scripts', 'images', 'html');
});

Et modifier votre montre tâche:

gulp.task('watch', function() {
server.listen(35729, function (err) {
if (err) {
return console.log(err)
};
//Watch .scss files
gulp.watch('components/sass/*.scss', ['styles']);
//Watch .js files
gulp.watch('components/js/*.js', ['scripts']);
//Watch image files
gulp.watch('components/img/*', ['images']);
//Watch html files
gulp.watch('components/html/**/*.html', ['html']);
});
});

Ciao
Ralf

Il fonctionne pour moi, mais tous les fichiers html sont rechargées et pas seulement les fichiers qui ont changé. Aucune idée pour recharger seulement sur ce que le changement ?

OriginalL'auteur RWAM

2

Manuel navigateur de synchronisation de rechargement de certains types de fichier dans la racine du projet à l'aide de courant gulp de la syntaxe que de 4/2016 référencé ici:

https://www.browsersync.io/docs/gulp/#gulp-manual-reload

EXEMPLE: Ajouter des lignes au-dessous de la SCSS référence à regarder HTML et HTM fichiers avec le navigateur-sync:
```
gulp.watch("./scss/*.scss", ['sass']);
gulp.watch("*.html").on("change", reload);
gulp.watch("*.htm").on("change", reload);
```
OriginalL'auteur VanAlbert
1

Si vous ne souhaitez pas utiliser un livereload ou d'exprimer exemple, vous pouvez faire quelque chose comme ce qui suit, que j'utilise dans mon laravel 5 projet avec l'élixir de gulp extension en combinaison avec live.js.

étendre elixir

elixir.extend('livereloader',function(message) { gulp.task('livereloader',function(){ return gulp.src('public/js/livereloader.js') .pipe(insert.append('')) .pipe(gulp.dest('public/js/')); }); this.registerWatcher("livereloader", 'resources/views/**/*.php'); return this.queueTask('livereloader'); });

utiliser la tâche

mix.livereloader();

assez simple. même sans livereload ou express (ne vois pas pourquoi je devrais utiliser du tout ...)

OriginalL'auteur Thomas Venturini

Vous devez vous connecter pour publier un commentaire.