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 が何を約束していたのかわかりませんが、ここには 2 つのことが欠けています。

  • 稼働中のサーバーへの接続。
  • Livereload を挿入する HTML ファイル内の場所。Livereload は注入する場所を知る必要があり、そのままでは自動的に機能しません。

これは、特にサーバーをすでに稼働させており、多くの構成が必要な場合は注意が必要です。Gulp と簡単に統合でき、すぐに使える Livereload のセットアップが適切なツールの 1 つがBrowserSyncです。起動するだけで、実行中のサーバーへのプロキシを作成できます。また、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 に答える