为什么在构建项目时会出现问题？

Question

Everything used to work fine, even in this project there were no problems at the beginning, now it doesn't knock any errors, but when you enter the gulp or gulp build command, the assembly stops if you try several times, then the assembly completes successfully, also if the gulp command works make changes to css and js then everything works well, but if you make some changes to html , then this is not reflected in the browser and you need to restart everything.

 [13:51:33] Using gulpfile D:\Work\Taker Corporation\Automation\gulpfile.js [13:51:33] Starting 'default'... [13:51:33] Starting 'clean'... [13:51:33] Finished 'clean' after 6.71 ms [13:51:33] Starting 'build'... [13:51:33] Starting 'clean'... [13:51:33] Finished 'clean' after 272 μs [13:51:33] Starting 'html:build'...

 [Browsersync] Serving files from: dist/ [13:51:56] Starting 'html:build'... [Browsersync] Reloading Browsers... (buffered 9 events)

 "use strict"; var gulp = require("gulp"), autoprefixer = require("gulp-autoprefixer"), cssbeautify = require("gulp-cssbeautify"), removeComments = require('gulp-strip-css-comments'), rename = require("gulp-rename"), sass = require("gulp-sass"), rigger = require("gulp-rigger"), uglify = require("gulp-uglify"), watch = require("gulp-watch"), plumber = require("gulp-plumber"), run = require("run-sequence"), rimraf = require("rimraf"), webserver = require("browser-sync"); /* Paths to source/build/watch files =========================*/ var path = { build: { html: "dist/", js: "dist/assets/js/", css: "dist/assets/css/", img: "dist/assets/img/", fonts: "dist/assets/fonts/", json: "dist/assets/" }, src: { html: "src/*.{htm,html,php}", js: "src/assets/js/*.js", css: "src/assets/sass/*.scss", img: "src/assets/img/**/*.*", fonts: "src/assets/fonts/**/*.*", json: "src/assets/*.json" }, watch: { html: "src/**/*.{htm,html,php}", js: "src/**/*.js", css: "src/**/*.scss", img: "src/assets/img/**/*.*", fonts: "src/assets/fonts/**/*.*", json: "src/assets/*.json" }, clean: "./dist" }; /* Webserver config =========================*/ var config = { server: "dist/", notify: false, open: true, ui: false }; /* Tasks =========================*/ gulp.task("webserver", function () { webserver(config); }); gulp.task("html:build", function () { return gulp.src(path.src.html).pipe(plumber()).pipe(rigger()).pipe(gulp.dest(path.build.html)).pipe(webserver.reload({stream: true})); }); gulp.task("css:build", function () { gulp.src(path.src.css).pipe(plumber()).pipe(sass().on('error', sass.logError)).pipe(autoprefixer({ browsers: ["last 8 versions"], cascade: true })).pipe(cssbeautify()).pipe(gulp.dest(path.build.css)).pipe(webserver.reload({stream: true})); }); gulp.task("js:build", function () { gulp.src(path.src.js).pipe(plumber()).pipe(rigger()).pipe(gulp.dest(path.build.js)).pipe(uglify()).pipe(rename("main.min.js")).pipe(gulp.dest(path.build.js)).pipe(webserver.reload({stream: true})); }); gulp.task("fonts:build", function() { gulp.src(path.src.fonts).pipe(gulp.dest(path.build.fonts)); }); gulp.task("image:build", function () { gulp.src(path.src.img).pipe(gulp.dest(path.build.img)); }); gulp.task("json:build", function() { gulp.src(path.src.json).pipe(gulp.dest(path.build.json)); }); gulp.task("clean", function (cb) { rimraf(path.clean, cb); }); gulp.task('build', function (cb) { run( "clean", "html:build", "css:build", "js:build", "fonts:build", "image:build", "json:build", cb); }); gulp.task("watch", function() { watch([path.watch.html], function(event, cb) { gulp.start("html:build"); }); watch([path.watch.css], function(event, cb) { gulp.start("css:build"); }); watch([path.watch.js], function(event, cb) { gulp.start("js:build"); }); watch([path.watch.img], function(event, cb) { gulp.start("image:build"); }); watch([path.watch.fonts], function(event, cb) { gulp.start("fonts:build"); }); watch([path.watch.json], function(event, cb) { gulp.start("json:build"); }); }); gulp.task("default", function (cb) { run( "clean", "build", "webserver", "watch", cb); });

Answer 1

You need to use gulp-watch , it watches for changes: https://www.npmjs.com/package/gulp-watch