{"id":13821961,"url":"https://github.com/mmistakes/jekyll-gulpified","last_synced_at":"2025-10-28T16:32:07.853Z","repository":{"id":66256864,"uuid":"66676469","full_name":"mmistakes/jekyll-gulpified","owner":"mmistakes","description":"Jekyll Gulpified. Optimize assets, fire up Browser Sync, deploy, and more.","archived":false,"fork":false,"pushed_at":"2016-09-14T23:30:56.000Z","size":63,"stargazers_count":22,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T17:01:55.234Z","etag":null,"topics":["gulp","jekyll"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":false,"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/mmistakes.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}},"created_at":"2016-08-26T20:12:54.000Z","updated_at":"2025-01-05T10:04:15.000Z","dependencies_parsed_at":"2023-02-20T20:01:09.156Z","dependency_job_id":null,"html_url":"https://github.com/mmistakes/jekyll-gulpified","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/mmistakes%2Fjekyll-gulpified","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmistakes%2Fjekyll-gulpified/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmistakes%2Fjekyll-gulpified/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmistakes%2Fjekyll-gulpified/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmistakes","download_url":"https://codeload.github.com/mmistakes/jekyll-gulpified/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238681858,"owners_count":19512854,"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":["gulp","jekyll"],"created_at":"2024-08-04T08:01:35.818Z","updated_at":"2025-10-28T16:32:07.467Z","avatar_url":"https://github.com/mmistakes.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Jekyll Gulpified\n\nLet Jekyll do what it does best and transform your content into HTML. Asset management is handled by Gulp:\n\n- build `style.css` (preprocess SCSS, add vendor prefixes, concatenate, minify, hash, and gzip)\n- build `critical.css`\n- build `index.js` (concatenate, minify, hash, and gzip)\n- optimize images\n- optimize and resize `feature` images\n- serve site with Browser Sync\n- deploy site to production via rsync\n\nDefault structure (modify paths in `gulpfile.js` and `_config.yml` if altered):\n\n```bash\njekyll-gulpified\n├── gulp                      # =\u003e gulp tasks\n├── src                       # =\u003e source Jekyll files and assets\n|  ├── _includes\n|  ├── _layouts\n|  ├── _posts\n|  ├── assets\n|  |  ├── fonts\n|  |  ├── images\n|  |  |   └── feature\n|  |  ├── javascript\n|  |  |   ├── plugins\n|  |  |   ├── vendor\n|  |  |   └── main.js\n|  |  ├── scss\n|  |  |   ├── vendor\n|  |  |   ├── ...\n|  |  |   └── style.scss\n├── .editorconfig\n├── .gitignore\n├── _config.build.yml\n├── _config.yml\n├── Gemfile\n├── gulpfile.js\n├── package.json\n├── rsync-credentials.json\n├── ...\n```\n\n## Getting Started\n\n### Dependencies:\n\n- **Ruby**: \u003e2.0 with Bundler \u003e1.10\n- **Node**: \u003e4.2\n- **Gulp**: \u003e4.0 install `gulp-cli`: `npm install gulp-cli -g`\n\n**Step 1:** Install [Bundler](http://bundler.io/), then run `bundle install`.\n\n**Step 2:** Install **GraphicsMagick**.\n\n### Ubuntu:\n\n```\napt-get install graphicsmagick\n```\n\n### Mac OS X (using Homebrew):\n\n```\nbrew install graphicsmagick\n```\n\n### Windows (XP, Vista, 7, 8, and 10) 32- or 64-bit:\n\nDecide upon [Q8 or Q16](http://www.graphicsmagick.org/INSTALL-windows.html#retrieve-install-package):\n\n\u003e A Q8 version is fine for processing typical photos intended for viewing on a computer screen. If you are dealing with film, scientific, or medical images, use ICC color profiles, or deal with images that have limited contrast, then the Q16 version is recommended.\n\n[Download](http://www.graphicsmagick.org/download.html/) and Install, be sure that \"Update executable search path\" is checked during installation.\n\n**Step 3.** Install [Node.js](https://nodejs.org/en/), then run `npm install`.\n\n**Step 4.** To start run `gulp`. A development version of the site should be generated and opened in a browser with Browser Sync at `http://localhost:4000`.\n\n## Usage\n\n### `gulp [--prod]`\n\nThis is the default command, and probably the one you'll use the most. This\ncommand will build your assets and site with development settings. You'll get\nsourcemaps, your drafts will be generated. As you are changing your posts, pages and assets they will\nautomatically update and inject into your browser via [BrowserSync][browsersync].\n\n\u003e `--prod`\n\nOnce you are done and want to verify that everything works with production\nsettings you add the flag `--prod` and your assets will be optimized. Your CSS,\nJS and HTML will be minified and gzipped, plus the CSS and JS will be cache\nbusted. The images will be compressed and Jekyll will generate a site with all\nyour posts and no drafts.\n\n### `gulp build [--prod]`\n\nThis command is identical to the normal `gulp [--prod]` however it will not\ncreate a BrowserSync session in your browser.\n\n### `gulp (build) [--prod]` main subtasks\n\n\u003e `gulp jekyll [--prod]`\n\nWithout production settings Jekyll will only create both future posts and drafts. \nWith `--prod` none of that is true and it will generate all your posts.\n\n\u003e `gulp styles|scripts [--prod]`\n\nBoth your CSS and JS will have sourcemaps generated for them under development\nsettings. Once you generate them with production settings sourcemap generation\nis disabled. Both will be minified, gzipped and cache busted with production\nsettings.\n\n\u003e `gulp images`\n\nOptimizes and caches your images. This is a set it and forget it command for the\nmost part.\n\n\u003e `gulp images`\n\nSimilar to the previous task but for `feature` images. Resizes each image into various\nsizes to be served responsively with `\u003cimg\u003e` `srcset` or `\u003cpicture\u003e` elements.\n\n\u003e `gulp html --prod`\n\n**Does nothing without `--prod`.** Minifies and gzips your HTML files.\n\n\u003e `gulp serve`\n\nIf you just want to watch your site you can run this command. If wanted you can\nalso edit the `serve` task to allow it to tunnel via [localtunnel][localtunnel]\nso people outside your local network can view it as well:\n\n```js\n    // tunnel: true,\n```\n\nYou can also change the behavior for how it opens the URL when you run `gulp\n[--prod]`, you can see the options [here][browsersync-open]:\n\n```js\n    // open: false,\n```\n\n#### `gulp deploy`\n\nWhen you're done developing and have built your site with either `gulp --prod`\nor `gulp build --prod` you can deploy your site to either Amazon S3, or with Rsync.\n\n\u003e Amazon S3 and Rsync\n\nIf you chose either of these two, you'll have a `[rsync/aws]-credentials.json`\nfile in your root folder that you have to fill out. It should be pretty self\nexplanatory, however, if you need any help with configuring it, you should check\nout either the [`gulp-awspublish`][awspublish] repo or [`gulp-rsync`][rsync]\nrepo for help.\n\n#### `gulp check`\n\nRuns `bundle exec jekyll doctor` to look for potential errors.\n\n#### `gulp clean`\n\nDeletes your assets from their `.tmp` directory as well as in `dist` and deletes\nany gzipped files. **NOTE:** Does not delete your images from `.tmp` to reduce\nthe time to build your site due to image optimizations.\n\n#### `gulp rebuild`\n\nOnly use this if you want to regenerate everything, this will delete everything\ngenerated. Images, assets, your Jekyll site. You really shouldn't need to do\nthis unless you have phantom image assets floating around.\n\n### Subtasks\n\nAll of the subtasks lives in their own files in the `gulp` directory and are\nnamed after what they do. You can edit or look at any of them to see how they\nactually work. They're all commented.\n\n## Frequently Asked Questions\n\n\u003e Inject more than one JavaScript file\n\nIf you want to split up your JavaScript files into say a `index.js` and a\n`vendor.js` file with files from [Bower][bower] you can do this quite easily. Create a\ncopy of the `scripts` gulp task and rename it to `scripts:vendor` and change the\n`gulp.src` files you need:\n\n```js\n  gulp.src([\n    'bower_components/somelibrary.js/dist/somelibrary.js',\n    'bower_components/otherthing.js/dist/otherthing.js'\n  ])\n```\n\nand then change `.pipe(concat('index.js'))` into\n`.pipe(concat('vendor.js'))`. Then you go to the bottom of the gulpfile and\nchange the `assets` task:\n\n```js\ngulp.task('assets', gulp.series(\n  gulp.series('clean:assets'),\n  gulp.parallel('styles', 'scripts:vendor', 'scripts', 'fonts', 'images')\n));\n```\n\nNotice the `scripts:vendor` task that has been added. Also be ware that things\nare injected in alphabetical order, so if you need your vendor scripts before\nthe `index.js` file you have to either rename the `index.js` file or rename the\n`vendor.js` file. When you now run `gulp` or `gulp build` it will create a\n`vendor.js` file and automatically inject it at the bottom of your HTML. When\nrunning with `--prod` it'll automatically optimize and such as well.\n\nFor more advanced uses, refer to the [`gulp-inject`][inject] documentation on\nhow to create individual inject tags and inject specific files into them.\n\n## License\n\nMIT © Sondre Nilsen (https://github.com/sondr3)\n\n[awspublish]: https://github.com/pgherveou/gulp-awspublish\n[browsersync]: https://github.com/shakyShane/browser-sync\n[browsersync-open]: https://browsersync.io/docs/options/#option-open\n[contribute]: https://github.com/sondr3/generator-jekyllized/blob/master/CONTRIBUTING.md\n[changelog]: https://github.com/sondr3/generator-jekyllized/blob/master/CHANGELOG.md\n[frequentlyasked]: https://github.com/sondr3/generator-jekyllized#frequently-asked-questions\n[gulp]: http://gulpjs.com/\n[gulpfile]: https://github.com/sondr3/generator-jekyllized/blob/master/generators/gulp/templates/gulpfile.js\n[inject]: https://github.com/klei/gulp-inject\n[jekyll-url]: http://jekyllrb.com/docs/github-pages/#project-page-url-structure\n[jekyll]: https://jekyllrb.com\n[libsass]: https://github.com/hcatlin/libsass\n[localtunnel]: http://localtunnel.me/\n[rsync]: https://github.com/jerrysu/gulp-rsync\n[yeoman]: http://yeoman.io\n[npm-image]: https://badge.fury.io/js/generator-jekyllized.svg\n[npm-url]: https://npmjs.org/package/generator-jekyllized\n[travis-image]: https://travis-ci.org/sondr3/generator-jekyllized.svg?branch=master\n[travis-url]: https://travis-ci.org/sondr3/generator-jekyllized\n[coveralls-image]: https://coveralls.io/repos/sondr3/generator-jekyllized/badge.svg\n[coveralls-url]: https://coveralls.io/r/sondr3/generator-jekyllized\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmistakes%2Fjekyll-gulpified","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmistakes%2Fjekyll-gulpified","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmistakes%2Fjekyll-gulpified/lists"}