Webサイトコーディングのあれこれ: gulpを使ったコーディング環境をGitとSourceTreeで管理してみよう

今回はgulpを使ったコーディング環境をGitとSourceTreeで管理してみようです。
過去記事で構築したgulpを使ったコーディング環境を
GitとSourceTreeで管理してみたいと思います。

GitとSourceTreeがインストールされている事と
過去記事のgulp環境を構築していることを前提としていますので
もしまだの方は先にGitとSourceTreeをインストールし、gulp環境を構築してみましょう。

※SourceTreeのインストールは結構手間がかかった記憶がありますので
諦めずにググりながらインストールしてみてください。

過去記事はこちら

【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の使い方は下記サイトなどに詳しく載っているので確認してみましょう。

【連載Git入門目次】ほんとは簡単？SourceTreeでGitを始めよう！

SourceTreeを開き左上の「新規 / クローンを作成する」からリポジトリを作りましょう。

「新規 / クローンを作成する」クリック
↓
「新規リポジトリを作成」タブを選択

保存先のパス：をsampleフォルダ内に作ったworkフォルダにし、
ブックマークを任意の名前にしましょう。

リポジトリが作成できたらコミットしましょう。コミット名はファーストコミットにしました。

コミットしたらブランチにmasterが作られていると思います。

【4】Git flowを使ってみよう。

独自で運用ルールを作るのもいいのですが結構大変ですよね。

Git flowを使って運用したほうが開発効率がいいのでおすすめです。

Git flowの使い方は下記サイトで確認してみましょう。

非常に分かりやすく説明されています。

Gitを最大限に活用できる「Git flow」で、効率よく開発を進めよう！

まず始めに左上の「リポジトリ」から「Git Flow」 → 「リポジトリを初期化」を選択し
そのままOKをクックします。

するとmasterの上にdevelopが自動で作られます。

これでGit Flowを使う準備ができましたので、上記のサイトで使い方を確認してください。

ここまでで以下のコーディング環境が整いました。