프론트엔드 개발을 위한 Gulp

// 패키지 변수
const pkg = require("./package.json"); 
// gulp
const gulp = require("gulp"); 
// devDependencies에 있는 모든 플러그인을 $ 변수에 로딩합니다
const $ = require("gulp-load-plugins")({    pattern: ["*"],    scope: ["devDependencies"] }); 
const onError = (err) => console.log(err); 
const banner = [    "/**",    " * @project        <%= pkg.name %>",    " * @author         <%= pkg.author %>",    " * @build          " + $.moment().format("llll") + " ET",    " * @release        " + $.gitRevSync.long() + " [" + $.gitRevSync.branch() + "]",    " * @copyright      Copyright (c) " + $.moment().format("YYYY") + ", <%= pkg.copyright %>",    " *",    " */",    ""
].join("\n");

// 기본 작업 
gulp.task("default", ["css", "js"], () => {    $.livereload.listen();    gulp.watch([pkg.paths.src.scss + "**/*.scss"], ["css"]);    gulp.watch([pkg.paths.src.css + "**/*.css"], ["css"]);    gulp.watch([pkg.paths.src.js + "**/*.js"], ["js"]);    gulp.watch([pkg.paths.templates + "**/*.{html,htm,twig}"], () => {        gulp.src(pkg.paths.templates)            .pipe($.plumber({errorHandler: onError}))            .pipe($.livereload());    }); }); 
// 프로덕션 빌드 
gulp.task("build", ["download", "default", "favicons", "imagemin", "fonts", "criticalcss"]);

// scss = paths를 포함한 build 폴더로 scss를 빌드하고 소스맵을 만듭니다 
gulp.task("scss", () => {    $.fancyLog("-> Compiling scss");    return gulp.src(pkg.paths.src.scss + pkg.vars.scssName)        .pipe($.plumber({errorHandler: onError}))        .pipe($.sourcemaps.init({loadMaps: true}))        .pipe($.sass({                includePaths: pkg.paths.scss            })            .on("error", $.sass.logError))        .pipe($.cached("sass_compile"))        .pipe($.autoprefixer())        .pipe($.sourcemaps.write("./"))        .pipe($.size({gzip: true, showFiles: true}))        .pipe(gulp.dest(pkg.paths.build.css)); }); 
// css 작업 - 배포용 CSS를 public css 폴더로 하나로 합치고 최소화하고 여기에 배너를 추가합니다 
gulp.task("css", ["scss"], () => {    $.fancyLog("-> Building css");    return gulp.src(pkg.globs.distCss)        .pipe($.plumber({errorHandler: onError}))        .pipe($.newer({dest: pkg.paths.dist.css + pkg.vars.siteCssName}))        .pipe($.print())        .pipe($.sourcemaps.init({loadMaps: true}))        .pipe($.concat(pkg.vars.siteCssName))        .pipe($.cssnano({            discardComments: {                removeAll: true            },            discardDuplicates: true,            discardEmpty: true,            minifyFontValues: true,            minifySelectors: true        }))        .pipe($.header(banner, {pkg: pkg}))        .pipe($.sourcemaps.write("./"))        .pipe($.size({gzip: true, showFiles: true}))        .pipe(gulp.dest(pkg.paths.dist.css))        .pipe($.filter("**/*.css"))        .pipe($.livereload()); });

