Advanced-Gulp-WordPress 项目教程

Advanced-Gulp-WordPress 项目教程

Advanced-Gulp-WordPressAn Advanced Gulp Workflow for WordPress themes. [🚨Deprecated in favour of WPGulp https://github.com/ahmadawais/WPGulp | STAR/FORK WPGulp instead]项目地址:https://gitcode.com/gh_mirrors/ad/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 项目的

Advanced-Gulp-WordPressAn Advanced Gulp Workflow for WordPress themes. [🚨Deprecated in favour of WPGulp https://github.com/ahmadawais/WPGulp | STAR/FORK WPGulp instead]项目地址:https://gitcode.com/gh_mirrors/ad/Advanced-Gulp-WordPress