Javascript wordpress中的Webpack、gulp和frontstreet框架
我尝试将frontstreet框架添加到Wordpress中 我在wp content/themes/front theme/js/frontstreet.js中预先构建了资产“frontstreet.js” 在同一个本地化中,我将自定义的“scripts.js”文件放入导入模块。对于测试I类型警报Javascript wordpress中的Webpack、gulp和frontstreet框架,javascript,wordpress,webpack,gulp,Javascript,Wordpress,Webpack,Gulp,我尝试将frontstreet框架添加到Wordpress中 我在wp content/themes/front theme/js/frontstreet.js中预先构建了资产“frontstreet.js” 在同一个本地化中,我将自定义的“scripts.js”文件放入导入模块。对于测试I类型警报 import $ from 'jquery'; alert("test"); 我通过GulpWatch运行该站点,它使用框架CSS类正常工作。但是没有警报,控制台不会显示任何错误。我想gulp没
import $ from 'jquery';
alert("test");
我通过GulpWatch运行该站点,它使用框架CSS类正常工作。但是没有警报,控制台不会显示任何错误。我想gulp没有看到我的“scripts.js”文件
在终端中编辑我有错误:
未找到输入模块中的错误:错误:无法解析“/Applications/MAMP/htdocs/front”中的“/wp content/themes/front theme/js/scritps.js”
吞咽设置:
var gulp = require('gulp'),
settings = require('./settings'),
webpack = require('webpack'),
browserSync = require('browser-sync').create(),
postcss = require('gulp-postcss'),
rgba = require('postcss-hexrgba'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
mixins = require('postcss-mixins'),
colorFunctions = require('postcss-color-function');
gulp.task('styles', function() {
return gulp.src(settings.themeLocation + 'css/style.css')
.pipe(postcss([cssImport, mixins, cssvars, nested, rgba, colorFunctions, autoprefixer]))
.on('error', (error) => console.log(error.toString()))
.pipe(gulp.dest(settings.themeLocation));
});
gulp.task('scripts', function(callback) {
webpack(require('./webpack.config.js'), function(err, stats) {
if (err) {
console.log(err.toString());
}
console.log(stats.toString());
callback();
});
});
gulp.task('watch', function() {
browserSync.init({
notify: false,
proxy: settings.urlToPreview,
ghostMode: false
});
gulp.watch('./**/*.php', function(cb) {
browserSync.reload();
cb()
});
gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.parallel('waitForStyles'));
gulp.watch([settings.themeLocation + 'js/src/js/blocks/*.js', settings.themeLocation + 'js/scripts.js'], gulp.parallel('waitForScripts'));
});
gulp.task('waitForStyles', gulp.series('styles', function() {
return gulp.src(settings.themeLocation + 'style.css')
.pipe(browserSync.stream()).pipe(browserSync.reload());
}))
gulp.task('waitForScripts', gulp.series('scripts', function(cb) {
browserSync.reload();
cb()
}))
网页包配置
const path = require('path'),
settings = require('./settings');
module.exports = {
entry: {
App: settings.themeLocation + "js/scritps.js"
},
output: {
path: path.resolve(__dirname, settings.themeLocation + "js"),
filename: "frontstreet.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
mode: 'development'
}
设置文件
exports.themeLocation = './wp-content/themes/front-theme/';
exports.urlToPreview = 'http://localhost:8888/front/';
这是我的Wordpress functions.php
// add frontstreet pre-built
wp_enqueue_script('frontstreet-js', get_theme_file_uri('/js/frontstreet.js'), NULL, '1.0', true);
解决了。我犯了错误,但现在我明白了它的工作原理 那太乱了 我在gulp为generate file输出的同一文件夹中有一个旧的预构建文件。 在gulp watch line中,我将src连接到框架块