如何在 gulp 4 上将 gulpfile 任务分割成不同的文件，而无需任何像 gulp-hub 这样的包？

Question

我正在尝试将 gulpfile 任务拆分为不同的文件。我之前做过并将其添加到主 gulpfile 中，只需添加require('./path/taskName') 但这在 gulp 4 中不起作用

这是我的styles.js文件：

var gulp = require('gulp'),
    postcss = require('gulp-postcss'),
    autoprefixer = require('autoprefixer'),
    cssvars = require('postcss-simple-vars'),
    nestingCss = require('postcss-nested'),
    cssImport = require('postcss-import');

function styles(){
    console.log('Changes happened in CSS file');
    return gulp.src('./public/styles/style.css')
    .pipe(postcss([cssImport, cssvars, nestingCss, autoprefixer]))
    .pipe(gulp.dest('./public/temp/styles'));
}

 exports.styles = styles;

这是我的watch.js文件

var gulp = require('gulp'),
browserSync = require('browser-sync').create();

function html(done){
    console.log('Changes happened in html');
    browserSync.reload();
    done();
}

function cssInject(){
    return gulp.src('./public/temp/styles/style.css')
        .pipe(browserSync.stream());
}

function watch(done){
    browserSync.init({
        server: {
            baseDir: "public"
        }
    });
    gulp.watch('./public/**/*.html', html);
    gulp.watch('./public/styles/**/*.css', gulp.series(styles,cssInject));
    done();
}

exports.html = html;
exports.watch = watch;

我将其添加到主 gulpfile 中

require('./gulp/tasks/styles.js');
require('./gulp/tasks/watch.js');

但这不起作用。它显示错误

$ gulp watch
[20:27:30] Using gulpfile ~\Desktop\gulp-website\gulpfile.js
[20:27:30] Task never defined: watch
[20:27:30] To list available tasks, try running: gulp --tasks

Answer 1

您仍然可以这样做，但以不同的方式：

1. 使用 require-dir 包（或者您需要 index.js 文件，在其中导出所有任务：watch、html、样式）：

   // gulpfile.js
   var tasksNotInAGulpfile = require('require-dir)('./gulp/tasks');
   exports.watch = tasksNotInAGulpfile['watch'].watch
   exports.styles = tasksNotInAGulpfile['styles].styles
   ...
   

2. 最适合您的解决方案：

   // Main gulpfile (gulpfile.js)
   var stylesTasks = require('./gulp/tasks/styles.js');
   var watchTasks = require('./gulp/tasks/watch.js');
   exports.styles = stylesTasks.styles;
   exports.watch = watchTasks.watch;
   exports.html = watchTasks.html;
   

为了让 gulp 看到你的任务，它们必须使用module.exports或导出来导出，就像前面的例子一样。

让我知道这是否有帮助。