過去記事で構築したgulpを使ったコーディング環境を
GitとSourceTreeで管理してみたいと思います。
GitとSourceTreeがインストールされている事と
過去記事のgulp環境を構築していることを前提としていますので
もしまだの方は先にGitとSourceTreeをインストールし、gulp環境を構築してみましょう。
※SourceTreeのインストールは結構手間がかかった記憶がありますので
諦めずにググりながらインストールしてみてください。
過去記事はこちら
- gulpとSassのインストール方法（Windows）
- 便利なgulpプラグインをいれてみた（Windows）
- gulpで画像圧縮してみた（Windows）
- gulpのメッセージ表示とエラー時監視を止めない（Windows）
【1】gulp環境構築の記事で作成したsampleフォルダを開きます。
sampleフォルダに新しくworkフォルダを作成しgulp関連ファイルと作業フォルダ格納します。
htmlフォルダ以外をworkフォルダに移動ですね。
sampleフォルダ内は以下のようになりました。
【2】gulpfile.jsを修正して出力先を変更しましょう。
workフォルダに移動したgulpfile.jsファイルに記述している各タスクの出力先のパスを変更します。
※workフォルダの中に移動したのでhtmlフォルダまでのパスが変わります。
例）
[変更前]
.pipe(gulp.dest("./html/css"))
[変更後]
.pipe(gulp.dest("../html/css"))
上記のように6個所変更しましょう。
(変更後のgulpfile.js)
var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var browserSync = require("browser-sync");
var imagemin = require('gulp-imagemin');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');
gulp.task("sass", function() {
gulp.src("gulp/sass/**/*scss")
.pipe(plumber({
errorHandler: notify.onError("Error: <%= error.message %>")
}))
.pipe(sass().on("error", sass.logError))
.pipe(sass({outputStyle: 'expanded'}))
.pipe(autoprefixer())
.pipe(gulp.dest("../html/css"))
.pipe(browserSync.stream())
.pipe(notify({
title:'Sassをコンパイルしました。',
message:new Date()
}));
});
//html
gulp.task("html", function () {
gulp.src("gulp/**/*.html")
.pipe(gulp.dest("../html/"))
.pipe(browserSync.stream())
.pipe(notify({
title:'HMTLをコンパイルしました。',
message:new Date()
}));
});
//js
gulp.task("js", function () {
gulp.src("gulp/js/**/*.js")
.pipe(gulp.dest("../html/js/"))
.pipe(browserSync.stream())
.pipe(notify({
title:'JSをコンパイルしました。',
message:new Date()
}));
});
//img
gulp.task('jpg', function() {
gulp.src('gulp/**/*.jpg')
.pipe(imagemin())
.pipe(gulp.dest('../html/'))
.pipe(browserSync.stream());
});
gulp.task('png', function() {
gulp.src('gulp/**/*.png')
.pipe(imagemin())
.pipe(gulp.dest('../html/'))
.pipe(browserSync.stream());
});
gulp.task('default', function() {
browserSync.init({
server: {
baseDir: "../html"
},
// external 指定すると、実行時のアクセスURLがIPアドレス指定側で開くことができる
open: 'external',
});
gulp.watch(['gulp/sass/**/*.scss'],["sass"]);
gulp.watch(['gulp/**/*.html'],["html"]);
gulp.watch(['gulp/**/*.js'],["js"]);
gulp.watch(['gulp/**/*.jpg'],["jpg"]);
gulp.watch(['gulp/**/*.png'],["png"]);
});
【3】動作確認をしてみましょう。
コマンドプロンプトでworkフォルダの階層まで移動しましょう。
※コマンドプロントにcd を入力してworkフォルダをドラッグ＆ドロップ。
移動したらgulpと入力してください。
そうするとブラウザが立ち上がりhtmlフォルダのindex.htmlが表示されます。
※表示されない場合は修正したパスを見直してみましょう。
問題なく表示されたらworkフォルダ内に移動したgulpフォルダ内htmlやsassを修正してみて
htmlフォルダのファイルにも修正が反映されているか確認しましょう。
【3】SourceTreeに新規でリポジトリを作ってみましょう。
SoruceTreeの使い方は下記サイトなどに詳しく載っているので確認してみましょう。
SourceTreeを開き左上の「新規 / クローンを作成する」からリポジトリを作りましょう。
「新規 / クローンを作成する」クリック
↓
「新規リポジトリを作成」タブを選択
保存先のパス：をsampleフォルダ内に作ったworkフォルダにし、
ブックマークを任意の名前にしましょう。
リポジトリが作成できたらコミットしましょう。コミット名はファーストコミットにしました。
コミットしたらブランチにmasterが作られていると思います。
【4】Git flowを使ってみよう。
独自で運用ルールを作るのもいいのですが結構大変ですよね。
Git flowを使って運用したほうが開発効率がいいのでおすすめです。
Git flowの使い方は下記サイトで確認してみましょう。
非常に分かりやすく説明されています。
Gitを最大限に活用できる「Git flow」で、効率よく開発を進めよう！
まず始めに左上の「リポジトリ」から「Git Flow」 → 「リポジトリを初期化」を選択し
そのままOKをクックします。
するとmasterの上にdevelopが自動で作られます。
これでGit Flowを使う準備ができましたので、上記のサイトで使い方を確認してください。
ここまでで以下のコーディング環境が整いました。
- gulpでの自動化
- 作業フォルダと出力フォルダの分離化
- 作業フォルダをGitとSourceTreeでバージョン管理
- SourceTreeでGit Flowを使った開発手法導入
どうでしたでしょうか？
初期設定で結構つまずいてしまったりすのですが、
色々なサイトで情報を集めながら自分が使いやすいコーディング環境を構築して
効率よくコーディングし、作業時間を少しでも減らせることを考えれば
各ツールの初期設定も頑張れるかと思います。
ブログ王ランキングに参加中！
