[英]Bundling js files into one file
请帮助我将 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
网络包配置文件
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'
}
设置.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? 我几个月前开始学习,我正在攻读计算机科学硕士学位。
我已经解决了这个问题,
首先,我缺少一个名为 glidejs 的模块(已安装)
其次,我将 style.css 导入 scritps.js 文件(已删除)
上面的错误是路径相关的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.