{"id":18842667,"url":"https://github.com/twitcher07/tyrelwitcher","last_synced_at":"2025-10-30T14:06:42.679Z","repository":{"id":175337735,"uuid":"267467004","full_name":"twitcher07/tyrelwitcher","owner":"twitcher07","description":"personal website at tyrelwitcher.com","archived":false,"fork":false,"pushed_at":"2024-08-31T13:27:11.000Z","size":451,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-22T22:41:02.919Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/twitcher07.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-05-28T01:45:41.000Z","updated_at":"2020-05-29T05:59:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"3318e24f-6447-447e-8a2c-4958ee33aa33","html_url":"https://github.com/twitcher07/tyrelwitcher","commit_stats":null,"previous_names":["twitcher07/tyrelwitcher"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/twitcher07/tyrelwitcher","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twitcher07%2Ftyrelwitcher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twitcher07%2Ftyrelwitcher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twitcher07%2Ftyrelwitcher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twitcher07%2Ftyrelwitcher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twitcher07","download_url":"https://codeload.github.com/twitcher07/tyrelwitcher/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twitcher07%2Ftyrelwitcher/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281818153,"owners_count":26566884,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-30T02:00:06.501Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T02:55:25.552Z","updated_at":"2025-10-30T14:06:42.672Z","avatar_url":"https://github.com/twitcher07.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Welcome to the Gulp Starter Kit.\n# Table of Contents\n1. [Requirements](#installation-requirements)\n2. [Build Tools \u0026 Assets](#build-tools-\u0026-assets)\n3. [Getting Started](#getting-started)\n4. [Build Commands](#build-commands)\n\n# Installation requirements\n* Node.js (at least version 10)\n* NPM\n* Gulp.js version 4\n\n# Build Tools \u0026 Frontend Assets\n## Tools for workflow:\n* Gulp 4 - [Documentation](https://gulpjs.com/docs/en/getting-started/quick-start)\n* Sass Compiling (using gulp-sass) - [Documentation](https://github.com/dlmanning/gulp-sass)\n* PostCSS (using gulp-postcss) - [Documentation](https://github.com/postcss/gulp-postcss)\n* Babel.js - [Documentation](https://babeljs.io/docs/en/)\n* ESlint (using gulp-eslint) - [Documentation](https://github.com/adametry/gulp-eslint#readme)\n* Webpack 4 (for javascript dependencies) - [Documentation](https://v4.webpack.js.org/concepts/)\n* BrowserSync - [Documentation](https://www.browsersync.io/docs)\n* Minification of CSS and JS for production use (using [clean-css](https://github.com/jakubpawlowicz/clean-css) and Webpack's built in optimization of ['production' mode](https://v4.webpack.js.org/configuration/mode/))\n* Favicon Generation (using gulp-real-favicon) - [Documentation](https://github.com/RealFaviconGenerator/gulp-real-favicon)\n\n## Frontend assets:\n* Tailwind CSS - [Documentation](https://tailwindcss.com/docs/installation)\n\n# Getting Started\n## Customizing output path\nChange `\"paths\": { \"distFolder\": \"dist/\" }` in `package.json` to be where you want to output the frontend files. If you leave everything as is, it will create this folder structure **inside** the `distFolder`: \n```\n/dist\n  |\n  |- /images\n  |- /fonts\n  |- /css\n  |- /js\n```\nIf more control over the folder structure is needed inside `gulpfile.js` you can edit:\n```javascript\ndist_css = path.join(dist_folder, '/css'),\ndist_js = path.join(dist_folder, '/js'),\ndist_img = path.join(dist_folder, '/images'),\ndist_font = path.join(dist_folder, '/fonts'),\ndist_html = path.join(dist_folder, '/**/*.{twig,html}'),\n```\n\n## Injecting links to CSS and Javascript from gulp build\nFirst, make sure `dist_html` variable inside `gulpfile.js` points to the production path to either your html files if it's a static site, or points to the template files (php, twig, mustache, etc.).\n\nThen place these html comments inside the template or html files:\n\nFor CSS:\n```\n\u003c!-- inject:css --\u003e\n\u003c!-- endinject --\u003e\n```\n\nFor Javascript:\n```\n\u003c!-- inject:js --\u003e\n\u003c!-- endinject --\u003e\n```\n## Setting up PurgeCSS \nMake sure variable `templates_purgeCSS` in `gulpfile.js` contains globs to the html files or template files of your site. PurgeCSS will parse these files for the CSS selectors used and then extract them for the production version of the CSS file.\n \n\n## Favicons\nOverwrite `src/favicon260x260.png` or change the variable `const favicon = path.join(src_folder, 'favicon260x260.png')` to point to the master image for generating the favicons. Master favicon image should be at least 260x260.\n\nChange these variables in `gulpfile.js` to match your site's design.\n```javascript\nconst theme_color = '#ffffff';\nconst favicon_bg = '#da532c';\n```\n\n# Build Commands\n## `gulp serve`\nProbably the go-to command for development.\n\nThis compiles sass (and runs any postcss plugins), lints javascript, builds webpack, optimizes images, copies fonts, injects the link to CSS and javascript sources, and outputs all frontend files to the `distFolder`. \n\nAlso, it spins up a static server using browsersync. Frontend of the site can be accessed at http:localhost:3000.\n\nThen it watches these files for any changes:\n```\nsrc/**/*.html\nsrc/css/**/*.scss\nsrc/js/**/*.js\nsrc/images/**/*.+(png|jpg|jpeg|gif|svg|ico)\nsrc/fonts/**/*.{eot,svg,ttf,woff,woff2}\n```\n\nand then it will re-run commands depending on what changed in order to compile sass, build webpack, or copy over file changes.\n\n## `npm run serve:dist`\nThis is the production version of `gulp serve`. It creates the production version of CSS and Javascript files by:\n* Minifies CSS (clean-css) and JS (Webpack Terser Plugin)\n* Omits source maps for CSS and JS\n* Uses [purgeCSS](https://purgecss.com/) to remove unused CSS declarations. Which helps to drastically reduce the file size when using frameworks like tailwindCSS or bootstrap.\n\n## `npm run build`\nBuilds out production version of frontend code.\n\n## `gulp generate-favicon`\nThis uses gulp-real-favicon to generate the favicons using a master favicon image (`src/favicon260x260.png` is the default one).\n\nThese are the files generated out of the box:\n```bash\nandroid-chrome-192x192.png\nandroid-chrome-256x256.png\napple-touch-icon.png\nbrowserconfig.xml\nfavicon-16x16.png\nfavicon-32x32.png\nfavicon.ico\nhtml_code.html ## contains the html that should be added to the head of your site\nmstile-144x144.png\nmstile-150x150.png\nmstile-310x150.png\nmstile-310x310.png\nmstile-70x70.png\nsite.webmanifest ## customization of manifest items can be done inside gulpfile.js\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwitcher07%2Ftyrelwitcher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwitcher07%2Ftyrelwitcher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwitcher07%2Ftyrelwitcher/lists"}