Advanced-Gulp-WordPress 项目教程
1. 项目的目录结构及介绍
Advanced-Gulp-WordPress/
├── assets/
│ └── ...
├── 404.php
├── LICENSE
├── README.md
├── archive.php
├── bower.json
├── comments.php
├── footer.php
├── functions.php
├── gulpfile.js
├── header.php
├── index.php
├── package.json
├── page.php
├── screenshot.png
├── search.php
├── sidebar.php
└── single.php
assets/
: 存放项目的静态资源文件,如图片、CSS、JavaScript等。404.php
: 自定义404页面。LICENSE
: 项目许可证文件。README.md
: 项目说明文档。archive.php
: 存档页面模板。bower.json
: Bower包管理配置文件。comments.php
: 评论模板。footer.php
: 页脚模板。functions.php
: 主题功能和设置。gulpfile.js
: Gulp任务配置文件。header.php
: 头部模板。index.php
: 主页模板。package.json
: Node.js包管理配置文件。page.php
: 页面模板。screenshot.png
: 主题截图。search.php
: 搜索结果页面模板。sidebar.php
: 侧边栏模板。single.php
: 单篇文章模板。
2. 项目的启动文件介绍
项目的启动文件主要是 gulpfile.js
,它负责配置和运行Gulp任务。以下是 gulpfile.js
的主要内容:
// gulpfile.js 主要内容示例
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
// SASS 编译任务
gulp.task('sass', function () {
return gulp.src('assets/scss/**/*.scss')
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('assets/css'));
});
// 默认任务
gulp.task('default', ['sass'], function () {
gulp.watch('assets/scss/**/*.scss', ['sass']);
});
3. 项目的配置文件介绍
项目的配置文件主要包括 bower.json
和 package.json
。
bower.json
bower.json
用于管理前端依赖包,示例如下:
{
"name": "advanced-gulp-wordpress",
"version": "1.0.0",
"authors": [
"Ahmad Awais <me@ahmadawais.com>"
],
"description": "An Advanced Gulp Workflow for WordPress themes",
"main": "gulpfile.js",
"license": "GPL-2.0",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "~2.1.4"
}
}
package.json
package.json
用于管理Node.js依赖包,示例如下:
{
"name": "advanced-gulp-wordpress",
"version": "1.0.0",
"description": "An Advanced Gulp Workflow for WordPress themes",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Ahmad Awais",
"license": "GPL-2.0",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-sass": "^2.3.2",
"gulp-autoprefixer": "^3.1.1"
}
}
以上是 Advanced-Gulp-WordPress
项目的