SIMタスクランナーのGulpをHTML/CSSの静的サイトで使う方法を紹介します。
紹介するgulpテンプレートでできること
SIM今回静的サイトのテンプレとして用意したgulpでできることは下記のとおりです。
- sassファイルのcssファイルへのコンパイル
- ベンダープレフィックスを自動で付与
- ファイルの監視
- ファイル更新時にブラウザの立ち上げと自動リロード
- cssファイルとJavaScriptファイルの圧縮
- cssプロパティとメディアクエリーのソート
- HTMLファイルの整列
Node.jsとGulpのインストール
SIMgulpを使うには下準備として、Node.jsとGulpをインストールする必要があります。
Node.jsのインストール
SIM下記Node.js公式サイトから推奨版をダウンロードし、お使いのコンピューターにインストールして下さい。
インストール後にターミナルを開き、下記コマンドを入力、リターンキーを押して下さい。
node -vv18.16.0のようにバーションが表示されれば成功です。
つづいて、ターミナルに下記コマンドを入力、リターンキーを押して下さい。
npm -v9.5.1のようにバーションが表示されれば成功です。
Gulpのインストール
SIMゼロから構築する場合には下記の作業を行って下さい。
- 作業フォルダをVisual Studio Code（以下VSCode）で開く
- VSコードのメニューバーのターミナル＞新しいターミナルをクリック
- npm init -yと入力、リターンを押す(package.jsonのインストール)
- package.jsonファイルが生成される
- npm install –save-dev gulpと入力、リターンを押す（gulpのインストール）
- node_modulesというフォルダが追加され、その中に関連ファイルとともにgulpがインストールされている。そしてpackage.jsonの下の方にgulpとバージョンが追加される
ここまでの作業が成功すると、package.jsonを開いて下記のような記述が確認できるはず。
{
"name": "作業フォルダーの名前",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^4.0.2"
}
}静的サイトの作業フォルダーを作成
SIMここで紹介するのは私の事例ですので、必要に応じてアレンジして下さい。
作業フォルダーをVisual Studio Codeで開く
SIM作業用フォルダをVisual Studio Code（以下VSCode）で開いて下さい。
作業用フォルダはサイト制作に必要なHTML/CSS/JavaScript/画像ファイルが入っているフォルダのことです。
例えば、下記は作業フォルダ「課題５Flexbox-3」を実際にVSCodeで開いたものです。
Gulp用の階層構造を作る（静的サイト用）
SIM私の事例では、下記ようなファイル構造を最初に作ります。
gulpfile.jsとpackage.jsonは上で作成したものをコピペして下さい。
- gulpfile.jsとpackage.jsonは上で作成したものをとりあえずコピペして下さい。
- node_modulesはこの段階では削除しても構いません。
このときhtmlファイル内に書いたcss, JavaScript, 画像ファイルへの相対パスを正しく書き換える必要があります。
作業フォルダー
node_modules（gulpインストール後に生成されるフォルダ）
gulpfile.js（テンプレ有り）
package.json（テンプレ有り）
src
assets
index.html
css
style01.scss（全FLOCCSファイルを読み込むscssファイル）
sass
scssファイル（FLOCCS）
image
画像ファイル群
js
javascriptファイル作ったフォルダの目的やgulp利用時のフォルダ構成を以下に補足しておきます。
- src/assetsフォルダ：ここに全開発用ファイル（html, scss, JavaScript, 画像ファイル）を入れます。
- gulp実行後、publicフォルダが作業フォルダ直下に新たに生成され、その内にコンパイルあるいは整形されたファイル群が入ります。
package.jsonのテンプレートファイル（静的サイト用）
SIM下記package.jsonファイルを作っておくと、別のプロジェクトがにもコピペで使いまわしができます。
package.jsonを開いて、下記で上書きして下さい。
{
"devDependencies": {
"autoprefixer": "^10.4.14",
"browser-sync": "^2.29.1",
"css-declaration-sorter": "^6.4.0",
"gulp": "^4.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-html-beautify": "^1.0.1",
"gulp-merge-media-queries": "^0.2.1",
"gulp-postcss": "^9.0.1",
"gulp-rename": "^2.0.0",
"gulp-sass": "^5.1.0",
"gulp-uglify": "^3.0.2",
"postcss": "^8.4.23",
"sass": "^1.62.1"
},
"browserslist":["defaults"]
}このファイルを一旦作ってしまえば、別プロジェクトでもテンプレとしてコピペで使い回せます。
gulpfile.jsのテンプレートファイル（静的サイト用）
SIMgulpfile.jsを作成し、下記をまるごとコピペして下さい。
gulpfile.jsを開いて、下記で上書きして下さい。
ファイルやフォルダのパス、ファイル名・フォルダ名は適宜変更して下さい。これらが間違っているとgulpが正常に動作しません。
const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const cssSorter = require("css-declaration-sorter");
const mmq = require("gulp-merge-media-queries");
const browserSync = require("browser-sync");
const cleanCss = require("gulp-clean-css");
const uglify = require("gulp-uglify");
const rename = require("gulp-rename");
const htmlBeautify = require("gulp-html-beautify")
function compileSass() {
return gulp
.src("./src/assets/css/*.scss")
.pipe(sass())
.pipe(
postcss([
autoprefixer(),
cssSorter({
order: "smacss",
}),
])
)
.pipe(mmq())
.pipe(gulp.dest("./public/assets/css/"))
.pipe(cleanCss())
.pipe(rename({
suffix: ".min"
}))
.pipe(gulp.dest("./public/assets/css/"))
}
// ファイルの変更を監視
function watch() {
gulp.watch("./src/assets/**/*.scss", gulp.series(compileSass, browserReload));
gulp.watch("./src/assets/js/**/*.js", gulp.series(minJS, browserReload));
gulp.watch("./src/assets/image/**/*.js", gulp.series(copyImage, browserReload));
gulp.watch("./src/**/*.html", gulp.series(formatHTML, browserReload));
}
// ブラウザの立ち上げ
function browserInit(done) {
browserSync.init({
server: {
baseDir: "./public/"
}
});
done();
}
// ブラウザのリロード
function browserReload(done) {
browserSync.reload();
done();
}
// JSの圧縮
function minJS() {
return gulp.src("./src/assets/js/**/*.js")
.pipe(gulp.dest("./public/assets/js/"))
.pipe(uglify())
.pipe(rename({
suffix: ".min"
}))
.pipe(gulp.dest("./public/assets/js/"))
}
// HTMLファイルのフォーマット
function formatHTML(){
return gulp.src("./src/**/*.html")
.pipe(htmlBeautify({
indent_size: 2,
indent_with_tabs: true,
}))
.pipe(gulp.dest("./public"))
}
function copyImage() {
return gulp.src("./src/assets/image/**/*")
.pipe(gulp.dest("./public/assets/image/"))
}
exports.test = test;
exports.compileSass = compileSass;
exports.watch = watch;
exports.browserInit = browserInit;
exports.dev = gulp.parallel(browserInit, watch);
exports.minJS = minJS;
exports.formatHTML = formatHTML;
exports.build = gulp.parallel(formatHTML, minJS, compileSass, copyImage); このファイルを一旦作ってしまえば、別プロジェクトでもテンプレとしてコピペで使い回せます。
gulpのインストール
SIM下記コマンドをVSCodeのターミナルで入力・リターンし、package.jsonの中身を一括インストールします。
package.jsonの中身を一括インストールするために、ターミナルで下記コマンドを入力・リターンキーを押します。
npm install成功すれば、作業フォルダ直下にnode_modulesが生成され、その中にはgulp関連のファイルが多数格納されているはずです。
gulpの利用
SIMこれで下準備が終わったので、gulpを使っていきます。
gulpファイルがあるフォルダの指定
久しぶりにgulpを使おうとすると、ターミナルのフォルダ設定がVSコードのトップフォルダに戻っていて下記のようなエラーが起きることがあります。
Local gulp not found in 「現在設定されているターミナルのフォルダ名」
Try running: npm install gulpこの場合は、gulpが入っているフォルダ名を指定する必要があります。この例ではgulpはdevフォルダに入っているので下記のようにターミナルに入力しリターンキーを押せば解決できます。
cd devSassおよびその他ファイルのコンパイル
SIMターミナルに下記コマンドを入力し、リターンキーを押して下さい。
npx gulp build成功すると、作業ファイル直下に、publicフォルダが新たに生成され、その中にはgulpによりコンパイルされたファイルが格納されているはずです。
この時、htmlファイル内のcss, JavaScript, 画像ファイルへの相対パスが間違っているとサイトが正しく表示されませんので、その場合はパスを修正して下さい。
ファイル更新の監視とブラウザ自動リロード
SIMターミナルに下記コマンドを入力し、リターンキーを押して下さい。
npx gulp dev成功すると、作業フォルダ/srcフォルダ内のhtml/sass/image/jsファイル群の監視がスタートし、これらのファイルに変更を加えるたびに自動的にコンパイルおよび表示ブラウザのリロードが行われます。
