我在设置Gulp 4任务时遇到问题。当我运行监视我的文件并运行功能的默认任务时,一切正常。问题是当我尝试运行gulp prod或它执行的任何其他非默认任务时,没有显示错误,但没有创建文件夹或文件。
这是一个WordPress主题,我正在尝试设置开发和生产任务。我正在运行节点10.15.3,npm 6.4.1,gulp-cli 2.2.0和gulp 4.0.0。我尝试简化功能和/或任务,我读了所有类似问题的问题,但没有任何效果。
我现在的gulpfile:
const themename = "tree"
const { src, dest, watch, series, parallel } = require("gulp"),
autoprefixer = require("gulp-autoprefixer"),
browserSync = require("browser-sync").create(),
sass = require("gulp-sass"),
cleanCSS = require("gulp-clean-css"),
sourcemaps = require("gulp-sourcemaps"),
concat = require("gulp-concat"),
imagemin = require("gulp-imagemin"),
changed = require("gulp-changed"),
babel = require("gulp-babel"),
uglify = require("gulp-uglify"),
lineec = require("gulp-line-ending-corrector"),
rename = require("gulp-rename")
const root = `../${themename}`,
srcs = {
css: `${root}/src/css/**/*.css`,
sass: `${root}/sass`,
js: `${root}/src/js/app/**/*.js`,
img: `${root}/src/images/**/*.{jpe?g|gif|png|svg}`
},
dist = {
css: `${root}/dist/css/`,
js: `${root}/dist/js/`,
img: `${root}/dist/images/`
},
devPaths = {
css: [`${root}/dev/css/`],
js: `${root}/dev/js/`
},
watchFiles = {
php: `${root}/**/*.php`,
sass: `${srcs.sass}/**/*.scss`
}
function devSass() {
return src(`${srcs.sass}/style.scss`)
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sass({ outputStyle: "expanded" }).on("error", sass.logError))
.pipe(autoprefixer("last 2 versions"))
.pipe(sourcemaps.write())
.pipe(lineec())
.pipe(dest(devPaths.css))
}
function devCss() {
return src([`${srcs.css}`, `${devPaths.css}/style.css`])
.pipe(sourcemaps.init({ loadMaps: true, largeFile: true }))
.pipe(concat("all.css"))
.pipe(sourcemaps.write(`${devPaths.css}/maps/`))
.pipe(lineec())
.pipe(dest(devPaths.css))
}
function devJs() {
return src(srcs.js)
.pipe(babel({ presets: ["@babel/env"] }))
.pipe(lineec())
.pipe(dest(devPaths.js))
}
function prodSass() {
return src(`${srcs.sass}/style.scss`)
.pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
.pipe(autoprefixer("last 2 versions"))
.pipe(lineec())
.pipe(dest(dist.css))()
}
function prodCss() {
return src([srcs.css, devPaths.css])
.pipe(concat("all.min.css"))
.pipe(cleanCSS())
.pipe(lineec())
.pipe(dest(dist.css))
}
function prodJs() {
return src(srcs.js)
.pipe(rename({ suffix: ".min" }))
.pipe(babel({ presets: ["@babel/env"] }))
.pipe(uglify())
.pipe(dest(dist.js))
}
function imgOpt() {
return src(srcs.img)
.pipe(changed(dist.img))
.pipe(
imagemin([
imagemin.gifsicle({ interlaced: true }),
imagemin.jpegtran({ progressive: true }),
imagemin.optipng({ optimizationLevel: 5 })
])
)
.pipe(gulp.dest(dist.img))
}
function devWatchers() {
browserSync.init({
proxy: "localhost/tree/",
open: true,
notify: false
})
watch(watchFiles.sass, series([devSass, devCss]))
watch(srcs.js, devJs)
watch([srcs.img, dist.img]).on("change", browserSync.reload)
watch(watchFiles.php).on("change", browserSync.reload)
}
function prod() {
return parallel(prodJs, imgOpt, series(prodSass, prodCss))
}
exports.prod = prod
exports.devWatchers = devWatchers
exports.default = devWatchers
我希望运行prod任务后,将填充dist文件夹,但实际上什么也没发生。再一次,默认任务将运行所有内容。
答案 0 :(得分:0)
因此,我修改了我的所有文件夹结构以及gulpfile中的所有字符串。路径有些问题。如果这不是答案,我深表歉意。现在一切正常。