{"id":18191983,"url":"https://github.com/lukeed/fannypack","last_synced_at":"2025-04-02T07:31:26.499Z","repository":{"id":66007796,"uuid":"44721408","full_name":"lukeed/fannypack","owner":"lukeed","description":"The tool belt for front-end developers","archived":false,"fork":false,"pushed_at":"2016-01-21T07:00:26.000Z","size":80,"stargazers_count":28,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-16T16:01:52.982Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lukeed.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2015-10-22T04:07:14.000Z","updated_at":"2022-01-12T09:17:53.000Z","dependencies_parsed_at":"2023-02-28T23:30:24.913Z","dependency_job_id":null,"html_url":"https://github.com/lukeed/fannypack","commit_stats":{"total_commits":76,"total_committers":1,"mean_commits":76.0,"dds":0.0,"last_synced_commit":"1f361ad106e62beb1f355e79c5a8617ac79178b2"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukeed%2Ffannypack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukeed%2Ffannypack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukeed%2Ffannypack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukeed%2Ffannypack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukeed","download_url":"https://codeload.github.com/lukeed/fannypack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246746932,"owners_count":20827061,"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":[],"created_at":"2024-11-03T06:03:30.860Z","updated_at":"2025-04-02T07:31:21.489Z","avatar_url":"https://github.com/lukeed.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n![Fannypack](fannypack.jpg)\n\n# Fannypack\n\u003e The tool belt for front-end developers.\n\nFannypack is a lean, lightning-fast build system that suits any application. \n\nIt comes packaged with several common CSS and JavaScript pre-processors. It's also extremely simple to add, customize, or override any task or setting. This makes Fannypack a preferred choice for both beginner and advanced front-end developers.\n\n- [Features](#features)\n- [Planned Features](#planned-features)\n- [Installation](#installation)\n  - [Node](#nodejs)\n  - [Getting Tools](#getting-tools)\n  - [Script Commands](#script-commands)\n- [Usage](#usage)\n  - [Basic](#basics)\n  - [Importing Tasks](#importing-tasks)\n  - [Configuration](#configuration)\n  - [Development](#development)\n  - [Production](#production)\n  - [Cache-Busting](#cache-busting)\n  - [Deployment](#deployment)\n  - [Testing](#testing)\n- [Extensions](#extensions)\n  - [Creating Custom Tasks](#creating-custom-tasks)\n  - [Overwriting Tasks](#overwriting-tasks)\n  - [Extending Tasks](#extending-tasks)\n  - [Publishing Tasks](#publishing-tasks)\n- [Changelog](https://github.com/lukeed/fannypack/blob/master/CHANGELOG.md)\n\n**Fannypack Goodies:**\n- [Starter Kit](https://github.com/lukeed/fannypack-starter-html)\n- [Browse Plugins](https://www.npmjs.com/search?q=fannypack)\n\n\n## Features\n- **SASS:**\n  - Indented, SCSS, or both\n  - Libsass (node-sass) for super fast compiles\n  - CSS Autoprefixer\n- **BrowserSync:**\n  - Immediately \u0026 Automatically re-compiles files and refreshes your browser window(s).\n  - Allows you to connect \u0026 test multiple devices at once\n  - ([Learn More](http://www.browsersync.io/))\n- **ES6/ES2015 Support:**\n  - Supports ES6 Modules (via [Babel](http://babeljs.io/) and [Webpack](http://webpack.github.io/))\n  - Multiple bundles\n  - Shared code extraction\n  - Source Mapping\n- **HTML Pre-Processor**:\n  - Static templating with [Nunjucks](https://mozilla.github.io/nunjucks/) and [gulp-data](https://github.com/colynb/gulp-data)\n- **Concatenation:**\n  - Combine multiple files into a new output file\n- **Development Mode:**\n  - File Watching and Live Reloading with [BrowserSync](http://www.browsersync.io/)\n  - Source Mapping\n- **Production Builds:**\n  - JavaScript is uglified and minified\n  - CSS and Images are minified\n  - **Cache Busting:** Generate a `rev-manifest.json` file, append unique hashes to filenames, and automatically update all original filename references.\n  - File size reporting\n  - Local production sever for testing\n- **Testing:**\n  - JS test examples with Karma, Mocha, Chai, Sinon\n  - Travis CI integration\n- **Deployment Support:**\n  - Wrap custom deploy logic into an easy-to-use task\n\n## Planned Features\n\nThese are [Fannypack plugins](https://www.npmjs.com/search?q=fannypack) that are planned and on their way soon!\n\n- [ ] Coffeescript\n- [ ] PHP TDD Test Runner + Watcher\n- [x] [Angular TemplateCache](https://www.npmjs.com/package/fannypack-angular-templatecache)\n- [ ] React JSX Compiler\n- [x] [Stylus](https://www.npmjs.com/package/fannypack-stylus)\n- [x] [LESS](https://www.npmjs.com/package/fannypack-less)\n- [x] [Riot JS Tags](https://www.npmjs.com/package/fannypack-riot-tags)\n- [x] [Image Minification](https://www.npmjs.com/package/fannypack-images)\n- [x] [Generate an IconFont](https://www.npmjs.com/package/fannypack-iconfont) from multiple SVG files\n- [x] [Generate a single SVG sprite (compressed)](https://www.npmjs.com/package/fannypack-svgsprite) from multiple SVG files\n\n\n## Installation\n### Node.js\nBefore installing Fannypack, you first must ensure that Node.js is installed on your machine.\n\n```\nnode -v\n```\n\nMake sure Node 0.12.x is installed. I recommend using [NVM](https://github.com/creationix/nvm) to manage versions.\n\nYou can easily install Node by visiting [their download page](http://nodejs.org/download/). Don't worry, it's quick and easy!\n\n### Getting Tools\nWith Node installed, you can add Fannypack and Gulp to your `package.json` file, located in your project's root directory.\n```bash\nnpm install fannypack gulp --save-dev\n```\n\nOR --- If you do not have a `package.json` file, you can [run a NPM command](https://docs.npmjs.com/cli/init) or create an empty file with the following content:\n```json\n{\n  \"private\": true,\n  \"devDependencies\": {\n    \"gulp\": \"^3.9.0\",\n    \"fannypack\": \"^1.0.0\"\n  }\n}\n```\nThen you must install the tools.\n```bash\ncd path/to/project/root\nnpm install\n```\n\n### Script Commands\nThis step is optional, but **strongly recommended**.\n\nNPM can run custom commands for you, making it much simpler to chain a series of other commands commands together. In effect, this makes you have to worry about less.\n\nIf you'd like to do less (c'mon!), paste the following block into your `package.json` file:\n```javascript\n\"scripts\": {\n  \"gulp\": \"gulp\",\n  \"deploy\": \"gulp deploy\",\n  \"production\": \"gulp build:production\",\n  \"version\": \"gulp rev uglify\",\n  \"development\": \"gulp\",\n  \"watch\": \"gulp webpack:watch watch\",\n  \"karma\": \"./node_modules/fannypack/node_modules/.bin/karma\",\n  \"tests\": \"npm run production \u0026\u0026 npm run karma start --single-run\"\n}\n```\n\nYou may now run commands such as:\n`npm run gulp`, `npm run production`, `npm run watch`, etc.\n\nLost? View the [example package.json file](https://github.com/lukeed/fannypack/blob/master/example/package.json)\n\n## Usage\nNow that Fannypack has been installed, you'll be compiling, concatenating, and minifying in no time! The `gulpfile.js` file in your project's root directory will contain all your tasks and configuration.\n\n### Basics\nIn order to start using Fannypack, your `gulpfile.js` needs to include this code at minimum. This does not include any configuring, therefore will assume all defaults.\n\n```javascript\nvar Fannypack = require('fannypack')\nFannypack.init()\n```\n\n### Importing Tasks\nSometimes, you'll want to include extra Gulp tasks to Fannypack. Whether you've [created your own](#extensions) or [downloaded](https://www.npmjs.com/search?q=fannypack) a plugin, you can import it without a fuss!\n\n```javascript\n// gulpfile.js\n\nvar Fannypack = require('fannypack')\n\n// Import plugins here:\nrequire('fannypack-less')\nrequire('./my-custom-task')\n\nFannypack.init()\n```\n\n### Configuration\nOf course, the defaults often don't fit your project structure. You may modify any task as desired, turn it off entirely, or add custom tasks' values!\n\n***Note:*** *It's not always necessary to turn off unused tasks. Nothing will happen by default if source files can't found. However, there may be times that you don't want a certain task to run; e.g. `browserSync` or `imagemin`.*\n\n```javascript\n// gulpfile.js\n\nvar Fannypack = require('fannypack')\n\n// Import plugins here:\nrequire('fannypack-less')\n\n// Begin Customizing\nFannypack.Config.root = {\n  src: './custom/src',\n  dest: './custom/dest'\n}\n\n// All tasks' 'src' are relative to Config.root.src\nFannypack.Config.sass.src = 'styles' // =\u003e './custom/src/styles'\n\n// All tasks' 'dest' are relative to Config.root.dest\nFannypack.Config.sass.dest = 'assets/css' // =\u003e './custom/dest/assets/css'\n\n// All tasks are watched by default\nFannypack.Config.images.watchTask = false\n\n// Some tasks may require additional fields\nFannypack.Config.js.entries = {\n  // rename 'index.js' bundle to 'app.js'\n  app: ['./index.js'],\n  // compile then concatenate files to form 'comments.js'\n  comments: [ './comments1.js', './comments2.js', ]\n}\n\n// Completely turn off a task\nFannypack.Config.fonts = false\n\n// Add LESS (new Task) config\nFannypack.Config.less = {\n  src: 'less', // =\u003e './custom/src/less'\n  dest: 'assets/css', // =\u003e './custom/dest/assets/css'\n  watchTask: true,\n  codeTask: true,\n  options: {}.\n  extensions: ['less']\n}\n\n// We're ready, start!\nFannypack.init()\n```\n\n### Development\nWhen using Fannypack for development, run: `npm run gulp`\nOR --- If you do not have [Fannypack's Scripts installed](#script-commands), run: `gulp`\n\n### Production\nWhen your project is ready for production, run: `npm run production`\nOR --- If you do not have [Fannypack's Scripts installed](#script-commands), run: `gulp build:production`\n\n### Cache-Busting\nAfter your production assets have been generated, you may choose to generate unique filenames for your assets. This will ensure that your users will always receive your project's most recent assets after each deployment!\n\nIf you choose to use this feature, run: `npm run version`\nOR --- If you do not have [Fannypack's Scripts installed](#script-commands), run: `gulp rev uglify`\n\n### Deployment\nIf you have any deployment logic or tasks (eg, publishing to gh-pages), you will need to [overwrite Fannypack's deploy task](#overwriting-tasks).\n\nThen you can run: `npm run deploy`\nOR --- If you do not have [Fannypack's Scripts installed](#script-commands), run: `gulp deploy`\n\n### Testing\nAll javascript tests should be located within a directory or directories named `__tests__`.\nFor example, assuming:\n```javascript\nFannypack.Config.root.src = './src'\nFannypack.Config.js.src = './js'\n```\nYou may place all your tests within: `./src/js/__tests__`.\n\nIf you prefer keeping everything modular, you may also do:\n`./src/js/modules/chat/__test__`. This may be done instead of or in addition to the setup above.\n\nOnce you've made and placed your Karma tests, run: `npm run test`\nOR --- If you do not have [Fannypack's Scripts installed](#script-commands), run:\n```bash\ngulp build:production \u0026\u0026 ./node_modules/fannypack/node_modules/.bin/karma start --single-run\n```\n\nThis will use the Karma NPM package that was installed with Fannypack.\n\n\n## Extensions\n\nFannypack can work with **ANY** of your existing favorite Gulp tasks. All you need to do is give them your customized `Fannypack.Config`.\n\nIn order to do this, Fannypack has a `Fannypack.Tasks` object, which allows you to simply add or overwrite any task. Additionally, Fannypack exposes several of its core NPM packages so that you don't need to re-install any duplicate packages.\n\n### Creating Custom Tasks\n```javascript\n// custom-task.js\n\nvar Fannypack = require('fannypack')\nvar gulp      = require('gulp')\nvar $         = Fannypack.$ // Fannypack's Plugins\n\n// Any Additional Packages\nvar insert      = require('gulp-insert')\n// ...\n\nFannypack.Tasks['taskName'] = function(config){\n  // 'config' = final Fannypack.Config\n  if(!config.taskName) return\n\n  var paths = {\n    src: $.Pather.join(config.root.src, config.taskName.src, '/**/*.{' + config.taskName.extensions + '}'),\n    dest: $.Pather.join(config.root.dest, config.taskName.dest)\n  }\n\n  gulp.task('taskName', function() {\n    return gulp.src(paths.src)\n      // do stuff\n      .on('error', $.ErrorHandler)\n      .pipe( gulp.dest(paths.dest) )\n      // reload browser after task runs\n      .pipe( $.BrowserSync.reload({stream:true}) )\n  })\n}\n```\n\nThen, your Config object inside `gulpfile.js` must contain the necessary values in order for your task to run.\n\n***Note:*** *It is recommended that you do not include configuration options inside your task. Future users of your task may not appreciate that!*\n\nYou must also include your task within your `gulpfile.js`. If you choose not to [publish your task](#), you may use a relative path.\n\n```javascript\n// gulpfile.js\n\nvar Fannypack = require('fannypack')\n\nrequire('fannypack-less') // Published package, via NPM\nrequire('./path/to/custom-task.js') // relative path\n\n// ...\n```\n\n### Overwriting Tasks\nYou may completely overwrite a default Fannypack task. For example, you may need to include your own deployment logic.\n\n```javascript\n// custom-deploy-task.js\n\nvar Fannypack = require('fannypack')\nvar gulp      = require('gulp')\nvar $         = Fannypack.$ // Fannypack's Plugins\n\nFannypack.Tasks['deploy'] = function(config){\n  gulp.task('deploy', function(){\n    // return gulp.src ....\n  })\n}\n```\n\nThen be sure to update your `Fannypack.Config` object with your desired values.\n\nAlso, you must include the new task within your `gulpfile.js`:\n\n```javascript\n// gulpfile.js\n\nvar Fannypack = require('fannypack')\n\nrequire('./path/to/custom-deploy-task.js')\n\n// ...\n\nFannypack.init()\n```\n\n### Extending Tasks\nYou may extend any Fannypack task. For example, you may want to run additional logic *after* the `images` task runs.\n\n```javascript\n// custom-image-task.js\n\nvar Fannypack = require('fannypack')\nvar gulp      = require('gulp')\n// Fannypack's Plugins\nvar $         = Fannypack.$\n\n// cache the original Fannypack task\nvar oldTask = Fannypack.Tasks.images\n\nFannypack.Tasks['images'] = function(config){\n  // cache the original gulp task function\n  var oldGulp = oldTask(config).tasks.images.fn\n\n  // redeclare \u0026 overwrite 'images' gulp task\n  gulp.task('images', function(){\n    // do the old stuff\n    oldGulp()\n    // do any new stuff\n    console.log('doing new stuff right meow')\n  })\n}\n\n```\n\n### Publishing Tasks\nIn order to [publish an NPM package](https://docs.npmjs.com/getting-started/publishing-npm-packages):\n\n1. Create a new directory with the name of your task. (Recommended: begin with 'fannypack')\n2. Move task logic into a new `index.js` file\n3. Create a new `package.json` file, with the following required fields:\n  - \"name\" (should match your directory's name)\n  - \"version\"\n  - \"main\" (should be `index.js`)\n  - \"author\"\n  - \"repository\"\n  - \"dependencies\"\n4. Navigate to your module's directory: `cd path/to/module`\n5. Publish your package to NPM: `npm publish`\n\n**Thanks for your contribution!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukeed%2Ffannypack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukeed%2Ffannypack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukeed%2Ffannypack/lists"}