1

//変数へのgulpファイルのインポート

    const { src , dest , watch , series , parallel } = require('gulp');
    const autoprefixer = require('autoprefixer');
    const cssnano = require('cssnano');
    const concat = require('gulp-concat');
    const postcss = require('gulp-postcss');
    const replace = require('gulp-replace');
    const sass = require('gulp-sass');
    const sourcemaps = require('gulp-sourcemaps');
    const uglify = require('gulp-uglify');
    const browserSync = require ('browser-sync').create();

// プロジェクト フォルダー内のファイル パス変数

    const files = {
    scsspath:'assets/scss/**/*.scss' , 
    jspath:'assets/js/**/*.js'}

//Sass タスク

    function scssTask(){
    return src(files.scsspath)
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(sourcemaps.write('.'))
    .pipe(dest('assets/css'))
    .pipe(browsersync.stream());}

//JsTask

    function jsTask(){
    return src(files.jspath)
   .pipe(concat('all.js'))
   .pipe(uglify())
   .pipe(dest('assets/js')).pipe(browsersync.stream());}

//WatchTask

   function watchTask(){
   watch([files.scsspath , files.jspath], parallel(scssTask,jsTask));}

//DefaultTask //gulp-4 で browser-sync を使用する方法がわかりません

   exports.default = series(parallel(scssTask,jsTask) , cashBustTask , 
   watchTask,browsersync);
4

3 に答える 3

0

クイックソリューション:

BrowserSync をトリガーする関数を追加します。

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

watchTask()関数を次のように変更します。

function watchTask(){
    browserSync.init({
        server: { baseDir: "./dist" }
    });
    gulp.watch([files.scsspath , files.jspath], parallel(scssTask,jsTask,reload));
}

次のように変更しますexports。

exports.default = watchTask;
于 2019-07-23T15:31:56.740 に答える