我将Gulp3更改为Gulp4。在我的gulpfile.js中,我创建了一个任务:如果进行修改,则可以在开发模式下立即看到它,而无需构建我的网站:
libexec
但是当我运行gulp.task('serve-php', function () {
connect.server({
port: 9001,
base: 'app',
open: false
});
var proxy = httpProxy.createProxyServer({});
browserSync.init({
notify: false,
port : 9000,
server: {
baseDir : ['.tmp', 'app'],
routes : {
'/node_modules': 'node_modules'
},
middleware: function (req, res, next) {
var url = req.url;
if (!url.match(/^\/(styles|fonts|node_modules)\//)) {
proxy.web(req, res, { target: 'http://127.0.0.1:9001' });
} else {
next();
}
}
}
});
gulp.watch([
'app/*.html',
'app/*.php',
'app/**/*.php',
'app/**/**/*.php',
'app/scripts/**/*.js',
'app/images/**/*',
'.tmp/fonts/**/*'
]).on('change', function() {
browserSync.reload();
});
gulp.watch('app/styles/**/*.scss', gulp.series('styles'));
gulp.watch('app/fonts/**/*', gulp.series('fonts'));
});
时,我的网站没有任何CSS和js,而且我不知道如何进行调整。
答案 0 :(得分:0)
您没有看到任何已编译的资产,因为styles
没有运行fonts
或gulp.task('default', gulp.series( gulp.parallel('styles','fonts'), 'serve-php' ));
任务。它仅监视源文件中的更改。因此,在进行更改之前,请不要运行它们。
最简单的解决方案是创建另一个任务,该任务首先编译前端资产,然后启动服务器并加载browserSync。
添加以下任务应该可以使您工作正常。
gulp
只需运行js
,资产将首先被编译,然后服务器将启动。
(如果您已经有默认任务,则需要更改此任务的名称)
我想您还需要将parallel
任务作为参数添加到{{1}}函数调用中,但是如果不查看其余代码很难分辨。
我希望这能使您走上正确的道路!