// Prism js 작업 - prismjs(번역주: 소스코드 하이라이트) 자바스크립트와 컨피그 파일을 하나의 번들로 합칩니다 
gulp.task("prism-js", () => {    $.fancyLog("-> Building prism.min.js...");    return gulp.src(pkg.globs.prismJs)        .pipe($.plumber({errorHandler: onError}))        .pipe($.newer({dest: pkg.paths.build.js + "prism.min.js"}))        .pipe($.concat("prism.min.js"))        .pipe($.uglify())        .pipe($.size({gzip: true, showFiles: true}))        .pipe(gulp.dest(pkg.paths.build.js)); }); 
// 바벨 js 작업 - 자바스크립트를 빌드 폴더로 트랜스파일 합니다 
gulp.task("js-babel", () => {    $.fancyLog("-> Transpiling Javascript via Babel...");    return gulp.src(pkg.globs.babelJs)        .pipe($.plumber({errorHandler: onError}))        .pipe($.newer({dest: pkg.paths.build.js}))        .pipe($.babel())        .pipe($.size({gzip: true, showFiles: true}))        .pipe(gulp.dest(pkg.paths.build.js)); }); 
// 인라인 js 작업 - 인라인 자바스크립트로 템플릿 경로의 _inlinejs 로 최소화 합니다 
gulp.task("js-inline", () => {    $.fancyLog("-> Copying inline js");    return gulp.src(pkg.globs.inlineJs)        .pipe($.plumber({errorHandler: onError}))        .pipe($.if(["*.js", "!*.min.js"],            $.newer({dest: pkg.paths.templates + "_inlinejs", ext: ".min.js"}),            $.newer({dest: pkg.paths.templates + "_inlinejs"})        ))        .pipe($.if(["*.js", "!*.min.js"],            $.uglify()        ))        .pipe($.if(["*.js", "!*.min.js"],            $.rename({suffix: ".min"})        ))        .pipe($.size({gzip: true, showFiles: true}))        .pipe(gulp.dest(pkg.paths.templates + "_inlinejs")); }); 
// js 작업 - public js 폴더로 배포 자바스크립트를 최소화하고 여기에 배너를 추가합니다 
gulp.task("js", ["js-inline", "js-babel", "prism-js"], () => {    $.fancyLog("-> Building js");    return gulp.src(pkg.globs.distJs)        .pipe($.plumber({errorHandler: onError}))        .pipe($.if(["*.js", "!*.min.js"],            $.newer({dest: pkg.paths.dist.js, ext: ".min.js"}),            $.newer({dest: pkg.paths.dist.js})        ))        .pipe($.if(["*.js", "!*.min.js"],            $.uglify()        ))        .pipe($.if(["*.js", "!*.min.js"],            $.rename({suffix: ".min"})        ))        .pipe($.header(banner, {pkg: pkg}))        .pipe($.size({gzip: true, showFiles: true}))        .pipe(gulp.dest(pkg.paths.dist.js))        .pipe($.filter("**/*.js"))        .pipe($.livereload()); });

