用 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 的，判断一下就好了嘛 直接用就好了还判断啥嘛。

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