PHP Gulp Livereload
PHP Gulp Livereload
我有一个 gulp 文件，我从 here 抓取并修改为：
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 主机时，实时重新加载不再有效。
我不太熟悉实时重新加载，所以请引导我完成任何解决方案。
我已经安装了 live reload 插件并打开了它，仍然没有用。
我是否遗漏了与主机相关的步骤？
好吧，我不知道这个 Gulp 文件首先向你承诺了什么，但我在这里遗漏了两件事：
- 与您的 运行 服务器的任何连接。
- HTML 文件中插入 Livereload 的位置。 Livereload 需要知道在哪里注入，只是不会自动开箱即用
这可能很棘手，尤其是当您已经启动服务器并且 运行 时，它需要大量配置。 BrowserSync 可以很容易地与 Gulp 集成并且确实具有开箱即用的良好 Livereload 设置的工具。您可以启动它并为您拥有的任何 运行 服务器创建代理。它还将负责插入 LiveReload 片段。我强烈建议您切换到那个，特别是如果您对那个主题还很陌生。我只为你做一切:-)
我写过关于 BrowserSync here 的文章，但要使其正常工作，您必须进行以下更改：
设置 BrowserSync
将此添加到您的 Gulp 文件的任意位置：
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 并刷新您的源。确保你在任何地方都有它，在你改变东西的地方。
比你应该可以去。祝你好运！
还有一件事
请在每个gulp.src前写一点return声明。这将使 Gulp 知道您正在使用流，使其更能够使用流。
我有一个 gulp 文件，我从 here 抓取并修改为：
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 主机时，实时重新加载不再有效。
我不太熟悉实时重新加载，所以请引导我完成任何解决方案。
我已经安装了 live reload 插件并打开了它，仍然没有用。
我是否遗漏了与主机相关的步骤？
好吧，我不知道这个 Gulp 文件首先向你承诺了什么，但我在这里遗漏了两件事：
- 与您的 运行 服务器的任何连接。
- HTML 文件中插入 Livereload 的位置。 Livereload 需要知道在哪里注入，只是不会自动开箱即用
这可能很棘手，尤其是当您已经启动服务器并且 运行 时，它需要大量配置。 BrowserSync 可以很容易地与 Gulp 集成并且确实具有开箱即用的良好 Livereload 设置的工具。您可以启动它并为您拥有的任何 运行 服务器创建代理。它还将负责插入 LiveReload 片段。我强烈建议您切换到那个，特别是如果您对那个主题还很陌生。我只为你做一切:-)
我写过关于 BrowserSync here 的文章，但要使其正常工作，您必须进行以下更改：
设置 BrowserSync
将此添加到您的 Gulp 文件的任意位置：
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 并刷新您的源。确保你在任何地方都有它，在你改变东西的地方。
比你应该可以去。祝你好运！
还有一件事
请在每个gulp.src前写一点return声明。这将使 Gulp 知道您正在使用流，使其更能够使用流。