gulp-watch รันงานทั้งหมดหากดูไฟล์ html

มีงาน 'เสิร์ฟ' พร้อมฟังก์ชันนาฬิกาดังที่แสดงด้านล่าง:

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

เมื่อฉันอัปเดตไฟล์ js หรือ css อึกจะดำเนินการเฉพาะงาน concatjs หรือ concatcss ตามลำดับ แต่ถ้าจะอัปเดตไฟล์ html อึกรันงานทั้งหมดแม้กระทั่งงานที่ไม่ได้ลงทะเบียนกับฟังก์ชัน watch และมันจะเกิดข้อผิดพลาด:

[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

บางทีอึกอาจใช้งานได้กับไฟล์ html ในอีกทางหนึ่ง? รหัสทั้งหมดที่ฉันใช้:

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]);
});

person Makha    schedule 15.09.2016    source แหล่งที่มา
comment
ฉันคิดว่าบันทึกคือสิ่งที่คุณเห็นทันทีหลังจากบันทึกการเปลี่ยนแปลงไฟล์ 'app/static/*.html' ไฟล์ใดไฟล์หนึ่ง reload ทำงานเมื่อคุณบันทึกการเปลี่ยนแปลง 'source/scripts/*.js' หรือ 'source/styles/*.css' หรือไม่ reload ของคุณคืออะไร และ browserSync.init() ของคุณตั้งค่าอย่างไร   -  person henry    schedule 15.09.2016
comment
@henry ใช่ ฉันได้รับบันทึกข้อผิดพลาดนี้หลังจากที่ 'app/static/*.html' ถูกเปลี่ยนแปลง reload ใช้ได้กับไฟล์ทั้งหมดนั้น (js, css, html) เพิ่มรหัสในโพสต์แล้ว   -  person Makha    schedule 16.09.2016


คำตอบ (2)


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());
});

เมื่อมาถึงจุดนี้ ฉันคิดว่าการแสดง gulpfile.js ที่ทำงานของฉันน่าจะเป็นแนวทางได้ มันใช้เรื่องไร้สาระ แต่คุณสามารถสลับมันได้ โปรดทราบว่าจะใช้สิ่งที่ต้องการ

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

และหลีกเลี่ยงอาร์เรย์ที่ผิดปกติและอาจเป็นปัญหาที่คุณมีในคำสั่ง watch ของคุณ แต่ถ้าคุณมีงาน 'เสิร์ฟ' 2 งานจริงๆ นั่นอาจเป็นปัญหาของคุณ (ดูความคิดเห็นของฉันด้านล่าง)

person Mark    schedule 18.09.2016
comment
มี serve งานเดียวเท่านั้นที่นี่ ฉันทำให้มันสั้นตั้งแต่โพสต์แรกแล้วเพิ่มเวอร์ชันเต็ม - person Makha; 18.09.2016
comment
gulp.watch('app/static/*.html').on("change", reload); ฉันเปลี่ยนมาใช้สิ่งนี้แล้ว ทำงานได้ดีขอบคุณ - person Makha; 18.09.2016
comment
@Maxa หากปัญหาได้รับการแก้ไข ฉันจะไม่รังเกียจที่จะตรวจสอบคำตอบหากคุณรู้สึกว่าเหมาะสม ขอบคุณ. - person Mark; 20.09.2016

ฉันไม่แน่ใจว่าบรรทัดต่อไปนี้เป็นไวยากรณ์ที่ถูกต้อง:

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

gulp.watch(glob[, opts], Tasks) : เมื่อใช้วิธีนี้ - ขณะที่คุณกำลังทำอยู่ - งานคืออาร์เรย์ของ STRINGS ซึ่งสร้างขึ้นโดย gulp.task() ดูเอกสาร

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

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

เราจำเป็นต้องดูการโหลดซ้ำและส่วนที่เหลือของ gulpfile.js ของคุณอย่างแน่นอน

นี่คือโค้ดตัวอย่างที่ใช้งานได้กับการโหลดซ้ำของ browserSync เช่น:

 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
ฉันรู้สึกประหลาดใจกับ [reload] เช่นกัน แต่จริงๆ แล้วมันใช้งานได้ด้วยเหตุผลที่แปลกประหลาดที่สุด: งานในอาร์เรย์นั้นเริ่มต้นโดย apply()ing ไปยัง orchestrator.start(), ซึ่งเป็นอาร์กิวเมนต์สุดท้ายที่ใช้ฟังก์ชันโทรกลับที่ถูกเรียกใช้เมื่องานดำเนินการเสร็จสิ้น ตราบใดที่องค์ประกอบสุดท้ายในอาร์เรย์งานของคุณเท่านั้นที่เป็นฟังก์ชัน มันก็ใช้งานได้ อาจไม่ได้ตั้งใจจะใช้แบบนั้นอย่างไรก็ตาม ... - person Sven Schoenung; 15.09.2016
comment
ในเอกสารประกอบ gulp ฉันเห็น gulp.watch สองรูปแบบ: gulp.watch(glob[, opts], Tasks) และ gulp.watch(glob[, opts, cb]) เพื่อให้คุณสามารถใช้ฟังก์ชันโทรกลับได้แน่นอน แต่ฉันจะ อย่าคิดว่าถูกห่อหุ้มไว้ในอาร์เรย์และตัวอย่างของพวกเขาก็ไม่ได้ห่อหุ้มไว้ แต่คำอธิบายของคุณดูดี แต่ฉันอยากเห็น OP เปลี่ยนแปลงและดูว่าเกิดอะไรขึ้น - และจัดเตรียม gulfile.js ที่สมบูรณ์ - person Mark; 16.09.2016
comment
เพิ่ม @Mark Code ในโพสต์แล้ว reload เป็นวิธีการของ browserSync และจะโหลดเบราว์เซอร์ใหม่หลังการเปลี่ยนแปลงแต่ละครั้ง reload ทำงานได้ดีที่นี่ - person Makha; 16.09.2016
comment
คุณมีงาน 'เสิร์ฟ' สองงานที่กำหนดไว้หรือไม่: งานหนึ่งเพื่อเริ่มต้น browserSync และอีกงานหนึ่งเพื่อเฝ้าดู ข้อมูลโค้ดแรกของคุณชื่อ 'บริการ' และภายในข้อมูลโค้ดที่ยาวกว่านั้น คุณมี 'บริการ' อีกรายการหนึ่ง ? - person Mark; 18.09.2016