0

そのため、gulp V4 を使用して pug (jade)、javascript、および sass ファイルをコンパイルし、これらのファイルのいずれかが変更されたときに browserSync を使用してブラウザーをリロードしようとしています。そこにはたくさんのガイドがありますが、コードをどのように書いても、タスクの順序が正しくないようです。タスクの順序を設定するために使用gulp.seriesしていますが、browserSync はボールをプレーしたくありません。

これが私のGulpファイルのプリントです：

var gulp = require('gulp'),
... etc.

var paths = {
    sass: ['src/scss/**/*.scss'],
    js:   ['src/js/**/*.js'],
    pug:  ['src/**/*.pug']
};

// Shared Tasks:
//*------------------------------------*/

gulp.task('clean', function(done){
    del(['dist/assets/**/*.css', 'dist/assets/**/*.map', 'dist/assets/**/*.js']);
    done();
});

// App Specific Tasks:
//*------------------------------------*/

// Sass
gulp.task('build-sass', function(){
    gulp.src(paths.sass)
        return sass(paths.sass, {
            style: 'expanded'
        })
        .on('error', sass.logError)
        .pipe(prefix('last 2 version', '> 1%', 'ie 8', 'ie 9'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/assets/css'))
        .pipe(cleanCSS({ advanced: false, keepSpecialComments: 0 }))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dist/assets/css'));
});

// JS
gulp.task('build-js', function(done){
    gulp.src(paths.js)
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist/assets/js'))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('dist/assets/js'))
        done();

// Pug
gulp.task('build-pug', function buildHTML(done){
    gulp.src(['src/**/*.pug'], {
        base: 'src'
    })
    .pipe(pug())
    .pipe(gulp.dest('./dist/'))
    done();
});


// Service Tasks:
//*------------------------------------*/

// Delete the compiled views dir.
gulp.task('remove', function(done){
    del(['dist/views/**/']);
    done();
});

// Serve the site locally and watch for file changes
gulp.task('serve', function(done){
    browserSync.init({
        server: {
            baseDir: './dist/',
            notify: false,
            open: false
        }
    });

   // Watch & Reload Pug Files
   gulp.watch([paths.pug], gulp.series('build-pug')).on('change', browserSync.reload);
   // Watch & Reload Sass Files
   gulp.watch([paths.sass], gulp.series('build-sass')).on('change', browserSync.reload);
});


gulp.task('default', gulp.series('clean', 'build-sass', 'build-js', 'build-pug', 'remove', 'serve', function(done){
    done();
}));

また、gulp を起動すると、ターミナル コンソール ログに次のように出力されます。

$ gulp
[13:09:33] Using gulpfile ~/Dropbox Aaron/Dropbox (Personal)/01_Me/01_Dev/01_My Work/*Template/gulpfile.js
[13:09:33] Starting 'default'...
[13:09:33] Starting 'clean'...
[13:09:33] Finished 'clean' after 2.64 ms
[13:09:33] Starting 'build-sass'...
[13:09:33] Finished 'build-sass' after 443 ms
[13:09:33] Starting 'build-js'...
[13:09:33] Finished 'build-js' after 4.42 ms
[13:09:33] Starting 'build-pug'...
[13:09:33] Finished 'build-pug' after 3.15 ms
[13:09:33] Starting 'remove'...
[13:09:33] Finished 'remove' after 656 μs
[13:09:33] Starting 'serve'...
[BS] Access URLs:
-------------------------------------
      Local: http://localhost:3000
   External: http://10.130.91.51:3000
-------------------------------------
         UI: http://localhost:3001
UI External: http://10.130.91.51:3001
-------------------------------------
[BS] Serving files from: ./dist/

これは、監視対象のファイル内のファイルを変更すると、次のようになります。

[BS] File changed: src/scss/4_elements/_elements.page.scss
[13:12:33] Starting 'build-sass'...
[13:12:34] write ./style.css
[13:12:34] Finished 'build-sass' after 366 ms

この場合、ファイルが変更され、browserSync がページをリロードし、「build-sass」が開始されます。これは間違った方法です。私は明らかにsassを構築してから、ページをリロードしたいと考えています。ブラウザーが必要なコードを更新するには、2 回保存する必要があります。

私が使用したコードの一部は、browserSync のドキュメントから直接引用しています。

https://www.browsersync.io/docs/gulp#gulp-reload

これはうまくいかないようです。

4

1 に答える 1

1

ログ出力は正しく見えます。最初に「デフォルト」を実行し、次に一連のタスクを実行します。後でsassファイルを変更すると、「build-sass」が開始されます。唯一の問題は、browserSync.reload() 経由でリロードしないことです。だから私は問題がここにあると信じています：

gulp.watch([paths.sass], gulp.series('build-sass')).on('change', browserSync.reload);

強くお勧めします

https://github.com/gulpjs/gulp/blob/4.0/docs/recipes/minimal-browsersync-setup-with-gulp4.md

これは、まさにあなたがやろうとしていることを実行するための gulp4.0 レシピです。私は彼らがそこに持っているものをほとんど使用しているので、彼らのコードを機能させるのに問題がある場合は私が助けることができます. ここに私の作業コードがあります:

function serve (done) {
  browserSync.init({
  server: {
    baseDir: "./",
    index: "home.html"
  },
  ghostMode: false
 });
 done();
}

function reload(done) {
  browserSync.reload();
  done();
}

var paths = {
  styles: {
    src: "./scss/*.scss",
    dest: "./css"
  },
  scripts: {
    src: "./js/*.js",
    dest: "./js"
  }
};

function watch() {
  gulp.watch(paths.scripts.src, gulp.series(processJS, reload));
  gulp.watch(paths.styles.src,  gulp.series(sass2css,  reload));
  gulp.watch("./*.html").on("change", browserSync.reload);
}

var build = gulp.series(serve, watch);

gulp.task("sync", build);

function sass2css() {
  return gulp.src("./scss/*.scss")
    .pipe(cached("removing scss cached"))
    // .pipe(sourcemaps.init())
    .pipe(sass().on("error", sass.logError))
    // .pipe(sourcemaps.write("./css/sourceMaps"))
    .pipe(gulp.dest("./css"));
}

function processJS() {
  return gulp.src("./js/*.js")
    .pipe(sourcemaps.init())
    // .pipe(concat("concat.js"))
    // .pipe(gulp.dest("./concats/"))
    // .pipe(rename({ suffix: ".min" }))
    // .pipe(uglify())
    .pipe(sourcemaps.write("./js/sourceMaps/"))
    .pipe(gulp.dest("./js/maps/"));
}

「タスク」の代わりに関数を一般的に使用していること、特に reload(done) 関数に注意してください。次のようなウォッチステートメントに単純に追加してみてください

gulp.watch([paths.sass], gulp.series('build-sass', reload);

リロード機能を追加した後、私のコードのように他のすべての変更を行わなくても、問題を解決するのに十分かもしれません。または、'build-sass' タスクに return ステートメントを追加するだけで、タスクが完了したことを gulp に認識させることができます。幸運を。

于 2016-10-09T04:50:53.357 に答える