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()调用,在这些调用中,我还不熟悉它们的新结构。
发布于 2019-06-05 03:38:41
它可能像修复这个拼写错误一样简单:
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资产被移动到的位置。
有了这些更改,代码运行得很好,并且针对scss、js和php文件的更改重新加载了browsersync。记住像我一样将return语句添加到所有任务函数中。
https://stackoverflow.com/questions/56403386
复制相似问题