更改gulp任务结构以匹配Gulp v4
更改gulp任务结构以匹配Gulp v4
提问于 2019-06-01 10:18:11
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()调用，在这些调用中，我还不熟悉它们的新结构。
回答 1
Stack Overflow用户
发布于 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语句添加到所有任务函数中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56403386
复制相关文章
相似问题