天気雨

All things bright and beautiful.

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

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

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

首先肯定不用说的,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 -g gulp-cli
npm i -g --production windows-build-tools
npm i -D gulp delete gulp-minify gulp-rename gulp-sass node-sass gulp-sourcemaps

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

'use strict';
/**
 * 现在用法好像是这样了,我对着文档抄的,需要啥就引用啥就行了。
 * src:就是文件来源
 * dest:就是输出目录
 * series:就是顺序执行,一个任务做完了才到下一个
 * parallel:就是同步执行,这里的任务可以一起做
 * watch:就是监视文件
 */
const {
    src,
    dest,
    series,
    parallel,
    watch
} = require('gulp');
// 引入各种东西
const minify = require('gulp-minify');
const rename = require('gulp-rename');
const del = require('delete');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
// 这个是指定 Sass 的编译器,毕竟装的时候就捆绑在一起了,不知道能不能改,又不是不能用.jpg
sass.compiler = require('node-sass');

// 删除文件,直接删掉啥文件夹的啥文件,可以排除部分文件不删,具体自己翻文档咯
function clean() {
    return del(['css/*.css', 'css/*.map', 'scripts/*.js']);
}

// 编译 scss (Production),下同
function buildScss() {
    // 就是需要处理哪哪的文件,下同
    return src('scss/*.scss')
        // 初始化 Source Map,方便 Debug
        .pipe(sourcemaps.init())
        .pipe(sass({
            // 就是加参数,其他基本也是这么加
            outputStyle: 'compressed'
        }).on('error', sass.logError))
        // Source Map 写入到文件,可以自定义到别的地方
        .pipe(sourcemaps.write('.'))
        .pipe(rename({
            // 重命名的时候修改扩展名,有其他需求就自己看文档
            extname: '.min.css'
        }))
        // 输出到目录
        .pipe(dest('css/'))
}

function buildJs() {
    return src('scripts-source/*.js')
        .pipe(minify({
            // minify 会自己复制多一份源文件到目录,这个是不给复制
            noSource: true
        }))
        .pipe(dest('scripts/'))
}

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

// 添加动作,exports.动作名 = 函数(动作)
exports.clean = clean;
exports.buildScss = buildScss;
exports.buildJs = buildJs;
/**
 * 这里套娃的意思是:
 * 1. 先执行 clean() 删除文件
 * 2. 再同时执行 buildScss() 和 buildJs(),这两个不冲突就一起执行了
 */
exports.build = series(clean, parallel(buildScss, buildJs));
/**
 * 默认动作,就是直接执行 gulp 会做的事情
 * 这里就是监控到 scss 文件有变化了就执行 watchScss动作
 */
exports.default = function () {
    watch('scss/*.scss', watchScss);
};

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

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

if(WP_DEBUG == false) {
    wp_enqueue_style( 'main-style', get_theme_file_uri('/css/main.min.css'), '', wp_get_theme()->get('Version') );
}else{
    wp_enqueue_style( 'main-style', get_theme_file_uri('/css/main.css'), '', wp_get_theme()->get('Version') );
}

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

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

发表评论

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