2

我有一个 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 主机时，实时重新加载不再工作。

我对实时重新加载不太熟悉，所以请引导我完成任何解决方案。

我已经安装了实时重载插件并将其打开，但仍然无法正常工作。

我错过了与主人的一步吗？

4

1 回答 1

1

好吧，我不知道这个 Gulpfile 首先向你承诺了什么，但我在这里遗漏了两件事：

  • 与您正在运行的服务器的任何连接。
  • HTML 文件中插入 Livereload 的位置。Livereload 需要知道在哪里注入，并且不能自动开箱即用

这可能很棘手，尤其是当您已经有一个服务器启动并运行时，它需要大量配置。BrowserSync是一个可以很容易地与 Gulp 集成并且开箱即用的 Livereload 设置的工具。您可以启动它并为您拥有的任何正在运行的服务器创建代理。它还将负责插入 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 会自己做），你准备好了

添加一个 reload-Call

在你放置的任何地方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 知道您正在使用流，从​​而使其更能够使用流。

于 2015-05-01T15:26:56.833 回答