{"id":14967547,"url":"https://github.com/jr-cologne/gulp-starter-kit","last_synced_at":"2025-04-10T04:56:07.467Z","repository":{"id":43800875,"uuid":"137639919","full_name":"jr-cologne/gulp-starter-kit","owner":"jr-cologne","description":"A simple Gulp 4 Starter Kit for modern web development.","archived":false,"fork":false,"pushed_at":"2023-01-06T01:34:17.000Z","size":4184,"stargazers_count":167,"open_issues_count":19,"forks_count":39,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-03T03:11:14.753Z","etag":null,"topics":["autoprefixer","babel","browser-sync","es6-modules","gulp","gulp-starter-kit","imagemin","less","modern-web-dev","pug","sass","scss","sourcemaps","stylus","webpack-stream"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@jr-cologne/create-gulp-starter-kit","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jr-cologne.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-17T08:29:30.000Z","updated_at":"2024-11-19T01:25:06.000Z","dependencies_parsed_at":"2023-02-05T01:32:04.758Z","dependency_job_id":null,"html_url":"https://github.com/jr-cologne/gulp-starter-kit","commit_stats":null,"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jr-cologne%2Fgulp-starter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jr-cologne%2Fgulp-starter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jr-cologne%2Fgulp-starter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jr-cologne%2Fgulp-starter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jr-cologne","download_url":"https://codeload.github.com/jr-cologne/gulp-starter-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248161261,"owners_count":21057554,"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","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":["autoprefixer","babel","browser-sync","es6-modules","gulp","gulp-starter-kit","imagemin","less","modern-web-dev","pug","sass","scss","sourcemaps","stylus","webpack-stream"],"created_at":"2024-09-24T13:38:14.615Z","updated_at":"2025-04-10T04:56:07.442Z","avatar_url":"https://github.com/jr-cologne.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Gulp Starter Kit\n[![npm](https://img.shields.io/npm/v/@jr-cologne/create-gulp-starter-kit.svg)](https://www.npmjs.com/package/@jr-cologne/create-gulp-starter-kit)\n\n\u003e A simple Gulp 4 Starter Kit for modern web development.\n\n## Features / Use Cases\nThis Gulp Starter Kit provides a simple way of setting up a modern web development environment.\nHere is a list of the current features:\n\n- Copy HTML files from `src` to `dist` directory\n- Compile Pug template files (`.pug`) from `src` to HTML files and put them inside `dist` directory\n- Compile CSS preprocessor code (Sass/SCSS, Less, Stylus) to CSS\n- Autoprefix and minify CSS and put it inside `dist` directory\n- Compile ES6+ to ES5, concatenate JS files and minify code\n- Compress and copy images into `dist` directory\n- Copy dependencies specified in `package.json` from `src/node_modules` directory into `node_modules` folder inside `dist` directory\n- Import dependencies into your application with ES6 modules\n- Spin up local dev server at `http://localhost:3000` including auto-reloading\n\n## Requirements\nThis should be installed on your computer in order to get up and running:\n\n- [Node.js](https://nodejs.org/en/) (Required node version is \u003e= 10.0)\n- [Gulp 4](https://gulpjs.com/)\n\n## Dependencies\nThese [npm](https://www.npmjs.com/) packages are used in the Gulp Starter Kit:\n\n- [@babel/core](https://www.npmjs.com/package/@babel/core)\n- [@babel/preset-env](https://www.npmjs.com/package/@babel/preset-env)\n- [browser-sync](https://www.npmjs.com/package/browser-sync)\n- [del](https://www.npmjs.com/package/del)\n- [gulp](https://www.npmjs.com/package/gulp)\n- [gulp-autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer)\n- [gulp-babel](https://www.npmjs.com/package/gulp-babel)\n- [gulp-concat](https://www.npmjs.com/package/gulp-concat)\n- [gulp-dependents](https://www.npmjs.com/package/gulp-dependents)\n- [gulp-clean-css](https://www.npmjs.com/package/gulp-clean-css)\n- [gulp-plumber](https://www.npmjs.com/package/gulp-plumber)\n- [gulp-sass](https://www.npmjs.com/package/gulp-sass)\n- [gulp-sourcemaps](https://www.npmjs.com/package/gulp-sourcemaps)\n- [gulp-uglify](https://www.npmjs.com/package/gulp-uglify)\n- [gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin)\n- [webpack-stream](https://www.npmjs.com/package/webpack-stream)\n- [gulp-pug](https://www.npmjs.com/package/gulp-pug)\n- [gulp-less](https://www.npmjs.com/package/gulp-less)\n- [gulp-stylus](https://www.npmjs.com/package/gulp-stylus)\n\nFor more information, take a look at the [package.json](package.json) file or visit the linked npm package sites.\n\n## Getting Started\nIn order to get started, make sure you are meeting all requirements listed above.\nThen, just go ahead and download the Gulp Starter Kit. For this, you can choose between the following options:\n\n### `npm init`\nThe recommended way of downloading the Gulp Starter Kit uses the command `npm init` and the [`create-gulp-starter-kit` npm package](https://www.npmjs.com/package/@jr-cologne/create-gulp-starter-kit) as the initializer.\n\nFor this, just follow these steps:\n\n1. Execute `npm init @jr-cologne/gulp-starter-kit your-project-name`. This creates a folder called `your-project-name` (change that to your project name) at the current location where your terminal / command prompt is pointing to. Moreover, this initializes your project and installs all dependencies.\n2. Change your working directory to your project folder by executing `cd your-project-name`.\n3. Spin up your web development environment with the command `npm start`.\n4. Start coding!\n\nIn case you are lazy, just use this command:\n\n```bash\nnpm init @jr-cologne/gulp-starter-kit your-project-name \u0026\u0026 cd your-project-name \u0026\u0026 npm start\n```\n\n### `git clone`\nThe other way of downloading the Gulp Starter Kit is by cloning this Git repository. Before executing any commands, make sure you have [Git](https://git-scm.com/) installed on your computer.\n\nThen, follow these instructions:\n\n1. Execute `git clone https://github.com/jr-cologne/gulp-starter-kit.git your-project-name`. This creates a folder called `your-project-name` (change that to your project name) at the current location where your terminal / command prompt is pointing to.\n2. Change your working directory to your project folder by executing `cd your-project-name`.\n3. Install all dependencies by executing `npm install`.\n4. Spin up your web development environment with the command `npm start`.\n5. Start coding!\n\nIf you are lazy, just do everything at once:\n\n```bash\ngit clone https://github.com/jr-cologne/gulp-starter-kit.git your-project-name \u0026\u0026 cd your-project-name \u0026\u0026 npm install \u0026\u0026 npm start\n```\n\n## Usage / FAQ\n### How to install the Gulp Starter Kit into the current working directory?\nYou can install the Gulp Starter Kit into the current working directory by appending `--current-dir` to the end of the `npm init` command.\n\nExample:\n```bash\nnpm init @jr-cologne/gulp-starter-kit your-project-name --current-dir\n```\n\n### What kinds of build scripts does the Gulp Starter Kit offer?\nThe Gulp Starter Kit offers two different build scripts:\n\n1. `npm run build`: This is used to build all files and run all tasks without serving a development server and watching for changes.\n2. `npm start`: This is the normal development script used to build all files and run all tasks, but also to serve a development server and watch for changes.\n\n### How can I use another CSS preprocessor than Sass?\nIn case you prefer to use one of the other supported CSS preprocessors over Sass, you can simply create a new directory `src/assets/css-processor-name` which is where all your CSS preprocessor files have to be placed.\nAfter you have moved all your code to the new folder, just make sure to delete the `sass` directory and everything should work as expected.\n\nHere's a list of the currently supported CSS preprocessors and the corresponding directory names:\n\n- Sass (`src/assets/sass`)\n- SCSS (`src/assets/scss`)\n- Less (`src/assets/less`)\n- Stylus (`src/assets/stylus`)\n\n### How can I specify for which browsers CSS code should be autoprefixed?\nThe recommended way of specifying which browsers should be targeted by the CSS autoprefixer is to add a `browserslist` key to `package.json`:\n\n```json\n{\n  \"browserslist\": [\n    \"last 3 versions\",\n    \"\u003e 0.5%\"\n  ]\n}\n```\n\nYou can find [more information on that topic](https://github.com/postcss/autoprefixer#browsers) in the README file of the employed [PostCSS plugin](https://github.com/postcss/autoprefixer).\n\n### What types of images are supported?\nThe following types of images are currently supported:\n\n- PNG\n- JPG / JPEG\n- GIF\n- SVG\n- ICO (not compressed)\n\n### How can I specify dependencies which are then copied to the `dist` folder?\nYou don't need to specify your dependencies anywhere else than in your `package.json` file.\nJust install your dependencies via npm and all your dependencies get automatically loaded and copied into the `dist` folder.\n\n### How can I load dependencies inside my application?\nES6 modules are supported by this Gulp Starter Kit.\nJust install your dependencies and import them like so:\n\n```js\nimport axios from 'axios';\n```\n\n## Contributing\nFeel free to contribute to this project!\nAny kinds of contributions are highly appreciated!\n\nPlease make sure to **follow the process below** in order to contribute to this project:\n1. **Open an Issue** to describe what you are about to do. You should make sure to get feedback as early as possile to ensure your work does not end up as waisted time.\n2. **Fork this repository** by clicking the fork button at the top of this page.\n3. Clone your newly created fork (`git clone https://github.com/your-github-username/gulp-starter-kit.git`).\n4. Make your changes and commit them to your forked repository.\n6. Once finished, **open a detailed Pull Request** describing your changes.\n7. Wait for your PR to be accepted and merged.\n\n## Versioning\nThis project uses the rules of semantic versioning. For more information, visit [semver.org](https://semver.org/).\n\n## License\nThis project is licensed under the [MIT License](https://github.com/jr-cologne/gulp-starter-kit/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjr-cologne%2Fgulp-starter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjr-cologne%2Fgulp-starter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjr-cologne%2Fgulp-starter-kit/lists"}