Как разделить задачи gulpfile на разные файлы gulp 4 без какого-либо пакета, такого как gulp-hub? - PullRequest
Новая
       24

Как разделить задачи gulpfile на разные файлы gulp 4 без какого-либо пакета, такого как gulp-hub?

0 голосов
/ 02 апреля 2019

Я пытаюсь разделить мои задачи gulpfile на разные файлы. Я сделал это раньше и добавил его в основной файл gulpfile, просто добавив require('./path/taskName') Но это не работает в залп 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

1 Ответ

0 голосов
/ 27 июня 2019

Вы можете сделать это, но другим способом:

  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 , как в предыдущем примере.

Дайте мне знать, помогло ли это.

...