7.2. 基于 Bootstrap 创建主题,并通过 Gulp 编译 SASS。
在上一节课中,我们学习了如何使用 PhpStorm 内置的监视器编译 LESS。在本教程中,我们将创建一个基于 SASS Bootstrap 的主题。如果您在使用 LESS 和 PhpStorm 编译时遇到困难,可以尝试使用 Gulp 和 SASS。在当前阶段,使用 LESS 还是 SASS 都可以,但我建议您使用 SASS 与 Gulp,因为编译速度更快、配置更简单。
Gulp 是一个基于 JavaScript 的任务管理器。我们将用它来实现两个任务:一个用于监控 sass
文件夹的更改,另一个用于将 SASS 编译为 CSS。
让我们开始安装。首先,我已经安装好了 Drupal。现在需要下载 Bootstrap 主题,并将其放入 /themes
文件夹:
https://www.drupal.org/project/bootstrap
若要在 Bootstrap 子主题中使用 SASS,我们需要使用名为 sass 的 starter kit:
将该 sass
文件夹复制到 /themes
目录,与 bootstrap 并列放置,并重命名为您的主题名称,我这里命名为 drupalbook:
现在需要将所有文件名中的 THEMENAME
替换为您的主题名。例如,将 THEMENAME.starterkit.yml
重命名为 drupalbook.info.yml
,THEMENAME.libraries.yml
重命名为 drupalbook.libraries.yml
,依此类推。不要忘记修改配置文件夹中的文件,它们也包含 THEMENAME
。
在文件内部也可能包含 THEMENAME
,例如 sass/config/schema/THEMENAME.schema.yml
:
为了确保没有遗漏任何地方,可以在 PhpStorm 中全局搜索 THEMENAME
并替换为您的主题名:
输入 THEMENAME
并将其全部替换为 drupalbook
。
接下来,下载 Bootstrap 源文件并将其放入 /themes/drupalbook/bootstrap
文件夹:
https://getbootstrap.com/docs/4.3/getting-started/download/
https://getbootstrap.com/docs/3.3/getting-started/
我们需要的是 SASS 版本的 Bootstrap:
将整个 Bootstrap 文件夹放入主题中,使 assets
的路径为 /themes/drupalbook/bootstrap/assets
:
复制完主题所需文件后,我们需要引入 Gulp 来编译 SASS。
首先,安装 Node.js:
Node.js 是 JavaScript 的运行环境,它允许执行编译 SASS 到 CSS 的任务。安装过程与普通程序相同。建议下载最新版本(例如 7.x.x):
安装 Node.js 后,请重启 PhpStorm 或命令行终端。您可以在 PhpStorm 中直接打开终端:
或者通过 Windows 菜单打开命令提示符:
在命令行中输入以下命令以验证 Node.js 是否安装成功:
node -v
接下来,进入我们的 drupalbook
主题目录,并安装 Gulp。使用 cd
命令进入文件夹,使用 cd ..
返回上级目录。
若需切换磁盘,请输入相应的盘符(例如 D:
)。
进入主题文件夹后,使用 npm 安装 Gulp。npm 随 Node.js 一同安装。首先初始化 npm:
npm init
该命令将生成 package.json
文件,用于记录通过 npm 安装的所有包。执行命令时一路按 Enter 即可:
生成的 package.json
文件大致如下:
{
"name": "bootstrap-sass",
"version": "3.3.7",
"description": "bootstrap-sass 是基于 Sass 的 Bootstrap 3 版本。",
"main": "assets/javascripts/bootstrap.js",
"style": "assets/stylesheets/_bootstrap.scss",
"sass": "assets/stylesheets/_bootstrap.scss",
"license": "MIT"
}
然后安装 Gulp:
npm install --save-dev gulp
安装 gulp-sass 包:
npm install --save-dev gulp-sass
如果您使用的是 Gulp 4.x,请使用以下 Gulpfile.js
代码:
// Gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify');
var paths = {
styles: {
src: 'scss/**/*.scss',
dest: 'css'
}
};
function styles() {
return gulp
.src(paths.styles.src, { sourcemaps: true })
.pipe(sass())
.pipe(gulp.dest(paths.styles.dest));
}
function watch() {
gulp.watch(paths.styles.src, styles);
}
var build = gulp.parallel(styles, watch);
gulp.task(build);
gulp.task('default', build);
我们已经安装了 gulp
和 gulp-sass
,现在需要在主题根目录创建 Gulpfile.js
文件:
/themes/drupalbook/Gulpfile.js
对于上述代码,还需要安装以下库:
npm install gulp-concat
npm install gulp-uglify
我们设置 Gulp 将 SASS 编译后的 CSS 文件输出到 css
文件夹,因此需要创建该文件夹及一个 style.css
文件:
/themes/drupalbook/css/style.css
此文件将包含所有编译后的 CSS 内容。
现在我们可以开始编译 SASS 了。在 PhpStorm 中打开主题文件夹,右键单击 Gulpfile.js
,选择 Show Gulp Tasks:
选择 default
任务,任务窗口将会立即打开:
从现在开始,每当您修改主题中的 SASS 文件,Gulp 都会自动重新编译。
编译完成后,CSS 内容会写入 style.css
文件中,例如背景颜色会变为黄色:
起初,使用 Gulp 设置编译环境可能看起来复杂,但如果您已经安装了 Node.js,只需创建一个 Gulpfile.js
文件并安装 gulp
与 gulp-sass
包即可。如果您在安装或配置过程中遇到问题,可以在评论区留言。