Изменить структуру задачи gulp, чтобы она соответствовала Gulp v4

Question

Gulp.js 4 Файлы конфигурации gulpfile.js не совместимы с файлами, разработанными для версии 3. Как обновить задачи gulp?

///// Plugin Includes /////
var gulp = require('gulp'),
        uglify = require('gulp-uglify'),
        plumber = require('gulp-plumber'),
        concat = require('gulp-concat'),
        jshint = require('gulp-jshint'),
        autoprefixer = require('gulp-autoprefixer'),
        browserSync = require('browser-sync'),
        reload = browserSync.reload,
        sass = require('gulp-sass');

///// Compile/Validate JS /////
function js(){
    gulp.src('./assets/js/main.js')
    .pipe(plumber())
    .pipe(jshint())
    .pipe(jshint.reporter('default', { verbose: true }))
    .pipe(concat('main.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./js/dist/'))
};

///// Compile Sass /////
function sass(){
    gulp.src('./assets/scss/style.scss')
    .pipe(plumber())
    .pipe(sass().on('error', sass.logError))
    .pipe(sass( {outputStyle: 'compressed'} ))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(gulp.dest('./'))
    .pipe(browserSync.stream())
};

///// Get PHP /////
function php(){
    gulp.src('./**/*.php')
    .pipe(gulp.dest('./'))
};

///// Browser Sync /////
function browsersync(){
    browserSync.init({
        proxy: "bshaia.test",
        notify: false
    });
    gulp.watch('./assets/scss/**/*.scss', sass);
    gulp.watch('./assets/js/main.js', js).on('change', browserSync.reload);
    gulp.watch('./**/*.php', php).on('change', browserSync.reload);
};

//////////////////////////////
// Default Task
//////////////////////////////
gulp.task('default', browsersync);

Я, кроме browserSync, для перезагрузки при изменениях файла php, но это не такбывает.Массивы задач в V4 были изменены на вызовы series () иrallel (), в которых я еще не знаком с их новой структурой.

Answer 1

Это может быть так же просто, как исправить эту опечатку:

gulp.watch('./**/.php', php).on('change', browserSync.reload); 

изменить на:

gulp.watch('./**/*.php', php).on('change', browserSync.reload);

Обратите внимание на отсутствующую звездочку перед .php. watch не видел ваши php файлы.

---

Также я нашел другие ошибки в вашем коде:

sass = require('gulp-sass');   // you name a variable 'sass'

function sass(){               //  later you use the same name for a function

Это проблема, потому что тогда вы звоните .pipe(sass()..., и глоток смешает их. Сделайте одно или другое аля:

gsass = require('gulp-sass'); 

///// Compile Sass /////
function sass(){
    return gulp.src('./assets/scss/style.scss')  // added return statement
    .pipe(plumber())
    .pipe(gsass().on('error', gsass.logError))
    // .pipe(gsass( {outputStyle: 'compressed'} )) // you call gsass twice in a row, unnecessary - choose one
    .pipe(autoprefixer('last 2 versions'))
    .pipe(gulp.dest('./'))
    .pipe(browserSync.stream())
};

Далее вы используете

   uglify = require('gulp-uglify'),  // gulp-uglify-es

, но gulp-uglify не поддерживает es6, рассмотрите возможность использования gulp-uglify-es, который поддерживает es6. См. gulp-uglify-es .

Далее, у вас есть это, чтобы посмотреть:

gulp.watch('./**/*.php', php).on('change', browserSync.reload);

и эта задача php:

///// Get PHP /////
function php(){
    gulp.src('./**/*.php')
    .pipe(gulp.dest('./'))
};

, который создаст бесконечный цикл при перемещении php-файла в отслеживаемое место, который затем снова и снова вызывает функцию php.

Я исправил это с помощью

gulp.watch('./assets/php/*.php', php).on('change', browserSync.reload); 

и

///// Get PHP /////
function php(){
    return gulp.src('./assets/php/*.php')  // notice the return statement
    .pipe(gulp.dest('./'))
};

, чтобы просматриваемые активы php не указывали, куда были перемещены активы php.

С этими изменениями код работал нормально и браузерная синхронизация была перезагружена для изменений в файлах scss, js и php. [Не забудьте добавить оператор возврата во все ваши функции задачи, как я сделал.]