将 gulpfile.js 拆分为 Gulp 中的多个文件时出现问题 4
Trouble with splitting gulpfile.js into multiple files in Gulp 4
我是 Javascript 和 Gulp 的初学者。我正在根据使用 Gulp 3 的 udemy 课程学习这个,我一直在查看文档以将代码转换为 Gulp 4。到目前为止,这很有趣,因为我正在学习更多当我自己进行转换时,却卡在了这个上。不知各位能否给点建议。
问题:当我将 gulpfile.js 拆分为单独的文件以更好地组织我的文件时,它开始抛出错误。下面的代码。
styles.js
var gulp = require('gulp'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import');
function styles(cb) {
return gulp.src('./app/assets/styles/styles.css')
.pipe(postcss([cssImport, cssvars, nested, autoprefixer]))
.pipe(gulp.dest('./app/temp/styles'));
cb();
}
exports.styles = styles;
watch.js
var gulp = require('gulp'),
browserSync = require('browser-sync').create();
function cssInject(cb) {
return gulp.src('./app/temp/styles/styles.css')
.pipe(browserSync.stream());
cb();
}
function browserSyncReload(cb) {
browserSync.reload();
cb();
}
function watch(cb) {
browserSync.init({
notify: false,
server: {
baseDir: "app"
}
});
watch('./app/index.html', browserSyncReload);
watch('./app/assets/styles/styles.css', gulp.series(cssInject, styles));
cb();
}
exports.browserSyncReload = browserSyncReload;
exports.watch = watch;
gulpfile.js
var stylesTasks = require('./gulp/tasks/styles.js'),
watchTasks = require('./gulp/tasks/watch.js');
exports.watch = watchTasks.watch;
exports.styles = stylesTasks.styles;
exports.browserSyncReload = watchTasks.browserSyncReload;
当我运行“gulp观看”时,这就是我得到的。
错误
$ gulp watch
[21:14:28] Using gulpfile ~/Projects/travel-site/gulpfile.js
[21:14:28] Starting 'watch'...
internal/async_hooks.js:195
function emitInitNative(asyncId, type, triggerAsyncId, resource) { ^
RangeError: Maximum call stack size exceeded
(Use `node --trace-uncaught ...` to show where the exception was thrown)
我找到了另一个 post,它的代码几乎相同,但有不同的错误 - 这恰好是我之前遇到的错误之一,并遵循了 [=54] 中提到的解决方案=] - 那是我收到此错误的时间。这是 link 到 post。
非常感谢任何帮助。感谢您的宝贵时间。
我有一篇完整的文章,展示了如何从 gulp3 到 gulp4,我想你会找到你需要的一切 there
但基本上,我认为您需要看一下这些模块:
那么,从 gulp.js 的角度来看,你可以得到这样的结果:
// gulpfile.js
global.config = require('./gulp/config/config.json');
require('events').EventEmitter.prototype._maxListeners = 1000;
require('require-dir')('./gulp/tasks/styles');
require('require-dir')('./gulp/tasks/watch');
//... etc ...
这样您就可以创建样式任务并将其导出 :
var gulp = require('gulp'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import');
function styles(cb) {
return gulp.src('./app/assets/styles/styles.css')
.pipe(postcss([cssImport, cssvars, nested, autoprefixer]))
.pipe(gulp.dest('./app/temp/styles'));
cb();
}
const stylesTask = task('styles', styles);
exports.stylesTask = stylesTask;
然后您可以验证其被 gulp 识别:
gulp --tasks
如果您正确地看到您的样式任务,您现在应该能够 运行 通过 运行ning 完成您的任务:
gulp styles
对监视任务重复这些步骤。
回答我自己的问题感觉很奇怪,但我在玩了几天后找到了解决方案。见下文。
我需要将样式导入 watch.js,而不是 gulpfile.js。那是我的第一个错误。为此,我将以下行添加到 watch.js
var styles = require('./styles').styles;
然后我的gulpfile.js只需要两行
gulpfile.js
var watchTask = require('./gulp/tasks/watch').watch;
exports.default = watchTask;
我还删除了变量 gulp,而是为 src 和 dest 创建了变量。因此,其余代码如下所示。
styles.js
var {src, dest} = require('gulp'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import');
const styles = function (cb) {
return src('./app/assets/styles/styles.css')
.pipe(postcss([cssImport, cssvars, nested, autoprefixer]))
.pipe(dest('./app/temp/styles'));
cb();
}
exports.styles = styles;
watch.js
var styles = require('./styles').styles;
var {src, series, watch} = require('gulp'),
browserSync = require('browser-sync').create();
const cssInject = function (cb) {
return src('./app/temp/styles/styles.css')
.pipe(browserSync.stream());
cb();
}
const reload = function (cb) {
browserSync.reload();
cb();
}
const watchTask = function (cb) {
browserSync.init({
notify: false,
server: {
baseDir: "app"
}
});
watch('./app/index.html', reload);
watch('./app/assets/styles/styles.css', series(cssInject, styles));
cb();
}
exports.watch = watchTask;
已解决!希望这对其他人有帮助。
我是 Javascript 和 Gulp 的初学者。我正在根据使用 Gulp 3 的 udemy 课程学习这个,我一直在查看文档以将代码转换为 Gulp 4。到目前为止,这很有趣,因为我正在学习更多当我自己进行转换时,却卡在了这个上。不知各位能否给点建议。
问题:当我将 gulpfile.js 拆分为单独的文件以更好地组织我的文件时,它开始抛出错误。下面的代码。
styles.js
var gulp = require('gulp'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import');
function styles(cb) {
return gulp.src('./app/assets/styles/styles.css')
.pipe(postcss([cssImport, cssvars, nested, autoprefixer]))
.pipe(gulp.dest('./app/temp/styles'));
cb();
}
exports.styles = styles;
watch.js
var gulp = require('gulp'),
browserSync = require('browser-sync').create();
function cssInject(cb) {
return gulp.src('./app/temp/styles/styles.css')
.pipe(browserSync.stream());
cb();
}
function browserSyncReload(cb) {
browserSync.reload();
cb();
}
function watch(cb) {
browserSync.init({
notify: false,
server: {
baseDir: "app"
}
});
watch('./app/index.html', browserSyncReload);
watch('./app/assets/styles/styles.css', gulp.series(cssInject, styles));
cb();
}
exports.browserSyncReload = browserSyncReload;
exports.watch = watch;
gulpfile.js
var stylesTasks = require('./gulp/tasks/styles.js'),
watchTasks = require('./gulp/tasks/watch.js');
exports.watch = watchTasks.watch;
exports.styles = stylesTasks.styles;
exports.browserSyncReload = watchTasks.browserSyncReload;
当我运行“gulp观看”时,这就是我得到的。
错误
$ gulp watch
[21:14:28] Using gulpfile ~/Projects/travel-site/gulpfile.js
[21:14:28] Starting 'watch'...
internal/async_hooks.js:195
function emitInitNative(asyncId, type, triggerAsyncId, resource) { ^
RangeError: Maximum call stack size exceeded
(Use `node --trace-uncaught ...` to show where the exception was thrown)
我找到了另一个 post,它的代码几乎相同,但有不同的错误 - 这恰好是我之前遇到的错误之一,并遵循了 [=54] 中提到的解决方案=] - 那是我收到此错误的时间。这是 link 到 post。
非常感谢任何帮助。感谢您的宝贵时间。
我有一篇完整的文章,展示了如何从 gulp3 到 gulp4,我想你会找到你需要的一切 there
但基本上,我认为您需要看一下这些模块:
那么,从 gulp.js 的角度来看,你可以得到这样的结果:
// gulpfile.js
global.config = require('./gulp/config/config.json');
require('events').EventEmitter.prototype._maxListeners = 1000;
require('require-dir')('./gulp/tasks/styles');
require('require-dir')('./gulp/tasks/watch');
//... etc ...
这样您就可以创建样式任务并将其导出 :
var gulp = require('gulp'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import');
function styles(cb) {
return gulp.src('./app/assets/styles/styles.css')
.pipe(postcss([cssImport, cssvars, nested, autoprefixer]))
.pipe(gulp.dest('./app/temp/styles'));
cb();
}
const stylesTask = task('styles', styles);
exports.stylesTask = stylesTask;
然后您可以验证其被 gulp 识别:
gulp --tasks
如果您正确地看到您的样式任务,您现在应该能够 运行 通过 运行ning 完成您的任务:
gulp styles
对监视任务重复这些步骤。
回答我自己的问题感觉很奇怪,但我在玩了几天后找到了解决方案。见下文。
我需要将样式导入 watch.js,而不是 gulpfile.js。那是我的第一个错误。为此,我将以下行添加到 watch.js
var styles = require('./styles').styles;
然后我的gulpfile.js只需要两行
gulpfile.js
var watchTask = require('./gulp/tasks/watch').watch;
exports.default = watchTask;
我还删除了变量 gulp,而是为 src 和 dest 创建了变量。因此,其余代码如下所示。
styles.js
var {src, dest} = require('gulp'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import');
const styles = function (cb) {
return src('./app/assets/styles/styles.css')
.pipe(postcss([cssImport, cssvars, nested, autoprefixer]))
.pipe(dest('./app/temp/styles'));
cb();
}
exports.styles = styles;
watch.js
var styles = require('./styles').styles;
var {src, series, watch} = require('gulp'),
browserSync = require('browser-sync').create();
const cssInject = function (cb) {
return src('./app/temp/styles/styles.css')
.pipe(browserSync.stream());
cb();
}
const reload = function (cb) {
browserSync.reload();
cb();
}
const watchTask = function (cb) {
browserSync.init({
notify: false,
server: {
baseDir: "app"
}
});
watch('./app/index.html', reload);
watch('./app/assets/styles/styles.css', series(cssInject, styles));
cb();
}
exports.watch = watchTask;
已解决!希望这对其他人有帮助。