PHP肝

Question

我从这里中抓取并修改了一个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主机时，实时重新加载将不再工作。

我不太熟悉现场重装，所以请带我通过任何解决方案。

我已经安装了活重新加载插件，并打开它，仍然没有工作。

我是不是和我的主人失足了一步？

Answer 1

好吧，我不知道这个Gulpfile当初答应了你什么，但我在这里遗漏了两件事：

• 任何连接到您的启动和运行服务器。
• 在HTML文件中插入Livereload的位置。肝脏需要知道该在哪里注射，只是不能自动发挥作用。

这可能很棘手，特别是当您已经启动并运行了一台服务器，并且需要大量的配置时。BrowserSync是一个工具，它可以很容易地与Gulp集成，并且有一个很好的开箱即用的肝脏设置。您可以直接引导它并为您拥有的任何正在运行的服务器创建一个代理。它还将负责插入LiveReload片段。我强烈建议你转向那个话题，特别是如果你对这个话题很陌生的话。我所做的一切只是为了你:-)

我曾写过关于BrowserSync 这里的文章，但以下是您需要做的一些更改：

设置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知道您正在处理流，使它更能够处理流。