- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想使用gulp-file-include
从不同的HTML文件中组装index.html。 dist 文件夹包含所有生产文件。问题是 gulp-watch 无法识别 HTML 文件是否已更改,因此当我运行 watch 时,dist 文件夹中的 HTML 文件不会更新。
如何自定义 gulp,以便 gulp-watch
也实时检测这些变化?
-- dist
---- css
---- js
---- vendor
---- index.html
-- res
---- js
---- scss
-- src
---- footer.html
---- nav.html
gulpfile.js
index.html
index.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);
更新为: gulp.watch(['./src/* */*.html', 'index.html'], gulp.series(html, browserSyncReload));
stream
用于将代码注入(inject)到页面上,因此对于 html
和 js
无法按您想要的方式工作,因此我已将其从任务中删除,并替换为监视任务中的重新加载
。browserSyncReload
和 server
watchFiles
和 browserSync
似乎存在竞争问题,因此它们现在串联运行。即:首先构建服务器,然后监视文件。不需要但在此过程中发生的更改:
browserSync
的函数和名为 browsersync
的 const 让我感到困惑,因此该函数已重命名为 server
并且 const 现在是浏览器同步
。stream
设置为仅 match: '**/*.css'
关于javascript - Gulp-file-include 不适用于 gulp.watch,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58916741/
在 Elastic Watcher 的官方网站上,他们说 Watcher 是 Elasticsearch 的插件,可根据数据的变化提供警报和通知 可以通过定期 Elasticsearch 查询 识别相
我有一个配置了 watch OS1 架构的项目。现在我想在同一个项目中只支持 watch OS2 架构。因此,为了在现有项目中仅配置 watch OS2,我删除了 watch OS1 的所有目标,包括
我想从我的 xcode 项目生成一个 .watchface 文件。有什么方法可以从默认 watch 应用程序之外创建 .watchface 文件吗? 我找到了一个网站Facer ,他们提供定制选项并从
我的手机在 Xcode 中被列为 ineligible target 并在旁边显示(没有配对的 Apple Watch)。 我的 Apple Watch 在 iOS 设备下注册。我可以看到UDID。
最近我在 gulp watch 上遇到错误,我用谷歌搜索并试图解决这个问题,但没有成功。有谁知 Prop 体原因吗? 应用程序基于 AngulerJs 1.3 并运行在 npm 5.7.1/node
关闭。这个问题需要更多focused .它目前不接受答案。 想改善这个问题吗?更新问题,使其仅关注一个问题 editing this post . 4年前关闭。 Improve this questi
我有一个并发症,可能需要每 5 分钟更新一次。这很容易总结为每天 120 次更新。有没有办法只在用户唤醒 watch 时更新? 最佳答案 我认为您的问题的答案是否,目前没有办法只在用户唤醒 watch
有没有人有苹果 watch 在没有任何额外应用程序或集成设备的情况下生成的数据类型列表?它必须是 these 的子集,但我无法弄清楚哪些 最佳答案 数据类型的确切列表取决于型号,但最新的 Apple
在我的苹果 watch 扩展中,我想使用长按手势功能。是否有任何 api 等效于 UILongPressGestureRecognizer。我的要求是,在 watch 扩展上,我有表格想要长按单元格,
我一直在互联网上关注很多教程来学习如何设置并发症。按预期设置并发症我没有问题。 直到初始时间线条目过期。 12 小时后,我不知道如何更新它以保持并发症的存在。我将在下面分享我拥有的所有内容,希望有人可
今天几乎是偶然的,我偶然发现了索尼正在开放固件开发并在他们自己的引擎盖下创建一个项目的公告: http://developer.sonymobile.com/services/open-smartwa
目前用于语音听写的方法并不忙。使用的方法是“presentTextInputControllerWithSuggestions”。它遵循单个语音输入“VoiceInputButton -> Speak
我在获取 gulp-watch 时遇到问题或 gulp-watch-less在遵循记录的示例后触发。我最初解决的问题是lazypipe(此处未显示),但在我看来,我在使用插件的方式上做错了。这是我的简
我正在使用 Xcode 开发 Apple Watch 应用程序。我想在屏幕的左上角放置一些文本,与列出时间的位置相邻。 当我将标签向上拖动到屏幕的一部分时,它会自动向下对齐。 我看到大多数 Apple
我似乎找不到在哪里设置我的 Apple Watch 应用程序的产品名称。我确实看到了产品名称选项,但更新它没有任何作用。也看不到文档中的任何内容 最佳答案 为了让您的应用程序名称在 iPhone 上的
只是一个简单的问题。 选项和实例方法有什么区别? 基于 watch 示例,我们可以将 watcher 实现为一个选项( https://v3.vuejs.org/api/options-data.ht
是否可以设置count而不会触发 $watch打回来? $scope.count=1; $scope.$watch('count',function(){...}); 谢谢。 最佳答案 您可以使用 s
对于 sass 目前我正在使用 sass --watch path1:path2 将 scss 文件编译为 css 但我什至发现 compass watch path1:path2 还。这两款 wat
“事件”应用程序是否有 API?例如,我想从应用程序的“锻炼”部分检索信息(您燃烧的卡路里),我想检索您第一次打开应用程序时输入的个人信息。那可能吗?我如何检索这些信息? 最佳答案 没有专门针对事件应
有什么方法可以在 Apple Watch 上启用/配置 Wi-Fi 代理服务器吗? 我们想通过 Charles 测试一些东西,所以我们想将 Apple Watch 与 Charles 连接起来。 我没
我是一名优秀的程序员,十分优秀!