时间戳

首页 > 解决方案 > 在 Gulp 4 中将 gulpfile.js 拆分为多个文件的问题

javascript - 在 Gulp 4 中将 gulpfile.js 拆分为多个文件的问题

问题描述

我是 Javascript 和 Gulp 的初学者。我正在根据使用 Gulp 3 的 udemy 课程学习这一点，并且我一直在查看将代码转换为 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;

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

我发现另一个帖子的代码几乎相同，但有一个不同的错误——这恰好是我之前遇到的错误之一，并且遵循了该帖子中提到的解决方案——这就是我得到这个错误的时候。这是帖子的链接。

任何帮助深表感谢。谢谢你的时间。

标签： javascriptgulpgulp-4

解决方案

我有一篇完整的文章，展示了许多关于从 gulp3 到 gulp4 的方法，我想你会在那里找到你需要的一切

但基本上，我认为你需要看看这些模块：

然后，从 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

如果你正确地看到你的样式任务，你现在应该可以通过运行来运行你的任务：

gulp styles

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

推荐阅读