用 Gulp 4.x 来辅助制作 WordPress 主题

说是给 WordPress 用,实际就是个尝试使用 Gulp 的过程而已。因为看到了 这篇文章 之后就想试试,但是毕竟懒,而且 Gulp 也更新到 4.x 了,写法有些不一样,就记录一下。

当然也因为疫情原因很烦躁没事做,我好想打买买打太鼓啊 dnmd。

20200430 Update:代码有进化,本文简单更新了下。

首先肯定不用说的,nodejs 装起来,然后 npm i -g cnpm 走一发,不然可能因为网络问题龟速安装。以下内容我就写 npm 了,当然也可以直接全部替换成 cnpm

然后装 Gulp,无脑 npm i -g gulp-cli,然后在主题目录执行 npm i -D gulp,装好之后新建个 gulpfile.js

蓝后装需要的东西,比如我一般用 Sass 写样式,就需要 npm i -D node-sass gulp-sass,然后满屏错误,我:???

毕竟 gulp-sass 引用的是 node-sass,这憨憨需要用户自己编译二进制文件,所以就引用了 node-gyp,就需要安装 Python2,还需要 Windows Build Tools,我:???用 Sass 不好吗?(指 npm i -g sass

解决方法:用管理员权限开个 CMD,执行npm i -g --production windows-build-tools,然后就会自动帮你装好 Python2 还有编译工具了,绝了,Windows 用户不配写前端.exe,如果你不想这么装的话你可以单独装个 Python2 跟 Visual Studio?

真·解决方法:npm i -D gulp-dart-sass,dart-sass 真香,Windows 救星!

以下是我装的东西:

npm i -g gulp-cli
npm i -g --production windows-build-tools
npm i -D gulp delete gulp-minify gulp-sass node-sass gulp-sourcemaps gulp-babel @babel/core @babel/preset-env

需要编译 JS 的可以自己装点 TS 啊什么的。接下来编写 gulpfile.js,我就直接贴上来加注释好了。

'use strict';
const {
    src,
    dest,
    series,
    parallel,
    watch
} = require('gulp');
const minify = require('gulp-minify');
const del = require('delete');
const sass = require('gulp-dart-sass');
const babel = require('gulp-babel');
const sourcemaps = require('gulp-sourcemaps');

function clean() {
    return del(['assets/css/*.css', 'assets/css/*.map', 'assets/scripts/*.js', 'assets/scripts/*.map']);
}

function buildScss() {
    return src('source/scss/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({
            outputStyle: 'compressed'
        }).on('error', sass.logError))
        .pipe(sourcemaps.write('.'))
        // .pipe(rename({
        //     extname: '.min.css'
        // }))
        .pipe(dest('assets/css/'))
}

function buildJs() {
    return src('source/scripts/*.js')
        .pipe(sourcemaps.init())
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(minify({
            noSource: true,
            ext: {
                min: '.js'
            },
        }))
        .pipe(sourcemaps.write('.'))
        .pipe(dest('assets/scripts/'))
}

function watchScss() {
    return src('source/scss/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(sourcemaps.write('.'))
        .pipe(dest('assets/css/'))
}

function watchJs() {
    return src('source/scripts/*.js')
        .pipe(sourcemaps.init())
        .pipe(sourcemaps.write('.'))
        .pipe(dest('assets/scripts/'))
}

exports.clean = clean;
exports.buildScss = buildScss;
exports.buildJs = buildJs;
exports.build = series(clean, parallel(buildScss, buildJs));
exports.default = function () {
    watch('source/scss/*.scss', watchScss);
    watch('source/scripts/*.js', watchJs);
};

然后写完了直接用就好了,发布的时候一句 gulp build 就可以打包了,方便美滋滋。如果有其他需要的功能,比如 Alan 那边提到的自动 md5 之类的可以自己研究,也是差不多一样做。

WordPress 那边加载文件更方便了,我写主题的时候开着 WP_DEBUG 的,判断一下就好了嘛 直接用就好了还判断啥嘛。

然后主题版本记得改,你们不会发布的时候都忘记改版本的吧?

用 Gulp 4.x 来辅助制作 WordPress 主题 没有评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注