javascript JS - Gulp 4初始文件

Posted 2021-05-03

const browsersync = require("browser-sync");
const gulp = require("gulp");
const phpConnect = require('gulp-connect-php');
const concat = require("gulp-concat");
const sass = require('gulp-sass');
const del = require('del');

const browserSync = require("browser-sync").create();

//Php connect
function connectsync() {
    phpConnect.server({
        // a standalone PHP server that browsersync connects to via proxy
        port: 8000,
        keepalive: true,
        base: "dist"
    }, function (){
        browsersync({
            proxy: '127.0.0.1:8000'
        });
    });
}

// BrowserSync Reload
function browserSyncReload(done) {
    browsersync.reload();
    done();
}

function clean(){
   return del(["dist/**", "dist/.*", "!dist"], { force: true });
}

function php(){
    return gulp.src("./src/**/*.php").pipe(gulp.dest("./dist"));
}

function style(){
   return gulp.src('./src/scss/**/*.scss')
   .pipe(concat("styles.css"))
   .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
   .pipe(gulp.dest('./dist/css'))
   .pipe(browserSync.stream());
}

function js(){
    return gulp.src("./src/**/*.js")
    .pipe(concat("scripts.js"))
    .pipe(gulp.dest("./dist/js"));
}

// Watch files
function watchFiles() {
    gulp.watch("src/**/*.php", gulp.series(php, browserSyncReload));
    gulp.watch("src/**/*.scss", gulp.series(style, browserSyncReload));
    gulp.watch("src/**/*.js", gulp.series(js, browserSyncReload));
}

const initialFiles = gulp.series(clean, php, style, js);
const watch = gulp.series(initialFiles, gulp.parallel([watchFiles, connectsync]));

exports.default = watch;