时间戳

首页 > 解决方案 > 如何在没有像 gulp-hub 这样的包的情况下将 gulpfile 任务拆分为 gulp 4 上的不同文件？

javascript - 如何在没有像 gulp-hub 这样的包的情况下将 gulpfile 任务拆分为 gulp 4 上的不同文件？

问题描述

我正在尝试将我的 gulpfile 任务拆分为不同的文件。我之前做过，只需添加即可将其添加到主 gulpfilerequire('./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

标签： javascriptsplitgulp

解决方案

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

  1. 使用 require-dir 包（或者您需要导出所有任务的 index.js 文件：watch、html、styles）：

    // 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或export像前面的示例一样导出。

让我知道这是否有帮助。

推荐阅读