请帮助我将js文件捆绑到一个js-bundled.js文件中,并指导我更多有关gulp的信息,因为我对此一无所知。
Git Bash错误
Khan@DESKTOP-9E1JPKM MINGW32 /c/xampp/htdocs/wordpress
$ gulp scripts
[20:34:46] Using gulpfile C:\xampp\htdocs\wordpress\gulpfile.js
[20:34:46] Starting 'scripts'...
Hash: 0c692b1c137b44dab1d2
Version: webpack 4.44.1
Time: 81ms
Built at: 10/04/2020 8:34:47 PM
ERROR in Entry module not found: Error: Can't resolve './wp-content/themes/custom_theme/wordpress/js/scripts.js' in 'C:\xampp\htdocs\wordpress'
[20:34:47] Finished 'scripts' after 231 ms
Webpack配置文件
const path = require('path'),
settings = require('./settings');
module.exports = {
entry: {
App: settings.themeLocation + "js/scripts.js"
},
output: {
path: path.resolve(__dirname, settings.themeLocation + "js"),
filename: "scripts-bundled.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
mode: 'development'
}
setting.js
exports.themeLocation = './wp-content/themes/custom_theme/wordpress/';
exports.urlToPreview = 'http://localhost:1337/wordpress';
gulpfile.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() {
browserSync.reload();
});
gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.parallel('waitForStyles'));
gulp.watch([settings.themeLocation + 'js/modules/*.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());
}))
gulp.task('waitForScripts', gulp.series('scripts', function(cb) {
browserSync.reload();
cb()
}))
scripts.js
import "../css/style.css"
// Our modules / classes
import MobileMenu from "./modules/MobileMenu"
import HeroSlider from "./modules/HeroSlider"
// Instantiate a new object using our modules/classes
var mobileMenu = new MobileMenu()
var heroSlider = new HeroSlider()
// Allow new JS and CSS to load in browser without a traditional page refresh
if (module.hot) {
module.hot.accept()
}
package.json
{
"name": "fictional-university-lwc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"gulpwatch": "gulp watch",
"gulpstyles": "gulp styles",
"gulpscripts": "gulp scripts"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"autoprefixer": "^9.6.1",
"babel-loader": "^8.0.6",
"browser-sync": "^2.26.7",
"gulp": "^4.0.2",
"gulp-cli": "^2.2.0",
"gulp-postcss": "^8.0.0",
"postcss-color-function": "^4.1.0",
"postcss-hexrgba": "^1.0.2",
"postcss-import": "^12.0.1",
"postcss-mixins": "^6.2.2",
"postcss-nested": "^4.1.2",
"postcss-simple-vars": "^5.0.2",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"
},
"dependencies": {
"jquery": "^3.4.1",
"normalize.css": "^8.0.1",
"slick-carousel": "^1.8.1"
}
}
请帮助我了解如何为网站正确使用gulp和webpack? 我几个月前开始学习,现在正在攻读计算机科学硕士学位。
答案 0 :(得分:0)
我已经解决了这个问题,
首先, 我缺少一个名为glidejs的模块(已安装)
第二, 我正在将style.css导入scritps.js文件(已删除)
上述错误是与路径相关的问题。