Out of memory error: assemble build task & browser sync watch
Out of memory error: assemble build task & browser sync watch
我遇到一个问题,我有一个节点服务任务监视 .hbs 文件的更改,如果发生更改,则会触发另一个名为 'styleguide' 的节点任务。
此样式指南构建任务使用节点 API 版本 Assemble (v0.23.0)。
发生的事情是,随着时间的推移,构建任务的执行时间越来越长,直到最终因内存不足错误和 JS 堆栈跟踪而失败。
这里是 serve 任务的 styleguide watch 部分。
const styleguideWatchFiles = [
'./src/templates/layouts/styleguide.hbs',
'./src/templates/styleguide/**/*.hbs',
'./src/components/styleguide/**/*.hbs'
];
//watch STYLEGUIDE
chokidar.watch(styleguideWatchFiles, {
ignoreInitial: true
})
.on('error', error => log.error(error))
.on('all', (event, path) => {
log.file('File Changed', path);
run(styleguide).then(() => {
browserSync.reload('*.html');
}).catch(err => {
log.error(err);
});
});
这是样式指南构建任务。
/*eslint no-console: 0 */
/**
* styleguide.js
*
* Build script for handling styleguide html templates
* using category collections in front-matter to categorise parts of styleguide
* with Assemble and Handlebars.
*
* Handlebars: http://handlebarsjs.com/
* Assemble: https://github.com/assemble/assemble
*
*/
import assemble from 'assemble';
import yaml from 'js-yaml';
import plumber from 'gulp-plumber';
import log from './utils/log';
import getPageData from './utils/getPageData';
import renameExt from './utils/renameExtension';
import expand from './utils/expandMatter';
import { styleguidePathConfig as path } from '../config';
export default function styleguide() {
return new Promise( (resolve, reject) => {
// Create assemble instance
let templates = assemble();
templates.dataLoader('yml', function(str) {
return yaml.safeLoad(str);
});
templates.data(path.data);
templates.preRender(/\.(hbs|html)$/, expand(templates));
// Create styleguide pages
templates.task('preload', (cb) => {
templates.partials(path.sgPartials);
templates.layouts(path.layouts);
// Register helpers
templates.helpers(path.helpers);
// Add pages
templates.pages(path.sgPages);
// Styleguide page data - used for building dynamic menus
templates.data({
coreItems: getPageData('./src/templates/styleguide/core-elements'),
componentItems: getPageData('./src/templates/styleguide/components'),
generalItems: getPageData('./src/templates/styleguide/general'),
sectionItems: getPageData('./src/templates/styleguide/sections')
});
cb();
});
templates.task('styleguide', ['preload'], () => {
// Render out the template files to 'dist/styleguide'
return templates.toStream('pages')
// Define our own handler for more error information.
.pipe(plumber({
errorHandler: err => {
// If we encounter this error on a build task, kill the promise
if (process.argv.includes('build')) return reject(err);
log.error(`${err.message} in ${err.path}.`);
}
}))
.pipe(templates.renderFile())
.pipe(plumber.stop())
.pipe(renameExt())
.pipe(templates.dest('dist/styleguide'));
});
// Run the Assemble build methods
templates.build('styleguide', err => {
if (err) return reject(err);
return resolve();
});
});
}
getPageData 函数只是循环遍历指定的文件夹,并构建一个对象数组,供 handlebars 模板使用,以基于正在编译的页面构建动态菜单。
所以我的问题是导致内存泄漏的原因是什么?
是不是每次 styleguide.js 任务调用更改时 assemble() 实例在解析返回后没有被垃圾回收?
我需要 运行 全程关注吗?调用 'preload' 和样式指南任务?
感谢阅读。
运行 风格指南任务本身(而不是作为 npm start
的一部分)我看到承诺没有解决。
所以问题是两件事...
首先:在 'styleguide' 任务中,gulp 管道工应该向我提供的错误日志在错误的位置(在拒绝下方)。把所有的东西都拿出来,然后一块一块地重建,这让我看到了这一点(感谢@doowb)
其次:一旦我在控制台中显示错误,我就能够查明发生了什么。原来任务没有解决的原因是因为 assemble 找不到对部分的引用。这让我找到了我的配置文件,我在其中设置了部分数组,但它不包括我需要的一切。
我现在觉得很傻,但感谢你指引我走上正轨。
我遇到一个问题,我有一个节点服务任务监视 .hbs 文件的更改,如果发生更改,则会触发另一个名为 'styleguide' 的节点任务。
此样式指南构建任务使用节点 API 版本 Assemble (v0.23.0)。
发生的事情是,随着时间的推移,构建任务的执行时间越来越长,直到最终因内存不足错误和 JS 堆栈跟踪而失败。
这里是 serve 任务的 styleguide watch 部分。
const styleguideWatchFiles = [
'./src/templates/layouts/styleguide.hbs',
'./src/templates/styleguide/**/*.hbs',
'./src/components/styleguide/**/*.hbs'
];
//watch STYLEGUIDE
chokidar.watch(styleguideWatchFiles, {
ignoreInitial: true
})
.on('error', error => log.error(error))
.on('all', (event, path) => {
log.file('File Changed', path);
run(styleguide).then(() => {
browserSync.reload('*.html');
}).catch(err => {
log.error(err);
});
});
这是样式指南构建任务。
/*eslint no-console: 0 */
/**
* styleguide.js
*
* Build script for handling styleguide html templates
* using category collections in front-matter to categorise parts of styleguide
* with Assemble and Handlebars.
*
* Handlebars: http://handlebarsjs.com/
* Assemble: https://github.com/assemble/assemble
*
*/
import assemble from 'assemble';
import yaml from 'js-yaml';
import plumber from 'gulp-plumber';
import log from './utils/log';
import getPageData from './utils/getPageData';
import renameExt from './utils/renameExtension';
import expand from './utils/expandMatter';
import { styleguidePathConfig as path } from '../config';
export default function styleguide() {
return new Promise( (resolve, reject) => {
// Create assemble instance
let templates = assemble();
templates.dataLoader('yml', function(str) {
return yaml.safeLoad(str);
});
templates.data(path.data);
templates.preRender(/\.(hbs|html)$/, expand(templates));
// Create styleguide pages
templates.task('preload', (cb) => {
templates.partials(path.sgPartials);
templates.layouts(path.layouts);
// Register helpers
templates.helpers(path.helpers);
// Add pages
templates.pages(path.sgPages);
// Styleguide page data - used for building dynamic menus
templates.data({
coreItems: getPageData('./src/templates/styleguide/core-elements'),
componentItems: getPageData('./src/templates/styleguide/components'),
generalItems: getPageData('./src/templates/styleguide/general'),
sectionItems: getPageData('./src/templates/styleguide/sections')
});
cb();
});
templates.task('styleguide', ['preload'], () => {
// Render out the template files to 'dist/styleguide'
return templates.toStream('pages')
// Define our own handler for more error information.
.pipe(plumber({
errorHandler: err => {
// If we encounter this error on a build task, kill the promise
if (process.argv.includes('build')) return reject(err);
log.error(`${err.message} in ${err.path}.`);
}
}))
.pipe(templates.renderFile())
.pipe(plumber.stop())
.pipe(renameExt())
.pipe(templates.dest('dist/styleguide'));
});
// Run the Assemble build methods
templates.build('styleguide', err => {
if (err) return reject(err);
return resolve();
});
});
}
getPageData 函数只是循环遍历指定的文件夹,并构建一个对象数组,供 handlebars 模板使用,以基于正在编译的页面构建动态菜单。
所以我的问题是导致内存泄漏的原因是什么?
是不是每次 styleguide.js 任务调用更改时 assemble() 实例在解析返回后没有被垃圾回收?
我需要 运行 全程关注吗?调用 'preload' 和样式指南任务?
感谢阅读。
运行 风格指南任务本身(而不是作为 npm start
的一部分)我看到承诺没有解决。
所以问题是两件事...
首先:在 'styleguide' 任务中,gulp 管道工应该向我提供的错误日志在错误的位置(在拒绝下方)。把所有的东西都拿出来,然后一块一块地重建,这让我看到了这一点(感谢@doowb)
其次:一旦我在控制台中显示错误,我就能够查明发生了什么。原来任务没有解决的原因是因为 assemble 找不到对部分的引用。这让我找到了我的配置文件,我在其中设置了部分数组,但它不包括我需要的一切。
我现在觉得很傻,但感谢你指引我走上正轨。