[英]Gulp-file-include doesn't work with gulp.watch
我想使用 gulp gulp-file-include
從不同的 HTML 文件中組裝 index.html 。 dist 文件夾包含所有生產文件。 問題是 gulp gulp-watch
無法識別 HTML 文件是否已更改,因此當我運行 watch 時, dist 文件夾中的 HTML 文件不會更新。
如何自定義 gulp 以便 gulp gulp-watch
也實時檢測到這些變化?
-- dist
---- css
---- js
---- vendor
---- index.html
-- res
---- js
---- scss
-- src
---- footer.html
---- nav.html
gulpfile.js
index.html
索引.html
@@include('./src/nav.html')
@@include('./src/footer.html')
gulpfile.js
"use strict";
// Load plugins
const autoprefixer = require("gulp-autoprefixer");
const browsersync = require("browser-sync").create();
const cleanCSS = require("gulp-clean-css");
const del = require("del");
const gulp = require("gulp");
const header = require("gulp-header");
const merge = require("merge-stream");
const plumber = require("gulp-plumber");
const rename = require("gulp-rename");
const sass = require("gulp-sass");
const uglify = require("gulp-uglify");
const fileinclude = require('gulp-file-include');
// Load package.json for banner
const pkg = require('./package.json');
// BrowserSync
function browserSync(done) {
browsersync.init({
server: {
baseDir: "./dist/"
},
port: 3000
});
done();
}
// BrowserSync reload
function browserSyncReload(done) {
browsersync.reload();
done();
}
// Clean vendor
function clean() {
return del(["./dist/vendor/"]);
}
// Bring third party dependencies from node_modules into vendor directory
function modules() {
// Bootstrap
var bootstrap = gulp.src('./node_modules/bootstrap/dist/**/*')
.pipe(gulp.dest('./dist/vendor/bootstrap'));
// Font Awesome CSS
var fontAwesomeCSS = gulp.src('./node_modules/@fortawesome/fontawesome-free/css/**/*')
.pipe(gulp.dest('./dist/vendor/fontawesome-free/css'));
// Font Awesome Webfonts
var fontAwesomeWebfonts = gulp.src('./node_modules/@fortawesome/fontawesome-free/webfonts/**/*')
.pipe(gulp.dest('./dist/vendor/fontawesome-free/webfonts'));
// jQuery Easing
var jqueryEasing = gulp.src('./node_modules/jquery.easing/*.js')
.pipe(gulp.dest('./dist/vendor/jquery-easing'));
// jQuery
var jquery = gulp.src([
'./node_modules/jquery/dist/*',
'!./node_modules/jquery/dist/core.js'
])
.pipe(gulp.dest('./dist/vendor/jquery'));
return merge(bootstrap, fontAwesomeCSS, fontAwesomeWebfonts, jquery, jqueryEasing);
}
// CSS task
function css() {
return gulp
.src("./res/scss/**/*.scss")
.pipe(plumber())
.pipe(sass({
outputStyle: "expanded",
includePaths: "./node_modules",
}))
.on("error", sass.logError)
.pipe(autoprefixer({
cascade: false
}))
.pipe(header(banner, {
pkg: pkg
}))
.pipe(gulp.dest("./dist/css"))
.pipe(rename({
suffix: ".min"
}))
.pipe(cleanCSS())
.pipe(gulp.dest("./dist/css"))
.pipe(browsersync.stream());
}
// JS task
function js() {
return gulp
.src([
'./res/js/*.js',
'!./res/js/*.min.js',
'!./res/js/contact_me.js',
'!./res/js/jqBootstrapValidation.js'
])
.pipe(uglify())
.pipe(header(banner, {
pkg: pkg
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./dist/js'))
.pipe(browsersync.stream());
}
function html() {
return gulp
.src(['index.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('./dist/'))
.pipe(browsersync.stream());
}
// Watch files
function watchFiles() {
gulp.watch("./res/scss/**/*", css);
gulp.watch(["./res/js/**/*", "!./dist/js/**/*.min.js"], js);
gulp.watch("./**/*.html", browserSyncReload);
}
// Define complex tasks
const vendor = gulp.series(clean, modules);
const build = gulp.series(vendor, gulp.parallel(css, js, html));
const watch = gulp.series(build, gulp.parallel(watchFiles, browserSync));
// Export tasks
exports.css = css;
exports.js = js;
exports.html = html;
exports.clean = clean;
exports.vendor = vendor;
exports.build = build;
exports.watch = watch;
exports.default = build;
BrowserSync 很棒,但似乎總是很難讓它以你想要的方式運行。 我最終創建了一個小測試項目來調試你的 gulpfile.js
這是您的代碼的經過測試的工作版本,注釋如下:
'use strict';
// Load plugins
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();
const cleanCSS = require('gulp-clean-css');
const del = require('del');
const gulp = require('gulp');
const header = require('gulp-header');
const merge = require('merge-stream');
const plumber = require('gulp-plumber');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const uglify = require('gulp-uglify');
const fileinclude = require('gulp-file-include');
// Load package.json for banner
const pkg = require('./package.json');
// BrowserSync
function server(done) {
browserSync.init({
server: {
baseDir: './dist/'
},
port: 3000
});
done();
}
// server reload
function browserSyncReload(done) {
browserSync.reload();
done();
};
// Clean vendor
function clean() {
return del(['./dist/vendor/']);
}
// Bring third party dependencies from node_modules into vendor directory
function modules() {
// Bootstrap
var bootstrap = gulp.src('./node_modules/bootstrap/dist/**/*')
.pipe(gulp.dest('./dist/vendor/bootstrap'));
// Font Awesome CSS
var fontAwesomeCSS = gulp.src('./node_modules/@fortawesome/fontawesome-free/css/**/*')
.pipe(gulp.dest('./dist/vendor/fontawesome-free/css'));
// Font Awesome Webfonts
var fontAwesomeWebfonts = gulp.src('./node_modules/@fortawesome/fontawesome-free/webfonts/**/*')
.pipe(gulp.dest('./dist/vendor/fontawesome-free/webfonts'));
// jQuery Easing
var jqueryEasing = gulp.src('./node_modules/jquery.easing/*.js')
.pipe(gulp.dest('./dist/vendor/jquery-easing'));
// jQuery
var jquery = gulp.src([
'./node_modules/jquery/dist/*',
'!./node_modules/jquery/dist/core.js'
])
.pipe(gulp.dest('./dist/vendor/jquery'));
return merge(bootstrap, fontAwesomeCSS, fontAwesomeWebfonts, jquery, jqueryEasing);
}
// CSS task
function css() {
return gulp
.src('./res/scss/**/*.scss')
.pipe(plumber())
.pipe(sass({
outputStyle: 'expanded',
includePaths: './node_modules',
}))
.on('error', sass.logError)
.pipe(autoprefixer({
cascade: false
}))
.pipe(header(banner, {
pkg: pkg
}))
.pipe(gulp.dest('./dist/css'))
.pipe(rename({
suffix: '.min'
}))
.pipe(cleanCSS())
.pipe(gulp.dest('./dist/css'))
.pipe(browserSync.stream({match: '**/*.css'}));
}
// JS task
function js() {
return gulp
.src([
'./res/js/*.js',
'!./res/js/*.min.js',
'!./res/js/contact_me.js',
'!./res/js/jqBootstrapValidation.js'
])
.pipe(uglify())
.pipe(header(banner, {
pkg: pkg
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./dist/js'));
}
function html() {
return gulp
.src(['index.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('./dist/'));
}
// Watch files
function watchFiles() {
gulp.watch('./res/scss/**/*', css);
gulp.watch(['./res/js/**/*', '!./dist/js/**/*.min.js'], gulp.series(js, browserSyncReload));
gulp.watch(['./src/**/*.html', 'index.html'], gulp.series(html, browserSyncReload));
}
// Define complex tasks
const vendor = gulp.series(clean, modules);
const build = gulp.series(vendor, gulp.parallel(css, js, html));
const watch = gulp.series(build, server, watchFiles);
// Export tasks
exports.css = css;
exports.js = js;
exports.html = html;
exports.clean = clean;
exports.vendor = vendor;
exports.build = build;
exports.watch = watch;
exports.browserSyncReload = browserSyncReload;
exports.server = server;
exports.default = build;
只需更改幾位即可使其正常工作:
gulp.watch('./**/*.html', browserSyncReload);
to: gulp.watch(['./src/**/*.html', 'index.html'], gulp.series(html, browserSyncReload));
stream
用於將代碼注入頁面,因此對於html
和js
將無法正常工作,因此我已將其從任務中刪除並替換為監視任務中的reload
。browserSyncReload
和server
watchFiles
和browserSync
在並行運行時似乎存在競爭問題,因此它們現在串聯運行。 即:服務器先構建,然后文件被監視。不需要但在此過程中發生的更改:
browserSync
和名為browsersync
的 const 讓我感到困惑,因此 function 已重命名為server
,而 const 現在是browserSync
。stream
8CBA22E28EB17B5F5C6AE2A266AZ 任務中的 stream 設置為僅match: '**/*.css'
嘗試改變:
gulp.watch("./**/*.html", browserSyncReload);
至
gulp.watch("./src/**/*.html", browserSyncReload);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.