// 파비콘 생성 작업 
gulp.task("favicons-generate", () => {    $.fancyLog("-> Generating favicons");    return gulp.src(pkg.paths.favicon.src).pipe($.favicons({        appName: pkg.name,        appDescription: pkg.description,        developerName: pkg.author,        developerURL: pkg.urls.live,        background: "#FFFFFF",        path: pkg.paths.favicon.path,        url: pkg.site_url,        display: "standalone",        orientation: "portrait",        version: pkg.version,        logging: false,        online: false,        html: pkg.paths.build.html + "favicons.html",        replace: true,        icons: {            android: false, // 안드로이드 홈스크린 아이콘 생성. 불리언             appleIcon: true, // 애플 터치 아이콘 생성. 불리언             appleStartup: false, // 에플 시작 이미지 생성. 불리언            coast: true, // 오페라 Coast 아이콘 생성. 불리언            favicons: true, // 기본 파비콘 생성. 불리언            firefox: true, // 파이어폭스 운영체제 아이콘 생성. 불리언             opengraph: false, // 페이스북 오픈 그래프 이미지 생성. 불리언            twitter: false, // 트위터 써머리 카드 이미지 생성. 불리언             windows: true, // 윈도우즈 8 타이틀 아이콘 생성. 불리언             yandex: true // Yandex 브라우져 아이콘 생성. 불리언         }    })).pipe(gulp.dest(pkg.paths.favicon.dest)); }); 
// 파비콘 복사 태스크 
gulp.task("favicons", ["favicons-generate"], () => {    $.fancyLog("-> Copying favicon.ico");    return gulp.src(pkg.globs.siteIcon)        .pipe($.size({gzip: true, showFiles: true}))        .pipe(gulp.dest(pkg.paths.dist.base)); });

// imagemin 태스크 
gulp.task("imagemin", () => {    return gulp.src(pkg.paths.dist.img + "**/*.{png,jpg,jpeg,gif,svg}")        .pipe($.imagemin({            progressive: true,            interlaced: true,            optimizationLevel: 7,            svgoPlugins: [{removeViewBox: false}],            verbose: true,            use: []        }))        .pipe(gulp.dest(pkg.paths.dist.img)); });

// fontello 생성 태스크 
gulp.task("generate-fontello", () => {    return gulp.src(pkg.paths.src.fontello + "config.json")        .pipe($.fontello())        .pipe($.print())        .pipe(gulp.dest(pkg.paths.build.fontello)) }); 
// 서체 복사 태스크 
gulp.task("fonts", ["generate-fontello"], () => {    return gulp.src(pkg.globs.fonts)        .pipe(gulp.dest(pkg.paths.dist.fonts)); });

// 배열에 있는 데이터를 순차적으로 처리합니다
// nths 아이템 콜벡이후에 n_1 아이템을 이동하면서 말이죠 
function doSynchronousLoop(data, processData, done) {    if (data.length > 0) {        const loop = (data, i, processData, done) => {            processData(data[i], i, () => {                if (++i < data.length) {                    loop(data, i, processData, done);                } else {                    done();                }            });        };        loop(data, 0, processData, done);    } else {        done();    } }

// 한번에 criticla path CSS 처리합니다 
function processCriticalCSS(element, i, callback) {    const criticalSrc = pkg.urls.critical + element.url;    const criticalDest = pkg.paths.templates + element.template + "_critical.min.css";     let criticalWidth = 1200;    let criticalHeight = 1200;    if (element.template.indexOf("amp_") !== -1) {        criticalWidth = 600;        criticalHeight = 19200;    }    $.fancyLog("-> Generating critical CSS: " + $.chalk.cyan(criticalSrc) + " -> " + $.chalk.magenta(criticalDest));    $.critical.generate({        src: criticalSrc,        dest: criticalDest,        inline: false,        ignore: [],        base: pkg.paths.dist.base,        css: [            pkg.paths.dist.css + pkg.vars.siteCssName,        ],        minify: true,        width: criticalWidth,        height: criticalHeight    }, (err, output) => {        if (err) {            $.fancyLog($.chalk.magenta(err));        }        callback();    }); }

// 크리티컬 CSS 태스크 
gulp.task("criticalcss", ["css"], (callback) => {    doSynchronousLoop(pkg.globs.critical, processCriticalCSS, () => {        // 모두 완료         callback();    }); });

// Run pa11y accessibility tests on each template
function processAccessibility(element, i, callback) {    const accessibilitySrc = pkg.urls.critical + element.url;    const cliReporter = require('./node_modules/pa11y/reporter/cli.js');    const options = {        log: cliReporter,        ignore:                [                    'notice',                    'warning'                ],        };    const test = $.pa11y(options);     $.fancyLog("-> Checking Accessibility for URL: " + $.chalk.cyan(accessibilitySrc));    test.run(accessibilitySrc, (error, results) => {        cliReporter.results(results, accessibilitySrc);        callback();    }); }

// accessibility task
gulp.task("a11y", (callback) => {    doSynchronousLoop(pkg.globs.critical, processAccessibility, () => {        // all done        callback();    }); });

// 한번에 하나씩 다운로드를 처리합니다 
function processDownload(element, i, callback) {    const downloadSrc = element.url;    const downloadDest = element.dest;     $.fancyLog("-> Downloading URL: " + $.chalk.cyan(downloadSrc) + " -> " + $.chalk.magenta(downloadDest));    $.download(downloadSrc)        .pipe(gulp.dest(downloadDest));    callback(); }

// 다운로드 태스크 
gulp.task("download", (callback) => {    doSynchronousLoop(pkg.globs.download, processDownload, () => {        // all done        callback();    }); });

// 패키지 변수
const pkg = require("./package.json"); 
// gulp
const gulp = require("gulp"); 
// devDependencies에 있는 모든 플러그인을 $ 변수에 로딩합니다
const $ = require("gulp-load-plugins")({    pattern: ["*"],    scope: ["devDependencies"] }); 
const onError = (err) => {    console.log(err); }; 
const banner = [    "/**",    " * @project        <%= pkg.name %>",    " * @author         <%= pkg.author %>",    " * @build          " + $.moment().format("llll") + " ET",    " * @release        " + $.gitRevSync.long() + " [" + $.gitRevSync.branch() + "]",    " * @copyright      Copyright (c) " + $.moment().format("YYYY") + ", <%= pkg.copyright %>",    " *",    " */",    ""
].join("\n"); 
// scss - paths를 포함한 build 폴더로 scss를 빌드하고 소스맵을 만듭니다 
gulp.task("scss", () => {    $.fancyLog("-> Compiling scss");    return gulp.src(pkg.paths.src.scss + pkg.vars.scssName)        .pipe($.plumber({errorHandler: onError}))        .pipe($.sourcemaps.init({loadMaps: true}))        .pipe($.sass({                includePaths: pkg.paths.scss            })            .on("error", $.sass.logError))        .pipe($.cached("sass_compile"))        .pipe($.autoprefixer())        .pipe($.sourcemaps.write("./"))        .pipe($.size({gzip: true, showFiles: true}))        .pipe(gulp.dest(pkg.paths.build.css)); }); 
// css 작업 - 배포용 CSS를 public css 폴더로 하나로 합치고 최소화하고 여기에 배너를 추가합니다 
gulp.task("css", ["scss"], () => {    $.fancyLog("-> Building css");    return gulp.src(pkg.globs.distCss)        .pipe($.plumber({errorHandler: onError}))        .pipe($.newer({dest: pkg.paths.dist.css + pkg.vars.siteCssName}))        .pipe($.print())        .pipe($.sourcemaps.init({loadMaps: true}))        .pipe($.concat(pkg.vars.siteCssName))        .pipe($.cssnano({            discardComments: {                removeAll: true            },            discardDuplicates: true,            discardEmpty: true,            minifyFontValues: true,            minifySelectors: true        }))        .pipe($.header(banner, {pkg: pkg}))        .pipe($.sourcemaps.write("./"))        .pipe($.size({gzip: true, showFiles: true}))        .pipe(gulp.dest(pkg.paths.dist.css))        .pipe($.filter("**/*.css"))        .pipe($.livereload()); }); 
// Prism js 작업 - prismjs(번역주: 소스코드 하이라이트) 자바스크립트와 컨피그 파일을 하나의 번들로 합칩니다 
gulp.task("prism-js", () => {    $.fancyLog("-> Building prism.min.js...");    return gulp.src(pkg.globs.prismJs)        .pipe($.plumber({errorHandler: onError}))        .pipe($.newer({dest: pkg.paths.build.js + "prism.min.js"}))        .pipe($.concat("prism.min.js"))        .pipe($.uglify())        .pipe($.size({gzip: true, showFiles: true}))        .pipe(gulp.dest(pkg.paths.build.js)); }); 
// 바벨 js 작업 - 자바스크립트를 빌드 폴더로 트랜스파일 합니다 
gulp.task("js-babel", () => {    $.fancyLog("-> Transpiling Javascript via Babel...");    return gulp.src(pkg.globs.babelJs)        .pipe($.plumber({errorHandler: onError}))        .pipe($.newer({dest: pkg.paths.build.js}))        .pipe($.babel())        .pipe($.size({gzip: true, showFiles: true}))        .pipe(gulp.dest(pkg.paths.build.js)); }); 
// 컴포넌트 - VueJS 컴포넌트인 .vue 파일 빌드 
gulp.task("components", () => {    $.fancyLog("-> Compiling Vue Components");    return gulp.src(pkg.globs.components)        .pipe($.plumber({errorHandler: onError}))        .pipe($.newer({dest: pkg.paths.build.js, ext: ".js"}))        .pipe($.vueify({}))        .pipe($.size({gzip: true, showFiles: true}))        .pipe(gulp.dest(pkg.paths.build.js)); }); 
// 인라인 js 작업 - 인라인 자바스크립트로 템플릿 경로의 _inlinejs 로 최소화 합니다 
gulp.task("js-inline", () => {    $.fancyLog("-> Copying inline js");    return gulp.src(pkg.globs.inlineJs)        .pipe($.plumber({errorHandler: onError}))        .pipe($.if(["*.js", "!*.min.js"],            $.newer({dest: pkg.paths.templates + "_inlinejs", ext: ".min.js"}),            $.newer({dest: pkg.paths.templates + "_inlinejs"})        ))        .pipe($.if(["*.js", "!*.min.js"],            $.uglify()        ))        .pipe($.if(["*.js", "!*.min.js"],            $.rename({suffix: ".min"})        ))        .pipe($.size({gzip: true, showFiles: true}))        .pipe(gulp.dest(pkg.paths.templates + "_inlinejs"))        .pipe($.filter("**/*.js"))        .pipe($.livereload()); }); 
// js 작업 - public js 폴더로 배포 자바스크립트를 최소화하고 여기에 배너를 추가합니다 
gulp.task("js", ["js-inline", "js-babel", "prism-js"], () => {    $.fancyLog("-> Building js");    return gulp.src(pkg.globs.distJs)        .pipe($.plumber({errorHandler: onError}))        .pipe($.if(["*.js", "!*.min.js"],            $.newer({dest: pkg.paths.dist.js, ext: ".min.js"}),            $.newer({dest: pkg.paths.dist.js})        ))        .pipe($.if(["*.js", "!*.min.js"],            $.uglify()        ))        .pipe($.if(["*.js", "!*.min.js"],            $.rename({suffix: ".min"})        ))        .pipe($.header(banner, {pkg: pkg}))        .pipe($.size({gzip: true, showFiles: true}))        .pipe(gulp.dest(pkg.paths.dist.js))        .pipe($.filter("**/*.js"))        .pipe($.livereload()); }); 
// 배열에 있는 데이터를 순차적으로 처리 (n번째 아이템 콜백이후 n+1번째 아이템으로 이동하면서)
function doSynchronousLoop(data, processData, done) {    if (data.length > 0) {        const loop = (data, i, processData, done) => {            processData(data[i], i, () => {                if (++i < data.length) {                    loop(data, i, processData, done);                } else {                    done();                }            });        };        loop(data, 0, processData, done);    } else {        done();    } }

// 한번에 하나씩 크리티컬 패스 CSS 처리 
function processCriticalCSS(element, i, callback) {    const criticalSrc = pkg.urls.critical + element.url;    const criticalDest = pkg.paths.templates + element.template + "_critical.min.css";     let criticalWidth = 1200;    let criticalHeight = 1200;    if (element.template.indexOf("amp_") !== -1) {        criticalWidth = 600;        criticalHeight = 19200;    }    $.fancyLog("-> Generating critical CSS: " + $.chalk.cyan(criticalSrc) + " -> " + $.chalk.magenta(criticalDest));    $.critical.generate({        src: criticalSrc,        dest: criticalDest,        inline: false,        ignore: [],        base: pkg.paths.dist.base,        css: [            pkg.paths.dist.css + pkg.vars.siteCssName,        ],        minify: true,        width: criticalWidth,        height: criticalHeight    }, (err, output) => {        if (err) {            $.fancyLog($.chalk.magenta(err));        }        callback();    }); }

// 크리티컬 css 태스크 
gulp.task("criticalcss", ["css"], (callback) => {    doSynchronousLoop(pkg.globs.critical, processCriticalCSS, () => {        // all done        callback();    }); }); 
// 한번에 하나씩 다운로드 처리 
function processDownload(element, i, callback) {    const downloadSrc = element.url;    const downloadDest = element.dest;     $.fancyLog("-> Downloading URL: " + $.chalk.cyan(downloadSrc) + " -> " + $.chalk.magenta(downloadDest));    $.download(downloadSrc)        .pipe(gulp.dest(downloadDest));    callback(); }

// 다운로드 태스크 
gulp.task("download", (callback) => {    doSynchronousLoop(pkg.globs.download, processDownload, () => {        // all done        callback();    }); }); 
// 각 템플릿에 pa11y 접근성 테스트 실행 
function processAccessibility(element, i, callback) {    const accessibilitySrc = pkg.urls.critical + element.url;    const cliReporter = require('./node_modules/pa11y/reporter/cli.js');    const options = {        log: cliReporter,        ignore:                [                    'notice',                    'warning'                ],        };    const test = $.pa11y(options);     $.fancyLog("-> Checking Accessibility for URL: " + $.chalk.cyan(accessibilitySrc));    test.run(accessibilitySrc, (error, results) => {        cliReporter.results(results, accessibilitySrc);        callback();    }); }

// 접근성 태스크 
gulp.task("a11y", (callback) => {    doSynchronousLoop(pkg.globs.critical, processAccessibility, () => {        // all done        callback();    }); }); 
// 파비콘 생서 태스크 
gulp.task("favicons-generate", () => {    $.fancyLog("-> Generating favicons");    return gulp.src(pkg.paths.favicon.src).pipe($.favicons({        appName: pkg.name,        appDescription: pkg.description,        developerName: pkg.author,        developerURL: pkg.urls.live,        background: "#FFFFFF",        path: pkg.paths.favicon.path,        url: pkg.site_url,        display: "standalone",        orientation: "portrait",        version: pkg.version,        logging: false,        online: false,        html: pkg.paths.build.html + "favicons.html",        replace: true,        icons: {            android: false, // 안드로이드 홈스크린 아이콘 생성. 불리언             appleIcon: true, // 애플 터치 아이콘 생성. 불리언             appleStartup: false, // 에플 시작 이미지 생성. 불리언            coast: true, // 오페라 Coast 아이콘 생성. 불리언            favicons: true, // 기본 파비콘 생성. 불리언            firefox: true, // 파이어폭스 운영체제 아이콘 생성. 불리언             opengraph: false, // 페이스북 오픈 그래프 이미지 생성. 불리언            twitter: false, // 트위터 써머리 카드 이미지 생성. 불리언             windows: true, // 윈도우즈 8 타이틀 아이콘 생성. 불리언             yandex: true // Yandex 브라우져 아이콘 생성. 불리언         }    })).pipe(gulp.dest(pkg.paths.favicon.dest)); }); 
// 파비콘 복사 태스크 
gulp.task("favicons", ["favicons-generate"], () => {    $.fancyLog("-> Copying favicon.ico");    return gulp.src(pkg.globs.siteIcon)        .pipe($.size({gzip: true, showFiles: true}))        .pipe(gulp.dest(pkg.paths.dist.base)); }); 
// imagemin 태스크 
gulp.task("imagemin", () => {    return gulp.src(pkg.paths.dist.img + "**/*.{png,jpg,jpeg,gif,svg}")        .pipe($.imagemin({            progressive: true,            interlaced: true,            optimizationLevel: 7,            svgoPlugins: [{removeViewBox: false}],            verbose: true,            use: []        }))        .pipe(gulp.dest(pkg.paths.dist.img)); }); 
// fontello 생성 태스크 
gulp.task("generate-fontello", () => {    return gulp.src(pkg.paths.src.fontello + "config.json")        .pipe($.fontello())        .pipe($.print())        .pipe(gulp.dest(pkg.paths.build.fontello)) }); 
// 서체 복사 태스크 
gulp.task("fonts", ["generate-fontello"], () => {    return gulp.src(pkg.globs.fonts)        .pipe(gulp.dest(pkg.paths.dist.fonts)); }); 
// 기본 테스크 
gulp.task("default", ["css", "js"], () => {    $.livereload.listen();    gulp.watch([pkg.paths.src.scss + "**/*.scss"], ["css"]);    gulp.watch([pkg.paths.src.css + "**/*.css"], ["css"]);    gulp.watch([pkg.paths.src.js + "**/*.js"], ["js"]);    gulp.watch([pkg.paths.templates + "**/*.{html,htm,twig}"], () => {        gulp.src(pkg.paths.templates)            .pipe($.plumber({errorHandler: onError}))            .pipe($.livereload());    }); }); 
// 프로덕션 빌드 
gulp.task("build", ["download", "default", "favicons", "imagemin", "fonts", "criticalcss"]);