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（）和parallel（）调用。

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()...，而gulp会使两者混淆。制作一个或另一个不同的ala：

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，请考虑使用支持es6的gulp-uglify-es。参见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资产移动到的位置。

有了这些更改，代码运行良好，并重新加载了browsersync以更改scss，js和php文件。 [记住要像我一样将return语句添加到所有任务函数中。]

更改gulp任务结构以匹配Gulp v4

1 个答案: