僕は普段からgulp.jsをよく使っています。
gulpはSassをコンパイルしたり、ファイル保存時にブラウザをリロードしたり、いろいろなことが出来るのでとても便利です。
今回は僕が普段から使っているgulpのプラグインや設定を紹介しようと思います。
gulpのインストール方法や使い方については触れませんので、gulpをインストールしていない場合や使い方が分からない場合は以下の記事を読んでみてください。
僕もいつも参考にさせていただいています。
目次
gulpを使ってやっていること
僕がgulpを使ってやっていることは以下の通りです。
- Sassファイルを保存時に自動でCSSファイルにコンパイルする
- Sassファイル内に散乱したメディアクエリをCSSファイルでは1箇所にまとめる
- Sassのソースマップを出力する
- Sassのコンパイル時にベンダープレフィックスを追加する
- ファイルの保存時にブラウザを自動でリロードして更新を反映する
- 画像ファイルを圧縮する
- JSファイルを圧縮する
ディレクトリ構成
以下のディレクトリ構成を想定しています。
root/ ├ css/ │ └ style.css ├ img/ │ └ base/ ├ js/ │ └ script.js ├ scss/ │ └ style.scss ├ gulpfile.js ├ index.html └ package.json
ディレクトリ構成を変更する場合は、後述するgulpfile.jsの内容を少し書き換える必要があります。
package.jsonの内容
package.jsonの内容は以下の通りです。
{
"name": "gulp_demo", // 任意のプロジェクト名に変更してください
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.7.6",
"browser-sync": "^2.26.7",
"css-mqpacker": "^7.0.0",
"gulp": "^4.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-imagemin": "^7.1.0",
"gulp-postcss": "^8.0.0",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.1.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2",
"imagemin-mozjpeg": "^8.0.0",
"imagemin-pngquant": "^8.0.0"
}
}
ターミナルでpackage.jsonと同じディレクトリに移動し、以下のコマンドを実行すると必要なnpmパッケージがインストールされます。
$ npm install
gulpfile.jsの内容
gulpfile.jsの内容は以下の通りです。
var gulp = require('gulp');
var browserSync = require('browser-sync');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require("gulp-rename");
var imagemin = require("gulp-imagemin");
var imageminPngquant = require("imagemin-pngquant");
var imageminMozjpeg = require("imagemin-mozjpeg");
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
var mqpacker = require('css-mqpacker');
// ブラウザの自動更新
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: './',
index: 'index.html'
}
});
});
gulp.task('bs-reload', function (done) {
browserSync.reload();
done();
});
// CSSコードの圧縮
gulp.task('mincss', function() {
return gulp.src("css/*.css")
.pipe(cleanCSS())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('css/'));
});
// JavaScriptコードの圧縮
gulp.task('minjs', function() {
return gulp.src("js/*.js")
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('js/'));
});
// 画像の圧縮
var imageminOption = [
imageminPngquant({ quality: [0.65, 0.8] }),
imageminMozjpeg({ quality: 85 }),
imagemin.gifsicle({
interlaced: false,
optimizationLevel: 1,
colors: 256
}),
imagemin.mozjpeg(),
imagemin.optipng(),
imagemin.svgo()
];
gulp.task( 'imagemin', function() {
return gulp
.src( './img/base/*.{png,jpg,gif,svg}' )
.pipe( imagemin( imageminOption ) )
.pipe( gulp.dest( './img' ) );
});
// Sassコンパイル
gulp.task('sass', function() {
return gulp.src('./scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'expanded'}))
.pipe(postcss([autoprefixer()]))
.pipe(postcss([mqpacker()]))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./css'))
.pipe(browserSync.stream());
});
// ファイル監視
gulp.task( 'watch', function() {
gulp.watch( './scss/**/*.scss', gulp.task( 'sass' ) );
gulp.watch("./js/**/*.js", gulp.task("bs-reload"));
gulp.watch("./**/*.html", gulp.task("bs-reload"));
});
gulp.task("default", gulp.series(gulp.parallel("browser-sync", "watch")));
gulpを実行する
以下のコマンドを実行するとローカルサーバーが立ち上がり、ファイルの監視がスタートします。
$ npx gulp
htmlファイル、scssファイル、jsファイルを保存したら自動でブラウザがリロードされます。
また、scssファイルは保存時にcssファイルにコンパイルされます。
ちなみにindex.htmlにstyle.cssを読み込むのを忘れないように注意してください。
<!-- index.htmlの<head>内に追加してください -->
<link rel="stylesheet" href="css/style.css">
style.scss内で複数の箇所に書いたメディアクエリはstyle.cssでは1箇所にまとめられます。
また、ベンダープレフィックスも追加されます。
// style.scssに複数の箇所に書いたメディアクエリ
.hoge {
font-size: 1rem;
@media (min-width: 40em) {
font-size: 2rem;
}
}
.hogehoge {
padding: 1rem;
animation: fadeIn 1s ease;
@media (min-width: 40em) {
padding: 2rem;
}
}
// style.cssでは1箇所にまとめられる
.hoge {
font-size: 1rem;
}
.hogehoge {
padding: 1rem;
-webkit-animation: fadeIn 1s ease; // ベンダープレフィックスを追加
animation: fadeIn 1s ease;
}
@media (min-width: 40em) {
.hoge {
font-size: 2rem;
}
.hogehoge {
padding: 2rem;
}
}
画像を圧縮する
root/img/base/
ディレクトリ内に画像を保存して以下のコマンドを実行すると、圧縮された画像がroot/img/
ディレクトリ内に保存されます。
jpegやpngはもちろん、svgも圧縮することが可能です。
$ npx gulp imagemin
JSファイルを圧縮する
以下のコマンドを実行するとscript.jsが圧縮されてscript.min.jsというファイル名で保存されます。
$ npx gulp minjs
WordPressテーマ内で使用する
ローカル環境で開発中のWordPressテーマ内で使用する場合は、browser-syncのオプションを変更しないといけません。
また、監視対象をhtmlからphpに変更する必要があります。
browser-syncのproxyオプションにローカル環境のWordPressサイトのURLを指定しておけば、ファイル保存時に自動でブラウザをリロードすることが出来ます。
WordPressテーマ内で使用する場合のgulpfile.jsは以下の通りです。
var gulp = require('gulp');
var browserSync = require('browser-sync');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require("gulp-rename");
var imagemin = require("gulp-imagemin");
var imageminPngquant = require("imagemin-pngquant");
var imageminMozjpeg = require("imagemin-mozjpeg");
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
var mqpacker = require('css-mqpacker');
// ブラウザの自動更新
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "http://demo.test/" // WordPressのURLを指定してください。
});
});
gulp.task('bs-reload', function (done) {
browserSync.reload();
done();
});
// CSSコードの圧縮
gulp.task('mincss', function() {
return gulp.src("css/*.css")
.pipe(cleanCSS())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('css/'));
});
// JavaScriptコードの圧縮
gulp.task('minjs', function() {
return gulp.src("js/*.js")
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('js/'));
});
// 画像の圧縮
var imageminOption = [
imageminPngquant({ quality: [0.65, 0.8] }),
imageminMozjpeg({ quality: 85 }),
imagemin.gifsicle({
interlaced: false,
optimizationLevel: 1,
colors: 256
}),
imagemin.mozjpeg(),
imagemin.optipng(),
imagemin.svgo()
];
gulp.task( 'imagemin', function() {
return gulp
.src( './img/base/*.{png,jpg,gif,svg}' )
.pipe( imagemin( imageminOption ) )
.pipe( gulp.dest( './img' ) );
});
// Sassコンパイル
gulp.task('sass', function() {
return gulp.src('./scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'expanded'}))
.pipe(postcss([autoprefixer()]))
.pipe(postcss([mqpacker()]))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./css'))
.pipe(browserSync.stream());
});
// ファイル監視
gulp.task( 'watch', function() {
gulp.watch( './scss/**/*.scss', gulp.task( 'sass' ) );
gulp.watch("./js/**/*.js", gulp.task("bs-reload"));
gulp.watch("./**/*.php", gulp.task("bs-reload")); // 監視対象をphpファイルに変更
});
gulp.task("default", gulp.series(gulp.parallel("browser-sync", "watch")));
まとめ
gulpを活用することでかなり効率的にコーディングできるようになりました。
特にSassの自動コンパイルとブラウザのオートリロードはオススメです。
もっとコーディングの効率を上げたいという場合は、ぜひgulpを導入してみてください。