Question

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

2021-08-30

589

javascript gulp gulp-4

我是JavaScript和Gulp的初学者。我正在根据使用Gulp 3的Udemy课程来学习此内容，我一直在寻找将代码转换为Gulp4的文档。但是我被困在这一个上。想知道你们是否可以提供一些建议。

问题：当我将gulpfile.js拆分为单独的文件以更好地组织我的文件时，它会开始丢弃错误。下面的代码。

styles.js

611932925

watch.js

<代码> 246363897

gulpfile.js

541513480

当我运行“ Gulp观看”时，这就是我得到的。<<<<<<<<<<<<<<<<<<< /p>

错误

491511499

我找到了另一个具有几乎相同代码的帖子，但是有不同的错误 - 恰好是之一我也更早遇到的错误，并遵循了该帖子中提到的解决方案 - 那是我遇到此错误的时候。这是<a href="https://stackoverflow.com/questions/554777268/554777268/how-splite-gulpfile-tasks-tasks-into-different-file-file-file-n-gulp-on-gulp-4-without-without-without-without-hony-package＃link-link-link </a>对帖子。

任何帮助都非常感谢。感谢您的时间。

Answer 1

回答我自己的问题感觉很奇怪，但是经过几天的尝试，我找到了解决方案。见下文。

我需要将样式导入 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;

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

Answer 2

我有一篇完整的文章，展示了许多关于如何从 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

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