概要
開発しやすい環境の作り方~Web系~
この記事を見て、gulpを初めて使って感動した自分です。
wordpress開発にも活用したいと思い、この記事を書きました。
基本的にこの記事の内容に沿っていますが、少しだけwordpress用に変えています。
環境
- node v10.8.0
- npm v6.4.1
- gulp v3.9.1
最終的なファイル構成
最終的には、このようなファイル構成になります。
もっと綺麗にまとめていきたいですね、、。
wordpress_template/
├ js/
├ images/
├ scss/
│ └ style.scss
├ pug/
│ └ index.pug
├ node_modukes/
├ package-lock.json
├ package.json
├ gulpfile.js
├ header.php
├ footer.php
├ index.php
└ style.css
環境構築
vccwの導入
wordpress開発の環境を作成します。
以下のページを参考にvccwを導入してください。
参考
http://vccw.cc/
WordPressをVagrant環境にらくらくインストールする。 - VCCW
VCCWで自作テーマを作るための準備
wordpressのテーマを作成していくディレクトリは
/path/to/vccw/wordpress/wp-content/themes/your_theme/になります。
WordPress環境にアクセスできることを確認します。
http://vccw.test/
http://192.168.33.10/
WordPressにログインできることを確認します。
http://vccw.test/wp-login.php/
デフォルトでは以下の通りとなっています。
- Username: admin
- Password: admin
Node.jsのインストール
まずGulpを使うためにはNode.jsが必要なので、インストールを行います。
https://nodejs.org/ja/
ターミナルで以下のコマンドを実行し、
バージョンが表示されることを確認してください。
node -v
npm -v
※Node.jsをインストールすると同時にnpmもインストールされます
フォルダ構成の構築
/path/to/vccw/wordpress/wp-content/themes/ディレクトリで以下のコマンドを実行します。
mkdir wordpress_template
cd wordpress_template
mkdir scss pug images js
npm init -y
Gulpのインストール
gulpを用いることによって、ファイルのコンパイルやブラウザのリロードを自動化することができます。
今回は以下のタスクをgulpを用いて自動化します。
| 利用するモジュール | 説明 |
|---|---|
| gulp-pug | pugファイルをhtmlファイルに変換 |
| gulp-sass | sass(scss)ファイルをcssファイルに変換 |
| gulp-rename | 出力ファイルの名前を変える(.html=>.php) |
| gulp-plumber | gulpのタスクでエラーが出た際の強制終了を防止 |
| browser-sync | ブラウザの自動リロード |
まずはグローバルにgulpをインストール。
sudo npm install -g gulp
次にローカルにgulpをインストール。
npm install --save-dev gulp
gulpモジュールのインストール
gulp-pug, gulp-sass, gulp-rename,
gulp-plumber, brower-syncをインストールします。
npm install --save-dev gulp-pug gulp-sass gulp-rename gulp-plumber browser-sync
wordpressに必要なファイルの作成
wordpress_templateフォルダにheader.phpとfooter.phpを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title><?php wp_title('|', true, 'right'); ?></title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_footer(); ?>
</body>
</html>
pugファイルの作成
pugフォルダにindex.pugを作成します。
.
<?php get_header(); ?>
.main
h1 Hello
p wordpress template
.
<?php get_footer(); ?>
scssファイルの作成
scssフォルダにstyle.scssを作成します。
@charset "utf-8";
/*
theme Name: wordpress_template
version： 1.0.0
*/
.main {
h1 {
color: red;
&:hover {
color: blue;
}
}
}
gulpfile.jsの作成
wordpress_templateフォルダにgulpfile.jsを作成します。
var gulp = require('gulp');
var sass = require('gulp-sass');
var pug = require('gulp-pug');
var rename = require('gulp-rename');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync');
gulp.task('sass', function() {
var option = {
outputStyle: 'expanded',
};
return gulp.src('./scss/**/*.scss')
.pipe(plumber())
.pipe(sass(option))
.pipe(gulp.dest('./'))
.pipe(browserSync.stream());
});
gulp.task('pug', function() {
var option = {
pretty: true,
};
return gulp.src(['./pug/**/*.pug'])
.pipe(plumber())
.pipe(pug(option))
.pipe(rename({
extname: '.php'
}))
.pipe(gulp.dest('./'));
});
gulp.task('browser-sync', function () {
browserSync({
// vccwで設定したipアドレス
proxy: "192.168.33.10"
});
});
gulp.task('reload', () => {
browserSync.reload();
});
gulp.task('watch', function() {
gulp.watch('./scss/**/*.scss', ['sass', 'reload']);
gulp.watch('./pug/**/*.pug', ['pug', 'reload']);
});
gulp.task('default', ['browser-sync', 'sass', 'pug', 'watch']);
実行
wordpressテーマの有効化
１度、pug=>html, scss=>cssのコンパイルを行っておきます。
gulp pug
gulp sass
コンパイルに成功すれば、新しいテーマとして認識されるようになっているため、
wordpressのテーマの設定を行います。
http://192.168.33.10/wp-login.php/
wordpressにログインし、外観/テーマをクリックし
WordPress Templateのテーマを有効化します。
gulp
有効化できたらteminalで以下のコマンドを実行します。
gulp
ブラウザが開き、pugやscssを編集するとブラウザが自動でリロードされます。
ソースコード
よりよい方法やアドバイスがあれば、教えてください。
最後まで読んでいただき、ありがとうございました。