javascript 适用于WordPress的Gulp设置代码段也可用于前端开发

Posted 2021-05-03

var gulp = require('gulp'),
settings = require('./settings'),
webpack = require('webpack'),
browserSync = require('browser-sync').create(),
postcss = require('gulp-postcss'),
rgba = require('postcss-hexrgba'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
mixins = require('postcss-mixins'),
colorFunctions = require('postcss-color-function');

gulp.task('styles', function() {
  return gulp.src(settings.themeLocation + 'css/style.css')
    .pipe(postcss([cssImport, mixins, cssvars, nested, rgba, colorFunctions, autoprefixer]))
    .on('error', (error) => console.log(error.toString()))
    .pipe(gulp.dest(settings.themeLocation));
});

gulp.task('scripts', function(callback) {
  webpack(require('./webpack.config.js'), function(err, stats) {
    if (err) {
      console.log(err.toString());
    }

    console.log(stats.toString());
    callback();
  });
});

gulp.task('watch', function() {
  browserSync.init({
    notify: false,
    proxy: settings.urlToPreview,
    ghostMode: false
  });

  gulp.watch('./**/*.php', function() {
    browserSync.reload();
  });
  gulp.watch(settings.themeLocation + 'css/**/*.css', ['waitForStyles']);
  gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'], ['waitForScripts']);
});

gulp.task('waitForStyles', ['styles'], function() {
  return gulp.src(settings.themeLocation + 'style.css')
    .pipe(browserSync.stream());
});

gulp.task('waitForScripts', ['scripts'], function() {
  browserSync.reload();
});

{
    "name": "fictional-university-lwc",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "gulpwatch": "gulp watch",
        "gulpstyles": "gulp styles",
        "gulpscripts": "gulp scripts"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "7.0.0-beta.46",
        "@babel/preset-env": "7.0.0-beta.46",
        "autoprefixer": "8.4.1",
        "babel-loader": "^8.0.0-beta",
        "browser-sync": "2.24.4",
        "gulp": "3.9.1",
        "gulp-postcss": "7.0.1",
        "postcss-color-function": "4.0.1",
        "postcss-hexrgba": "1.0.1",
        "postcss-import": "11.1.0",
        "postcss-mixins": "6.2.0",
        "postcss-nested": "3.0.0",
        "postcss-simple-vars": "4.1.0",
        "webpack": "4.8.2"
    },
    "dependencies": {
        "jquery": "3.3.1",
        "normalize.css": "8.0.0",
        "slick-carousel": "1.8.1"
    }
}

exports.themeLocation = './app/wp-content/themes/fictional-university-theme/';
exports.urlToPreview = 'http://fictional-university.test';

// If you're using Local by Flywheel you will
// want your settings to be similar to the examples below:

// exports.themeLocation = './public/wp-content/themes/fictional-university-theme/';
// exports.urlToPreview = 'http://fictional-university.local/';

// Simply remove the two slashes at the front of those lines
// to uncomment them and then delete lines #1 and #2.

// Be SURE to update urlToPreview to YOUR domain and not mine.
// Be SURE to update themeLocation to YOUR theme folder name

const path = require('path'),
    settings = require('./settings');

module.exports = {
    entry: {
        App: settings.themeLocation + "js/scripts.js"
    },
    output: {
        path: path.resolve(__dirname, settings.themeLocation + "js"),
        filename: "scripts-bundled.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    mode: 'development'
}