gulp-watch menjalankan semua tugas jika ia menonton file html

Ada tugas 'melayani' dengan fungsi jam tangan seperti gambar di bawah ini:

gulp.task('serve', function() {
  gulp.watch(['source/scripts/*.js'], ['concatjs', reload]);
  gulp.watch(['source/styles/*.css'], ['concatcss', reload]);
  gulp.watch(['app/static/*.html'], [reload]);
});

Ketika saya memperbarui file js atau css, gulp hanya mengeksekusi tugas concatjs atau concatcss secara bersamaan. Tetapi jika untuk memperbarui file html, gulp menjalankan semua tugas bahkan tugas yang tidak terdaftar ke fungsi jam tangan dan menimbulkan kesalahan:

[18:26:31] Starting 'lesstocss'...                                                                                                          
[18:26:31] Starting 'concatjs'...                                                                                                           
[18:26:31] Starting 'concatcss'...                                                                                                          
[18:26:31] Starting 'serve'...                                                                                                              
[error] You tried to start Browsersync twice! To create multiple instances, use browserSync.create().init()                                 
[18:26:31] Finished 'serve' after 6.1 ms                                                                                                    
[18:26:31] Finished 'lesstocss' after 38 ms                                                                                                 
[18:26:31] Finished 'concatjs' after 47 ms                                                                                                  
[18:26:31] Finished 'concatcss' after 41 ms

Mungkin gulp berfungsi dengan file html dengan cara lain? Semua kode yang saya gunakan:

var gulp            = require('gulp');
var concat          = require('gulp-concat');
var browserSync     = require('browser-sync');
var reload          = browserSync.reload;
var less            = require('gulp-less');
var sourcemaps      = require('gulp-sourcemaps');


gulp.task('lesstocss', function () {
  return gulp.src('source/styles/*.less')
  .pipe(sourcemaps.init())
  .pipe(less())
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('source/styles/'));
});

gulp.task('concatjs', function() {
  return gulp.src(['source/scripts/mls.js', 'source/scripts/main.js'])
    .pipe(concat('result.js'))
    .pipe(gulp.dest('app/static/scripts/'));
});

gulp.task('concatcss', function() {
  return gulp.src(['source/styles/mls.css', 'source/styles/main.css'])
    .pipe(concat('result.css'))
    .pipe(gulp.dest('app/static/styles/'));
})

gulp.task('serve', function() {
  browserSync.init({
    proxy: "localhost:3000",
    browser: "google chrome",
    notify: false,
    open: 'local'
  });

  gulp.watch(['source/scripts/*.js'], ['concatjs', reload]);
  gulp.watch(['source/styles/*.css'], ['concatcss', reload]);
  gulp.watch(['app/static/*.html'], [reload]);
});

node.js gulp gulp-watch
person Makha    schedule 15.09.2016    source sumber
comment
Menurut saya log adalah apa yang Anda lihat segera setelah menyimpan perubahan pada salah satu file 'app/static/*.html'? Apakah reload berfungsi saat Anda menyimpan perubahan 'source/scripts/*.js' atau 'source/styles/*.css'? Apa reload Anda, dan bagaimana browserSync.init() Anda diatur?   -  person henry    schedule 15.09.2016
comment
@henry ya, saya mendapatkan log kesalahan ini setelah 'app/static/*.html' diubah. reload berfungsi dengan semua file itu (js, css, html). Kode telah ditambahkan ke postingan.   -  person Makha    schedule 16.09.2016

Jawaban (2)


arrow_upward
1
arrow_downward 

var gulp = require("gulp");
var changedInPlace = require("gulp-changed-in-place");
var browserSync = require("browser-sync").create();
var sass = require("gulp-sass");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var rename = require("gulp-rename");
var autoprefixer = require("gulp-autoprefixer");
var cleanCSS = require("gulp-clean-css");
// var sourcemaps = require("gulp-sourcemaps");
// var runSequence = require("run-sequence");


// Static Server + watching scss/html files
gulp.task("browsersync", ["sass"], function() {

  browserSync.init({
    server: {
      baseDir: "./",
      index: "home.html"
    },
    ghostMode: false
  });


  gulp.watch("./scss/*.scss", ["sass"]);
  gulp.watch("./*.html").on("change", browserSync.reload);
  gulp.watch("./js/*.js").on("change", browserSync.reload);
});

  // Compile sass into CSS & auto-inject into browsers
