javascript 基础Gulpfile WordPress

Posted 2021-05-04

// Include gulp
var gulp = require('gulp');

// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync');

var reload = browserSync.reload;

var sassOptions = {
    errLogToConsole: true,
    outputStyle: 'compressed'
};

// Set the proxy.
gulp.task('browser-sync', function () {
    browserSync({
        proxy: "http://server.dev:8888/"
    });
    gulp.watch("./*/**/*.php").on("change", reload);
    gulp.watch("./*.php").on("change", reload);
    gulp.watch("includes/js/src/*.js").on("change", reload);
});


// Lint Task
gulp.task('lint', function() {
    return gulp.src('js/*.js')
        .pipe(plumber())
        .pipe(jshint())
        .on('error', console.error.bind(console))
        .pipe(jshint.reporter('default'));
});

// Compile Sass file to CSS, and reload browser(s).
gulp.task('sass', function() {
    return gulp.src('includes/scss/*.scss')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass.sync(sassOptions))
        .on('error', console.error.bind(console))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('includes/css'))
        .pipe(reload({stream:true}));
});

// Concatenate & Minify JS
gulp.task('scripts', function() {
      gulp.src('includes/js/src/*.js')
        .pipe(plumber())
        .pipe(concat('app.js'))
        // .pipe(uglify())
        .pipe(gulp.dest('includes/js/min'));
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('includes/js/src/*.js', ['lint', 'scripts']);
    gulp.watch('includes/scss/**/*.scss', ['sass']);
    // gulp.watch('/*php', ['php']);
});

// Default Task
gulp.task('serve', ['browser-sync', 'lint', 'sass', 'scripts', 'watch']);

'use strict';

var gulp            = require('gulp');
var plugins         = require('gulp-load-plugins')();
var args            = require('yargs').argv;
var runTimestamp    = Math.round(Date.now()/1000);
var browserSync     = require('browser-sync').create();

var  paths = {
    js:             './wp-content/themes/livelyme/js/src/**/*.js',
    jsDis:          './wp-content/themes/livelyme/js/minified',
    sass:           './wp-content/themes/livelyme/scss/**/*.scss',
    css:            './wp-content/themes/livelyme/css',
    iconDest:       '',
    iconSrc:        '',
    themePhpFiles:  './wp-content/themes/livelyme/**/*.php'
};

// Processes javascript files
gulp.task('js', function () {
    return gulp.src(paths.js)
        .pipe(plugins.uglify())
        .pipe(gulp.dest(paths.jsDis))
        .pipe(browserSync.stream());
});

// Watch for javascript file changes
gulp.watch(paths.js, ['js']);

// Processes php files
gulp.task('php', function () {
    return gulp.src(paths.themePhpFiles)
        .pipe(browserSync.stream());
});

// Watch for php file changes
gulp.watch(paths.themePhpFiles, ['php']);

// Watch for dynamic stylesheet changes
gulp.watch(paths.sass, ['styles']);

// Processes dynamic stylesheets
gulp.task('styles', function(){
    return gulp
        .src(paths.sass)
        .pipe(plugins.sourcemaps.init())
        .pipe(plugins.sass({
            outputStyle: 'compressed'
        })
        .on('error', plugins.sass.logError))
        .pipe(plugins.autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(plugins.sourcemaps.write('./maps'))
        .pipe(gulp.dest(paths.css))
        .pipe(browserSync.stream());
});

// Serve task, boots server and targets dev environment via proxy
gulp.task('serve', ['js', 'php', 'styles'], function () {
    browserSync.init({
        notify: false,
        port:9000,
        proxy: {
            target: "http://dev.livelyme.com:8888",
            middleware: function (req, res, next) {
                console.log(req.url);
                next();
            }
        }
    });
});