{"id":13494137,"url":"https://github.com/kogakure/gulp-tutorial","last_synced_at":"2025-04-05T15:07:35.974Z","repository":{"id":22202418,"uuid":"25534912","full_name":"kogakure/gulp-tutorial","owner":"kogakure","description":"Code examples for my Gulp.js tutorial series.","archived":false,"fork":false,"pushed_at":"2023-08-05T07:57:27.000Z","size":1022,"stargazers_count":386,"open_issues_count":14,"forks_count":73,"subscribers_count":31,"default_branch":"master","last_synced_at":"2024-10-30T02:58:36.340Z","etag":null,"topics":["base64","browserify","browsersync","compass","css","fontcustom","gulp","gzip","icon","icon-webfonts","javascript","jekyll","learning","linting","postcss","revision","rsync","sass","tutorial","webp"],"latest_commit_sha":null,"homepage":"https://www.stefanimhoff.de/gulp-tutorial-1-intro-setup/","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/kogakure.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}},"created_at":"2014-10-21T17:07:37.000Z","updated_at":"2024-10-02T03:45:27.000Z","dependencies_parsed_at":"2024-07-31T22:08:36.701Z","dependency_job_id":null,"html_url":"https://github.com/kogakure/gulp-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kogakure%2Fgulp-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kogakure%2Fgulp-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kogakure%2Fgulp-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kogakure%2Fgulp-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kogakure","download_url":"https://codeload.github.com/kogakure/gulp-tutorial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247353745,"owners_count":20925329,"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":["base64","browserify","browsersync","compass","css","fontcustom","gulp","gzip","icon","icon-webfonts","javascript","jekyll","learning","linting","postcss","revision","rsync","sass","tutorial","webp"],"created_at":"2024-07-31T19:01:22.234Z","updated_at":"2025-04-05T15:07:35.957Z","avatar_url":"https://github.com/kogakure.png","language":"JavaScript","readme":"![GitHub Forks](https://img.shields.io/github/forks/kogakure/gulp-tutorial.svg?style=social\u0026label=Fork)\n![GitHub Stars](https://img.shields.io/github/stars/kogakure/gulp-tutorial.svg?style=social\u0026label=Star)\n\n# Introduction to Gulp.js\n\n![Gulp Series Cover](./preview.jpg)\n\n## Tutorial\n\nThese are the files for my series *Introduction to Gulp.js* published on my website [stefanimhoff.de](http://stefanimhoff.de/).\n\n## Tutorial Overview\n\n1. [Intro and Setup](http://stefanimhoff.de/gulp-tutorial-1-intro-setup)\n2. [Server with BrowserSync and Configuration](http://stefanimhoff.de/gulp-tutorial-2-development-server-browsersync-configuration/)\n3. [Build, Clean and Jekyll](http://stefanimhoff.de/gulp-tutorial-3-build-clean-jekyll/)\n4. [Creating CSS with Sass (and Compass)](http://stefanimhoff.de/gulp-tutorial-4-css-generation-sass/)\n5. [Bundling JavaScript with Browserify](http://stefanimhoff.de/gulp-tutorial-5-javascripts-browserify/)\n6. [Images and Vector Fonts](http://stefanimhoff.de/gulp-tutorial-6-images-vector-fonts/)\n7. [Base64 Encoded Images](http://stefanimhoff.de/gulp-tutorial-7-base64/)\n8. [Watch for Changes](http://stefanimhoff.de/gulp-tutorial-8-watch/)\n9. [Checking the Syntax of SCSS and JavaScript](http://stefanimhoff.de/gulp-tutorial-9-linting-scss-and-javascript/)\n10. [Generating CSS Image Sprites](http://stefanimhoff.de/gulp-tutorial-10-generating-sprites/)\n11. [Production Build, Server and Jekyll](http://stefanimhoff.de/gulp-tutorial-11-production-build-server-and-jekyll/)\n12. [Optimize CSS, JavaScript, Images and HTML](http://stefanimhoff.de/gulp-tutorial-12-optimize-css-javascript-images-and-html/)\n13. [Revisioning](http://stefanimhoff.de/gulp-tutorial-13-revisioning/)\n14. [Deploying the Website with Rsync](http://stefanimhoff.de/gulp-tutorial-14-deploying-the-website/)\n15. [Performance Improvements with WebP and Gzip](http://stefanimhoff.de/gulp-tutorial-15-performance-improvements-webp-gzip/)\n16. [PostCSS](http://stefanimhoff.de/gulp-tutorial-16-postcss/)\n\n## Preparation\n\nInstall `nvm` and `node`:\n\n```sh\n$ git clone https://github.com/creationix/nvm.git ~/.nvm\n$ cd ~/.nvm\n$ git checkout `git describe --abbrev=0 --tags`\n```\n\n```sh\n$ export NVM_DIR=\"$HOME/.nvm/\"\n$ [ -s \"$NVM_DIR/nvm.sh\" ] \u0026\u0026 . \"$NVM_DIR/nvm.sh\"  # This loads nvm\n```\n\n```sh\nnvm install 6.3.1\n```\n\nIf you like install `yarn`, I provide a `yarn.lock` file:\n\n```sh\nbrew install yarn\n```\n\nInstall `bundler`:\n\n```sh\n$ gem install bundler\n```\n\nInstall `bower`:\n\n```sh\n$ npm install -g bower\n```\n\n## Installation\n\nClone the repository on your computer and change into the projects folder. Run:\n\n```sh\n$ bundle\n$ bower install\n$ npm install\n```\n\nTo install  [Fontcustom](http://fontcustom.com/) you should have [Homebrew](http://brew.sh/) installed or use another package management tool to install the dependencies:\n\n```sh\n$ brew install fontforge --with-python\n$ brew install eot-utils\n```\n\n## Setup\n\nOpen `gulp/config.js` and change settings if needed. Only the `rsync` settings need to be adjusted. Change the `destination` to a path on your webserver and change `hostname` and `username`.\n\n## Running Gulp.js\n\nThree tasks are available (`npm` works, too):\n\n```sh\n$ yarn start\n$ yarn run publish\n$ yarn run deploy\n```\n\n- Running `yarn start` will start a development server, build assets and the Jekyll site and start a `watch` task.\n- Running `yarn run publish` will copy and optimize assets and run a production build of Jekyll.\n- Running `yarn run deploy` will copy the generated files with Rsync to your server.\n\n## Sass, Compass or PostCSS\n\nThe current version of this tutorial uses PostCSS. If you would like to use Sass (or Compass), you can still easily access the old code in the branch `ruby-sass`. The new code at the time I wrote the article is available in the branch `postcss`. Additionally I merge it into master and will process with PostCSS in my tutorial.\n\n## Credits\n\nThis tutorial includes some files for demonstation purposes:\n\n- The [Gulp.js logo](http://gulpjs.com/) used as image example\n- The pattern [Light gray](http://subtlepatterns.com/light-fray/) by [Brenda Lay](http://poisones.tumblr.com/), published on [Subtle Patterns](http://subtlepatterns.com/)\n- The SVGs and PNGs are take from the [IcoMoon Icon Pack](https://icomoon.io/#icons-icomoon).\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkogakure%2Fgulp-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkogakure%2Fgulp-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkogakure%2Fgulp-tutorial/lists"}