コーディングが早くなるgulpのタスク設定を公開します
最近フロント案件が多くなってきたので、僕のコーディングを加速させてくれるgulpのタスクを公開したいと思います。普通にコーディングするより作業スピードが全然違うと思うので、ぜひこれからgulpを導入したい人は設定してみてください!
僕もgulpとは??の状態から自力で調べて実装してみたので初心者の方もこれからgulp導入したいな、と思う人はぜひ参考にしてみてください。
gulpってそんな便利なの?コーディングは早くなる?
コーディングって結構時間がかかったりするんですよね。
細かい部分の修正が重なってミスに繋がったり、ソースが汚くなっていったりとめんどくさい作業が多いなーという印象ですが、gulpを導入すると手間のかかる作業は自動でやってくれるので設定しておいて損はないですよ。
導入方法はこちらを参考にしてみてください。
結構簡単でsassを導入するだけでgulpをいれてみるのもいいかもしれません。
コーディング作業環境はこんな感じ
gulpfile.jsのルートディレクトリ配下に以下を配置しています。
[box class=”black_box” title=””]gulp
|-_frontend <——実際に作業するディレクトリ
|-_dest <——納品するファイルが保存されるディレクトリ
|-gulpfile.js
|-node_modules
|-package-lock.json
|-package.json[/box]
こんな感じになっています。
ざっくり説明すると、作業用ディレクトリと納品用ディレクトリを別にしていることですね。
理由としては、sassやejsといった納品時に不要なファイルは余分になってしまうので、必要なファイルを絞って出力してすぐに納品できるようにしてあります。
コーディング時の ディレクトリ配下
主に以下のディレクトリになっています。ここで見慣れないファイルがあると思いますが,「.ejs」は「.html」と同じと思ってもらえれば大丈夫です。
[box class=”black_box” title=””]|-css
|-style.css
|-common.css
|-reset.css
|-scss
|-style.scss
|js
|-common.js
|-jQuery.Ver00.js
|ejs
|-index.ejs
|-layout
|-header.ejs
|-footer.ejs
|-一覧ディレクトリ
|-hoge.ejs
|-詳細ディレクトリ
|-hoge.ejs[/box]
理由としては、headerやfooterといった共通で使うパーツをモジュール化して呼び出せるようにしてます。
コーディングあるあるですが、デザインが変わったためheaderの一部を変えて欲しいという依頼があったとします。
もし大型サイトの制作で30Pあったとしたら全て修正しなければなりません。
一括置換で修正できますが結構神経使う作業なんですよね。考え方はPHPと同じでheader.phpやfooter.phpと同じです。headerだけ修正したら全てのページに反映させることができます。
大型案件の時はこれ結構便利なんですよ!!
scssディレクトリ内のファイルを修正すると自動でcssに出力される仕組みとなっています。
[quads id=1]
開発環境での実装方法
文字ばかりでわかりにくいですよね・・笑
もう少しわかりやすく書くと大きく分けて2つです。
[box class=”black_box” title=””]・htmlをテンプレート化してコーディングを早くする
・sassを使ってcssの設計を早くする[/box]
仕組みになっています。編集して保存時に納品用にも自動で保存がされる仕組みです。
htmlの編集は?
主にejs/配下のindex.ejsを作成していけば問題なし。gulpで_frontend/配下のファイルに更新がかかれば自動でオートリロードがかかる仕組みになっている。
ejsファイルが保存された段階で_dest/配下に.htmlファイルとして出力がされるようになっていて楽ですよー
[voice icon=”https://loop-bitter.xyz/wp-content/uploads/2018/07/image1.png” name=”きゅん” type=”r”]ブラウザで表示されるファイルは_dest/配下のindex.htmlになっているのでブラウザ確認で表示されているのは納品用のファイルになるのです!開発環境と同じファイルなので問題なしですね![/voice]
cssの編集は?
_frontend/配下のscss/配下を編集すれば問題なし。imageフォルダも_frontend/に追加した段階でgulpにより_dest/にも自動で追加される。
scssファイル保存時に自動で_dest/配下のcss/ファイルが自動でコンパイルされるのでコーディングが神速になる。
[voice icon=”https://loop-bitter.xyz/wp-content/uploads/2018/07/image1.png” name=”きゅん” type=”r”]テンプレートとして.ejsを使っていますが、scssもheader.scssやfooter.scssのように部分で分けています。なのでstyle.css(大元のcss)の行数が増えることなくcssの編集が早くなると思いますよ![/voice]
gulpファイルのタスク一覧
僕が設定しているgulpファイルになります。
ひとつひとつ説明していきますー
gulpfile.jsの中身
const fs = require(‘fs’);
const ejs = require(‘gulp-ejs’);
const rename = require(‘gulp-rename’);
const sass = require(“gulp-sass”);
const plumber = require(‘gulp-plumber’);
const notify = require(“gulp-notify”);
const autoprefixer = require(“gulp-autoprefixer”);
const browserSync = require(‘browser-sync’).create();//ベンダープレフィックスの付与対象
const options = {
browsers: [‘last 2 version’, ‘iOS >= 8.1’, ‘Android >= 4.4’],
cascade: false
};
//ブラウザ同期
gulp.task(‘browser-sync’, () => {
return browserSync.init(null, {
server: ‘./_dest/’,
});
});
//再読み込みの自動化
gulp.task(‘bs-reload’, function () {
browserSync.reload();
});
//scssコンパイル
gulp.task(“sass”, function() {
gulp.src(“_frontend/scss/*.scss”)
//エラー時の停止を防止&エラー時に通知を表示
.pipe(plumber({
errorHandler: notify.onError({
title: “エラーがあります”, // エラー時の文言
message: “<%= error.message %>” // エラー内容を表示させる
})
}))
//インデントを整える
.pipe(sass({
outputStyle: ‘expanded’
}))
//ベンダープレフィックス
.pipe(autoprefixer(options))
.pipe(gulp.dest(‘_frontend/css/’))
.pipe(gulp.dest(“./_dest/css”))
});
//cssを./destに出力
gulp.task( ‘css’,function() {
return gulp.src(‘_frontend/**/*.css’)
.pipe(gulp.dest(“./_dest/”))
});
//jsを./destに出力
gulp.task( ‘js’,function() {
return gulp.src(‘_frontend/**/*.js’)
.pipe(gulp.dest(“./_dest/”))
});
//imageを./destに出力
gulp.task(‘img’,function() {
return gulp.src(‘_frontend/images/*’) // sassディレクトリ以外の全ファイルを対象にし、
.pipe(gulp.dest(“./_dest/images”))
});
//ejs
gulp.task(‘ejs’,function(){
//ejsファイルをhtmlファイルに生成する。_.ejsファイルは除外する
var ejs_src = [‘_frontend/ejs/**/*.ejs’, “!” + “_frontend/ejs/**/_*.ejs”];
gulp.src(ejs_src)
.pipe(plumber())
.pipe(ejs())
.pipe(rename({extname: ‘.html’}))
.pipe(gulp.dest(‘_dest/’));//destファイルに出力
});
//下記のファイルが変更されたらリロード
gulp.task(‘default’, [‘browser-sync’], function () {
gulp.watch(“_frontend/scss/*.scss”, [‘sass’]);
gulp.watch(“_frontend/css/*.css”, [‘css’]);
gulp.watch(“_frontend/js/*.js”, [‘js’]);
gulp.watch(“_frontend/images/*”, [‘img’]);
gulp.watch(“_frontend/*.html”, [‘bs-reload’]);
gulp.watch(“_frontend/ejs/**/*.ejs”, [‘ejs’]);
gulp.watch([“_frontend/scss/*.scss”,”_frontend/css/*.css”,”_frontend/js/*.js”,”_frontend/ejs/**/*.ejs”,”_frontend/ejs/images/*”], [‘bs-reload’]);
});
gulp-autoprefixer
ブラウザごとのベンダープレフィックスを自動で付与します。最近ではそんなに気にならないと思いますが「display: flex」などを多用するのでgulp-autoprefixerで自動でcssに付与してくれます。
コマンドラインで下記を入力してんストールします
npm install –save-dev gulp-autoprefixer
それぞれのブラウザを指定しているのと
const options = {
browsers: [‘last 2 version’, ‘iOS >= 8.1’, ‘Android >= 4.4’],
cascade: false
};
開発用と納品用の2つに付与されるようにしています。
.pipe(autoprefixer(options))
.pipe(gulp.dest(‘_frontend/css/’))
.pipe(gulp.dest(“./_dest/css”))
ejs
こちらで先述したhtmlをテンプレート化して編集を楽にすることができるようになっています。
コマンドラインで下記を入力してんストールします
npm install –save-dev gulp-ejs
bs-sync
編集したファイルを即座にブラウザで更新してくれます。編集して更新ボタンを押すことなく、すぐにブラウザ確認ができます。
npm install browser-sync gulp –save-dev
下記でタスクの指定を記述します。
gulp.task(‘default’, [‘browser-sync’], function () { ここに変更のあったファイルの指定をします });
gulp-sass
sassを使えるようにしてくれます。これもコマンドを入力するだけで使えるようになります!
npm install node-sass gulp-sass –save-dev
僕のgulpファイルではcssを出力する場所を指定して、エラー時にメッセージを出してくれるように設定しています。
cssに出力したファイルはインデントがうまく整えてないので、インデントも整えるようにも設定しています。
[quads id=1]
その他の設定
・scssの編集エラー時にエラーメッセージがなるのでscss編集時にすぐに対処が可能。
・ブラウザsyncをかけているので更新の動作がなくなる。
・gulpエラー時にgulpの動作が止まることがなくなる。
個人的に思うこと
だいたいこんな感じで設定しています。後半端折り過ぎてしまいましたかね?
これと同じように設定していただければ、コーディングがスムーズになるかと思いますよ!
gulpをこれから使ってみようかな?と思う方がいましたらぜひ参考にしてみてください(^^)