使用WordPress Sage 框架开发WordPress主题的小技巧分享

文 / @WordPress主题

使用Sage WordPress框架的小技巧

我是一个WordPress主题框架的忠实用户,在使用了Sage框架之后,我总结了一些小技巧,在这里分享给大家。

全局安装gulp插件,让多个主题可复用

Sage使用Gulp构建WordPress主题的静态资源,但每次新建一个主题时都要重新安装Gulp插件,速度很慢。解决方法是在本地全局安装Gulp插件,然后在主题中链接。我写了一个批处理文件可以方便地运行批处理文件以安装插件到本地。这样,每个主题都可以复用这些插件,不需要每次都重新安装。

@echo off

call npm link asset-builder
call npm link browser-sync
call npm link del
call npm link gulp
call npm link gulp-autoprefixer
call npm link gulp-changed
call npm link gulp-concat
call npm link gulp-flatten
call npm link gulp-if
call npm link gulp-imagemin
call npm link gulp-jshint
call npm link gulp-less
call npm link gulp-load-plugins
call npm link gulp-minify-css
call npm link gulp-plumber
call npm link gulp-rename
call npm link gulp-rev
call npm link gulp-sass
call npm link gulp-sourcemaps
call npm link gulp-uglify
call npm link imagemin-pngcrush
call npm link jshint-stylish
call npm link lazy-pipe
call npm link merge-stream
call npm link run-sequence
call npm link traverse
call npm link wiredep
call npm link yargs
call npm link minimist
call npm link gulp-pleeease

@echo 链接完毕

将Sage框架与其他WordPress框架相结合

虽然Sage框架提供了基于Gulp的完善的前端工作流,但对于结构复杂的CMS主题来说适用性不强。解决方法是将Sage中的前端工具提取出来,用到其他WordPress框架中。我在开发中使用得比较多的是underscores框架,提取方法很简单,只需要把以下文件提取出来,放到underscores中:

  • package.json:定义需要安装的nodejs插件
  • gulpfile.js:定义gulp的任务
  • bower.json:定义前端资源依赖
  • assets:主题定义的前端资源

Sage是一个非常优秀的WordPress开发框架,希望大家也能尝试使用它,相信你的工作会变得更轻松。如果有任何问题或经验分享,请在留言中与我交流。

添加UTHEME为好友
扫码添加UTHEME微信为好友
· 分享WordPress相关技术文章,主题上新与优惠动态早知道。
· 微信端最大WordPress社群,限时免费入群。