在Gulp 4中将gulpfile.js拆分为多个文件时出现问题

dxpyg8gm 于 2022-12-08 发布在 Gulp

关注(0)|答案(2)|浏览(172)

我是Javascript和Gulp的初学者。我是在udemy的一个课程上学习的，课程中使用了Gulp 3，我一直在看文档来将代码转换为Gulp 4。到目前为止，这很有趣，因为我自己做转换时学到了更多，但我在这一个上卡住了。不知道你们能不能提供一些建议。

问题：当我将gulpfile.js拆分为单独的文件以更好地组织文件时，它开始抛出错误。代码如下。
样式.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;

监视.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;

gulp文件.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 watch”时，这就是我得到的。

错误

$ 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)

我发现了另一个帖子，代码几乎完全相同，但有一个不同的错误-这恰好是我之前遇到的错误之一，并按照帖子中提到的解决方案-这就是我遇到这个错误的时候。这里是帖子的链接。
任何帮助都是非常感谢的。谢谢你的时间。

gulp

来源：https://stackoverflow.com/questions/68981941/trouble-with-splitting-gulpfile-js-into-multiple-files-in-gulp-4

2条答案

按热度按时间

nhaq1z211#

我有一个完整的文章，显示了许多如何关于从gulp3到gulp4，我想你会找到你需要的一切there
但基本上，我认为你需要看一下这些模块：

然后，从gulp.js的Angular 来看，您可以得到如下所示的结果：

// 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 --tasks

如果您正确地看到了样式任务，则现在应该能够通过运行以下命令来运行任务：

gulp styles

对监视任务重复这些步骤。

赞(0）回复(0）举报 2022-12-08

2ic8powd2#

回答我自己的问题感觉很奇怪，但我在玩了几天后找到了解决办法。见下文。
我需要将样式导入watch.js，而不是gulpfile.js。这是我的第一个错误。

var styles = require('./styles').styles;

然后我的gulpfile.js只需要两行

gulp文件.js

var watchTask = require('./gulp/tasks/watch').watch;
exports.default = watchTask;

我还删除了变量gulp，而是为src和dest创建了变量。因此，其余代码如下所示。

样式.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;

监视.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;

因此解决了！希望这对其他人有帮助。

赞(0）回复(0）举报 2022-12-08

我来回答

在Gulp 4中将gulpfile.js拆分为多个文件时出现问题

2条答案

相关问题

热门标签

最新问答