2

mix.less ('app.less') がページを自動的にリロードした後に実行する必要があります。F5 gulpfile.js のたびに押さないもの

var elixir = require('laravel-elixir');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Less
 | file for our application, as well as publishing vendor resources.
 |
 */



elixir(function(mix) {
    mix.less('app.less');
    mix.copy('resources/assets/vendor/bootstrap-switch/dist', 'public/packages/bootstrap-switch');
});

gulp browser-sync として使用することは可能ですか?

4

4 に答える 4

0

最初にlaravel-elixir-livereloadというプラグインをインストールします

npm install --save-dev laravel-elixir-livereload

その後、gulpfile.js に次のように記述します。

var elixir  = require('laravel-elixir');

require('laravel-elixir-livereload');


elixir( function(mix) {
    mix.less('app.less')
    .livereload();
});

最後に実行

gulp watch

ドキュメントhttps://www.npmjs.com/package/laravel-elixir-livereload

于 2015-09-11T03:52:46.803 に答える
0

Elixir 3.3 と Homestand があれば、何もインストールせずに browsersync() を使用できます。

最初に実行: $ php artisan serve --host=0

gulpfile.js で: mix.browserSync({proxy: 'localhost:8000'});

于 2015-11-03T16:36:42.757 に答える
0

残念ながら、エリクサーで livereload を使用する方法はまだありません。Elixir を完全に使用し、一般的な用途の広い gulp プラグインの自由度をすべて使用することをお勧めします。

Livereload を使用したライブ リロードのレシピ:

  1. Chrome に Livereload プラグインをインストールする
  2. Chrome のツールバーのボタンを押して有効にします

  3. gulp モジュールをインストールします。

    npm install gulp gulp-plumber gulp-connect gulp-sass --save-dev

  4. 以下のような単純な gulpfile を作成します (*.scss ファイルの livereload のみ)。

  5. 一気飲みする

gulpfile.jsの例

'use strict';

var
    gulp = require('gulp'),
    plumber = require('gulp-plumber'),
    connect = require('gulp-connect'),
    sass = require('gulp-sass');

gulp.task('sass', function () {
    return gulp.src('public/css/*.sass')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('public/css'));
});

gulp.task('watch', ['sass'], function () {
    gulp.watch(['resources/assets/sass/*.scss'],
        function (e) {
            gulp.src(e.path)
                .pipe(plumber())
                .pipe(sass().on('error', sass.logError))
                .pipe(gulp.dest('public/css'))
            ;
        }
    );
    gulp.watch(['public/css/*.css',],
        function (e) {
            gulp.src(e.path)
                .pipe(connect.reload())
            ;
        }
    );
});

gulp.task('server', ['watch'], function () {
    connect.server({
        root: 'public',
        livereload: true
    });
});

gulp.task('default', ['server']);
于 2015-08-11T15:28:46.070 に答える