我有一个gulp文件，我已经从这里抓起并修改为：
var gulp = require('gulp'),
path = require('path'),
del = require('del'),
run = require('run-sequence'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
include = require('gulp-include'),
imagemin = require('gulp-imagemin'),
svgmin = require('gulp-svgmin'),
cache = require('gulp-cache'),
watch = require('gulp-watch'),
livereload = require('gulp-livereload')
//lr = require('tiny-lr'),
//server = lr()
;
var config = {
// Source Config
src : 'src', // Source Directory
src_assets : 'src/assets', // Source Assets Directory
src_fonts : 'src/assets/fonts', // Source Fonts Directory
src_images : 'src/assets/img', // Source Images Directory
src_javascripts : 'src/assets/js', // Source Javascripts Directory
src_stylesheets : 'src/assets/styles', // Source Styles Sheets Directory
src_main_scss : 'src/assets/styles/main.scss', // Source main.scss
src_main_js : 'src/assets/scripts/main.js', // Source main.js
// Destination Config
dist : 'dist', // Destination Directory
dist_assets : 'dist/assets', // Destination Assets Directory
dist_fonts : 'dist/assets/fonts', // Destination Fonts Directory
dist_images : 'dist/assets/img', // Destination Images Directory
dist_javascripts : 'dist/assets/js', // Destination Javascripts Directory
dist_stylesheets : 'dist/assets/css', // Destination Styles Sheets Directory
// Auto Prefixer
autoprefix : 'last 3 version' // Number of version Auto Prefixer to use
};
gulp.task('styles', function () {
return gulp.src(config.src_main_scss)
.pipe(sass({
outputStyle: 'expanded',
precision: 10,
sourceComments: 'none'
}))
.pipe(autoprefixer(config.autoprefix))
.pipe(gulp.dest(config.dist_stylesheets))
.pipe(livereload())
});
gulp.task('scripts', function () {
gulp.src(config.src_main_js)
.pipe(include())
.pipe(gulp.dest(config.dist_javascripts))
.pipe(livereload())
});
gulp.task('php', function() {
return gulp.src([path.join(config.src, '/**/*.php')])
.pipe(gulp.dest(config.dist))
.pipe(livereload())
});
gulp.task('images', function() {
gulp.src(path.join(config.src_images, '/**/*.png'))
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(gulp.dest(config.dist_images))
});
gulp.task('svg', function() {
gulp.src(path.join(config.src_images, '/**/*.svg'))
.pipe(svgmin())
.pipe(gulp.dest(config.dist_images))
});
gulp.task('clean', function() {
del(path.join(config.dist, '/**/*'))
});
gulp.task('watch', function() {
//server.listen(35729, function (err) {
// if (err) {
// return console.log(err)
// };
gulp.watch(path.join(config.src_stylesheets, '/**/*.scss'), ['styles']);
gulp.watch(path.join(config.src_javascripts, '/**/*.js'), ['scripts']);
gulp.watch(path.join(config.src, '/**/*.php'), ['php']);
//});
});
gulp.task('default', function(cb) {
run('build', ['watch'], cb);
});
gulp.task('build', function (cb) {
run('clean', 'styles', 'scripts', 'php', 'images', 'svg', cb);
});
现在，如果我运行“ gulp”，则一切正常，但是当我进入apache主机时，实时重新加载将不再起作用。
我对实时重新加载不太熟悉，因此请引导我完成所有解决方案。
我已经安装了实时重新加载插件并将其打开，但仍然无法正常工作。
我是否错过了与房东的联系？
好吧，我不知道这个Gulpfile首先给您的承诺是什么，但是我在这里遗漏了两件事：
这可能很棘手，特别是当您已经启动并运行服务器并且需要大量配置时。BrowserSync是一种可以非常容易地与Gulp集成并且确实具有良好Livereload设置的工具。您可以启动它并为您拥有的任何正在运行的服务器创建代理。它还将负责插入LiveReload代码段。我强烈建议您切换到该主题，特别是如果您对该主题还很陌生的话。我为你做的一切:-)
我在此处撰写了有关BrowserSync的文章，但要使它正常工作，您需要做以下更改：
将此添加到您的Gulpfile中的任何位置：
var browserSync = require('browser-sync');
browserSync({
proxy: 'localhost:80',
port: 8080,
open: true,
notify: false
});
（别忘了npm install --save-dev browser-sync先）。这将创建一个新服务器，代理您的MAMP并注入LiveReload所需的一切。在打开页面localhost:8080（BrowserSync会自己完成），您就可以开始了
放置在任何地方livereload，将其更改为
.pipe(browserSync.reload({stream: true}))
例如：
gulp.task('scripts', function () {
return gulp.src(config.src_main_js)
.pipe(include())
.pipe(gulp.dest(config.dist_javascripts))
.pipe(browserSync.reload({stream:true}))
});
这将触发LiveReload并刷新您的源。确保在随处更改的地方随处可见。
比你应该能够去。祝你好运！
请return在每次前写一点声明gulp.src。这将使Gulp知道您正在使用流，从而使其更能够使用流。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句