頑なにWordPressテーマのビルドをrubyの自動化ツールであるGuardを使ってやってきたのですが、フロントエンドに関しては、今どきはnodeを使ったほうがバージョンアップも盛んですし情報も充実しています。
というわけでnodeの今どきのビルドツールであるGulpを使ってビルドするようにしてみました。
目次
テーマのディレクトリ構成
[theme] ├─assets # 画像などの素材一式 | ├── fonts # フォント | ├── images # 画像 | ├── javascripts # JavaScript | └── stylesheets # sassファイル └─partials # 部分的に使用するテンプレート
Gulpの設定
Gulpのインストール
npm install -g gulp
でGulpコマンドが使えるようにしておきます。
必要なモジュールのインストール
テーマディレクトリにpackage.json
という名前で、以下の内容が記述されているファイルを作成します。
{ "name": "your-theme-name", "version": "1.0.0", "dependencies": {}, "devDependencies": { "gulp": "~3.5.1", "gulp-autoprefixer": "0.0.6", "gulp-cache": "~0.1.1", "gulp-concat": "~2.1.7", "gulp-imagemin": "~0.1.4", "gulp-jshint": "~1.3.4", "gulp-load-plugins": "~0.2.0", "gulp-minify-css": "~0.3.0", "gulp-notify": "~0.4.0", "gulp-rename": "~0.2.2", "gulp-ruby-sass": "~0.3.0", "gulp-uglify": "~0.2.0", "gulp-compass": "~1.1.8" } }
package.json
がある状態でnpm install
とコマンドを打つと、テーマディレクトリ直下にnode_modules
というディレクトリが生成され、必要なモジュールがインストールされます。
Gitでバージョン管理している場合は.gitignoreにnode_modules/
を加えておくとよいでしょう。
gulpfile.jsの用意
CoffeeScriptで書くこともできるのですが、内容のわりには設定が面倒なので普通にJavaScriptで書いています。
// Load plugins var gulp = require('gulp'), plugins = require('gulp-load-plugins')({ camelize: true }), lr = require('tiny-lr'), server = lr(); // Stylesheets gulp.task('stylesheets', function() { return gulp.src('assets/stylesheets/*.sass') .pipe(plugins.compass({ css: 'assets/tmp', sass: 'assets/stylesheets', image: 'assets/images' })) .pipe(plugins.autoprefixer('last 2 versions', 'ie 9', 'ios 6', 'android 4')) .pipe(plugins.minifyCss({ keepSpecialComments: 1 })) .pipe(gulp.dest('./')) .pipe(plugins.livereload(server)) .pipe(plugins.notify({ message: 'Styles task complete' })); }); // JavaScripts gulp.task('javascripts', function() { return gulp.src('assets/javascripts/*.js') .pipe(plugins.concat('main.js')) .pipe(gulp.dest('./')) .pipe(plugins.rename({ suffix: '.min' })) .pipe(plugins.uglify()) .pipe(plugins.livereload(server)) .pipe(gulp.dest('./')) .pipe(plugins.notify({ message: 'Scripts task complete' })); }); // Images gulp.task('images', function() { return gulp.src('assets/images/**/*') .pipe(plugins.cache(plugins.imagemin({ optimizationLevel: 7, progressive: true, interlaced: true }))) .pipe(plugins.livereload(server)) .pipe(gulp.dest('assets/images')) .pipe(plugins.notify({ message: 'Images task complete' })); }); // Watch gulp.task('watch', function() { // Listen on port 35729 server.listen(35729, function (err) { if (err) { return console.log(err) }; // Watch .sass files gulp.watch('assets/stylesheets/**/*.sass', ['stylesheets']); // Watch .js files gulp.watch('assets/javascripts/**/*.js', ['javascripts']); // Watch image files gulp.watch('assets/images/**/*', ['images']); }); }); // Default task gulp.task('default', ['stylesheets', 'javascripts', 'images', 'watch']);
このファイルをテーマディレクトリの直下にgulpfile.js
という名前で配置して、gulp
とコマンドを打ち込むと、ファイルの変更を検知しながらリアルタイムでビルドを行ってくれます。
加えてhtmlのヘッダで結合&ミニファイされたcssファイルとjsファイルを読み込むようにするのを忘れずに。
CoffeeScriptを使いたい場合はgulp-coffeeを挟めばOKです。
注意すべきは、JavaScriptを多用するプロジェクトの場合はJavaScriptの結合順序を考えなきゃいけないので、上記のファイルのままだと使い物にならないかもしれないです。jQueryを使うならBowerでパッケージ管理もしたいところだし、まだまだ進化させるポイントはありますね。
Gulpは良い
何にせよ、Gulp、良いです。
Grunt.jsは使っていて、ただただ辛かった。JSONだけで上手く書かなければいけないというのは、過去のXML地獄を思い出させるつらさがありました。その点、Gulpはコードで表現ができるので、人のを見るのも自分のをメンテするのも非常に楽です。