gulp(3) js, git deploy

> npm i gulp-bro -D
> npm i babelify -D
> npm i uglifyify -D

• js파일 하나로 컴파일

• 컴파일하면서 babel

• js 압축 (공백 제거)

-이전 setting에서 babel과의 차이점은 앞에껀 gulpfile.babel.js파일 안의 ES6을 바꾸는 것

-여기서는 src폴더에 있는 js들의 문법을 지원가능한 버전으로 바꾸는 것

---

gulp-bro babelify uglifify

const js = () =>
	gulp
		.src(routes.js.src)
		.pipe(
			bro({
				transform: [
					babelify.configure({ presets: ["@babel/preset-env"] }),
					["uglifyify", { global: true }],
				],
			})
		)
		.pipe(gulp.dest(routes.js.dest));

• bro 안에 options로 transform: babelify 함

• 버전은 @babel/preset-env 플러그인 사용

---

npm i gulp-gh-pages-with-updated-gift -D

• git을 이용해서 자동으로 배포함

---

gulp-gh-pages-with-updated-gift

const git = () => gulp.src("build/**/*").pipe(ghPages());

• "gh-pages"란 branch로 push함

• 따라서 master branch가 설정돼 있는 상태에서 사용 가능

---

gulpfile.babel.js

import gulp from "gulp";
import gpug from "gulp-pug";
import del from "del";
import gws from "gulp-webserver";
import gimg from "gulp-image";
import sass from "gulp-sass";
import autoprefixer from "gulp-autoprefixer";
import csso from "gulp-csso";
import bro from "gulp-bro";
import babelify from "babelify";
import ghPages from "gulp-gh-pages-with-updated-gift";

sass.compiler = require("node-sass");

const routes = {
	pug: {
		src: "src/*.pug",
		dest: "build",
		watch: "src/**/*.pug",
	},
	img: {
		src: "src/img/*",
		dest: "build/img",
	},
	sass: {
		src: "src/scss/style.scss",
		dest: "build/css",
		watch: "src/**/*.scss",
	},
	js: {
		src: "src/js/main.js",
		dest: "build/js",
		watch: "src/**/*.js",
	},
};

// FUNCTIONS
const watch = () => {
	gulp.watch(routes.pug.watch, pug);
	gulp.watch(routes.img.src, img);
	gulp.watch(routes.sass.watch, scss);
	gulp.watch(routes.js.watch, js);
};

const clean = () => del(["build/", ".publish"]);

const pug = () => gulp.src(routes.pug.src).pipe(gpug()).pipe(gulp.dest(routes.pug.dest));

const webServer = () => {
	gulp.src("build").pipe(gws({ livereload: true, open: true }));
};

const img = () => gulp.src(routes.img.src).pipe(gimg()).pipe(gulp.dest(routes.img.dest));

const scss = () =>
	gulp
		.src(routes.sass.src)
		.pipe(sass().on("error", sass.logError))
		.pipe(
			autoprefixer({
				cascade: false,
			})
		)
		.pipe(csso())
		.pipe(gulp.dest(routes.sass.dest));

const js = () =>
	gulp
		.src(routes.js.src)
		.pipe(
			bro({
				transform: [
					babelify.configure({ presets: ["@babel/preset-env"] }),
					["uglifyify", { global: true }],
				],
			})
		)
		.pipe(gulp.dest(routes.js.dest));

const git = () => gulp.src("build/**/*").pipe(ghPages());

// TASKS
const prepare = gulp.series([clean]);

const assets = gulp.series([pug, img, scss, js]);

const render = gulp.parallel([webServer, watch]);

const uploadPage = gulp.series([git]);

// EXPORT
export const build = gulp.series([prepare, assets]);

export const dev = gulp.series([build, render]);

export const deploy = gulp.series([build, uploadPage, prepare]);

---

package.json

{
	"name": "gulp",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"author": "",
	"license": "ISC",
	"scripts": {
		"dev": "gulp dev",
		"build": "gulp build",
        "deploy": "gulp deploy",
	},
	"devDependencies": {
		"@babel/core": "^7.9.6",
		"@babel/preset-env": "^7.9.6",
		"@babel/register": "^7.9.0",
		"babelify": "^10.0.0",
		"gulp": "^4.0.2",
		"gulp-autoprefixer": "^7.0.1",
		"gulp-bro": "^2.0.0",
		"gulp-csso": "^4.0.1",
		"gulp-gh-pages-with-updated-gift": "^0.5.4",
		"gulp-image": "^6.1.0",
		"gulp-pug": "^4.0.1",
		"gulp-sass": "^4.1.0",
		"gulp-webserver": "^0.9.1",
		"node-sass": "^4.14.0",
		"uglifyify": "^5.0.2"
	},
	"dependencies": {
		"del": "^5.1.0"
	}
}

---

https://academy.nomadcoders.co