gulp.task("sass", function() {
    return gulp.src("./scss/*.scss")
    .pipe(changedInPlace())
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./css"))
    .pipe(browserSync.stream());
});

Pada titik ini saya pikir akan bermanfaat untuk menunjukkan gulpfile.js saya yang berfungsi. Ini menggunakan sass tetapi Anda dapat menukarnya. Perhatikan itu menggunakan yang disukai

var browserSync = require("browser-sync").create();

dan menghindari array yang tidak biasa dan mungkin bermasalah yang Anda miliki dalam pernyataan jam tangan Anda. Tetapi jika Anda benar-benar memiliki 2 tugas 'servis' yang ditentukan, itu mungkin masalah Anda (lihat komentar saya di bawah)

person Mark    schedule 18.09.2016
comment
Hanya satu tugas serve di sini. Saya mempersingkatnya di postingan pertama lalu menambahkan versi lengkapnya. - person Makha; 18.09.2016
comment
gulp.watch('app/static/*.html').on("change", reload); Saya sudah berubah menjadi ini. Berfungsi dengan baik, terima kasih. - person Makha; 18.09.2016
comment
@Maxa Jika masalahnya terpecahkan, saya tidak keberatan memeriksa jawaban jika Anda merasa itu tepat. Terima kasih. - person Mark; 20.09.2016

arrow_upward
0
arrow_downward

Saya tidak yakin baris berikut adalah sintaks yang valid:

gulp.watch(['app/static/*.html'], [reload]);

gulp.watch(glob[, opts], task) : ketika digunakan dengan cara ini - seperti yang Anda lakukan - tugas adalah larik STRINGS yang dibuat oleh gulp.task(). Lihat dokumen

Names of task(s) to run when a file changes, added with gulp.task()

dari https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulpwatchglob--opts-tasks-or-gulpwatchglob--opts-cb

Kami pasti perlu melihat reload dan sisa gulpfile.js Anda

Berikut adalah contoh kode yang berfungsi dengan pemuatan ulang browserSync misalnya:

 gulp.watch("./scss/*.scss", ["scss-watch"]);
 gulp.watch("./*.html").on("change", browserSync.reload);
      // gulp.watch("./css/*.css").on("change", browserSync.reload);
 gulp.watch("./js/*.js").on("change", browserSync.reload);
person Mark    schedule 15.09.2016
comment
Saya juga terkejut dengan [reload], tetapi sebenarnya ini berfungsi karena alasan yang paling aneh: tugas dalam array itu dimulai oleh apply()ing mereka ke orchestrator.start(), yang sebagai argumen terakhirnya mengambil fungsi panggilan balik yang dipanggil ketika tugas telah selesai dijalankan. Jadi, selama hanya elemen terakhir dalam array tugas Anda yang berupa fungsi, ia berfungsi. Namun mungkin tidak dimaksudkan untuk digunakan seperti itu ... - person Sven Schoenung; 15.09.2016
comment
Dalam dokumentasi gulp saya melihat dua bentuk gulp.watch: gulp.watch(glob[, opts], task) dan gulp.watch(glob[, opts, cb]) sehingga Anda tentu saja dapat menggunakan fungsi panggilan balik tetapi saya akan melakukannya Saya tidak berpikir dibungkus dalam array dan contohnya tidak membungkusnya begitu saja. Tapi penjelasan Anda sepertinya bagus. Tapi saya ingin melihat OP mengubahnya dan melihat apa yang terjadi - dan memberikan gulfile.js secara lengkap. - person Mark; 16.09.2016
comment
@Mark Code telah ditambahkan ke postingan. reload adalah metode browserSync dan memuat ulang browser setelah setiap perubahan. reload berfungsi dengan baik di sini. - person Makha; 16.09.2016
comment
Apakah Anda memiliki dua tugas 'melayani' yang ditentukan: satu untuk memulai Sinkronisasi browser dan satu lagi untuk menonton. Cuplikan kode pertama Anda diberi nama 'serve' dan dalam cuplikan kode terakhir yang lebih panjang, Anda memiliki 'serve' yang lain. ? - person Mark; 18.09.2016