Gulp Livereload?

Question

Birçok insan için ortak olabileceğini düşündüğüm bir sorunum var, ama doğru değilim. Bu yüzden birilerinin yardım edebileceğini umuyorum, çünkü cevabı Gulp belgelerinde bulamıyorum.

'use strict'; 

var gulp = require('gulp'); 
var jade = require('gulp-jade'); 
var gutil = require('gulp-util'); 
var stylus = require('gulp-stylus'); 
var jeet = require('jeet'); 
var nib = require('nib'); 
var uglify = require('gulp-uglify'); 
var livereload = require('gulp-livereload'); 

var sources = { 
    jade: "jade/**/*.jade", 
    partials: "partials/**/*.jade", 
    stylus: "styl/**/*.styl", 
    scripts: "js/**/*.js" 
}; 

// Define destinations object 

var destinations = { 
    html: "dist/", 
    css: "dist/css", 
    js: "dist/js" 
}; 

// Compile and copy Jade 
gulp.task("jade", function(event) { 
    return gulp.src(sources.jade) 
    .pipe(jade({pretty: true})) 
    .pipe(gulp.dest(destinations.html)) 
}); 

// Compile and copy Stylus 
gulp.task("stylus", function(event) { 
    return gulp.src(sources.stylus).pipe(stylus({ 
    use: [nib(), jeet()], 
    import: [ 
     'nib', 
     'jeet' 
    ], 
    style: "compressed" 
    })).pipe(gulp.dest(destinations.css)); 
}); 

// Minify and copy all JavaScript 
gulp.task('scripts', function() { 
    gulp.src(sources.scripts) 
    .pipe(uglify()) 
    .pipe(gulp.dest(destinations.js)); 
}); 

// Server 
gulp.task('server', function() { 
    var express = require('express'); 
    var app = express(); 
    app.use(require('connect-livereload')()); 
    app.use(express.static(__dirname+'/dist/')); 
    app.listen(4000, '0.0.0.0'); 
}); 

gulp.task('watch', function() { 
    livereload.listen(); 
    gulp.watch(sources.jade, ["jade"]); 
    gulp.watch(sources.partials, ["jade"]); 
    gulp.watch(sources.stylus, ["stylus"]); 
    gulp.watch(sources.scripts, ["scripts"]); 
}); 

// Define default task 
gulp.task("default", ["jade", "stylus", "scripts", "server", "watch"], function(){ 
    gulp.watch([ 
    sources.jade, 
    sources.partials, 
    sources.stylus, 
    sources.scripts, 
    ]).on('change', function(event) { 
    livereload.changed(); 
    console.log('File', event.path, 'was', event.type); 
    console.log('LiveReload is triggered'); 
    }); 
}); 

ne olur ben 1'den fazla yeşim dosyası olmasıdır:

Şu anda benim gulpfile.js aşağıdaki içeriğe sahiptir. Çalıştığım zaman - alfabetik sıraya göre 10'cu ve değiştirdiğimde, hemen karaciğer nakli yaptırıyorum. Sorun şu ki, tüm yeşim dosyaları derlenmeden ve hedefe kopyalanmadan önce tarayıcı sekmesini yeniden yükler, bu nedenle şu an üzerinde çalıştığım dosya yenileme gerçekleştiğinde bile derlenmez. Bir görev tamamlandıktan sonra yeniden yüklemeyi zincirlemenin bir yolu var mı?

Answer 1

Sen değişikliklerin livereload bildirmek zorundadır. Görevlerinizde borunun sonundaki livereload seçeneğini eklemelisiniz. yeşim görev Örneğin

:

gulp.task("jade", function(event) { 
    return gulp.src(sources.jade) 
    .pipe(jade({pretty: true})) 
    .pipe(gulp.dest(destinations.html)) 
    .pipe(livereload()); 
}); 

senin Gulpfile Bu kodu kalkmayın, ama çalıştığını düşünüyorum.

Saygılarımızla.

Answer 2

bunu yaptık. Yapmam gereken şey, "Yeniden Yükle" adlı yeni bir görev oluşturmak, bağımlılıkları koymak ve diğer görevlerden sonra çalıştırmak. İşte yeni Gulpfile "dir.

'sıkı kullanın'; Bunu denedim

var gulp = require('gulp'); 
var jade = require('gulp-jade'); 
var gutil = require('gulp-util'); 
var stylus = require('gulp-stylus'); 
var jeet = require('jeet'); 
var nib = require('nib'); 
var uglify = require('gulp-uglify'); 
var livereload = require('gulp-livereload'); 

var sources = { 
    jade: "jade/**/*.jade", 
    partials: "partials/**/*.jade", 
    stylus: "styl/**/*.styl", 
    scripts: "js/**/*.js" 
}; 

// Define destinations object 
var destinations = { 
    html: "dist/", 
    css: "dist/css", 
    js: "dist/js" 
}; 

// Compile and copy Jade 
gulp.task("jade", function(event) { 
    return gulp.src(sources.jade) 
    .pipe(jade({pretty: true})) 
    .pipe(gulp.dest(destinations.html)) 
}); 

// Compile and copy Stylus 
gulp.task("stylus", function(event) { 
    return gulp.src(sources.stylus).pipe(stylus({ 
    use: [nib(), jeet()], 
    import: [ 
     'nib', 
     'jeet' 
    ], 
    style: "compressed" 
    })).pipe(gulp.dest(destinations.css)); 
}); 

// Minify and copy all JavaScript 
gulp.task('scripts', function() { 
    gulp.src(sources.scripts) 
    .pipe(uglify()) 
    .pipe(gulp.dest(destinations.js)); 
}); 

// Server 
gulp.task('server', function() { 
    var express = require('express'); 
    var app = express(); 
    app.use(require('connect-livereload')()); 
    app.use(express.static(__dirname+'/dist/')); 
    app.listen(4000, '0.0.0.0'); 
}); 

// Watch sources for change, executa tasks 
gulp.task('watch', function() { 
    livereload.listen(); 
    gulp.watch(sources.jade, ["jade", "refresh"]); 
    gulp.watch(sources.partials, ["jade", "refresh"]); 
    gulp.watch(sources.stylus, ["stylus", "refresh"]); 
    gulp.watch(sources.scripts, ["scripts", "refresh"]); 
}); 

// Refresh task. Depends on Jade task completion 
gulp.task("refresh", ["jade"], function(){ 
    livereload.changed(); 
    console.log('LiveReload is triggered'); 
}); 

// Define default task 
gulp.task("default", ["jade", "stylus", "scripts", "server", "watch"]);