{"id":15365930,"url":"https://github.com/andywer/gulp-elixir-modules","last_synced_at":"2025-04-15T10:50:59.079Z","repository":{"id":28741460,"uuid":"32262950","full_name":"andywer/gulp-elixir-modules","owner":"andywer","description":"Elixir extension for handling frontend modules easily.","archived":false,"fork":false,"pushed_at":"2015-03-18T07:37:10.000Z","size":160,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-07T21:43:26.893Z","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/andywer.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":"2015-03-15T13:54:56.000Z","updated_at":"2022-06-20T15:45:49.000Z","dependencies_parsed_at":"2022-08-02T20:00:13.504Z","dependency_job_id":null,"html_url":"https://github.com/andywer/gulp-elixir-modules","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andywer%2Fgulp-elixir-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andywer%2Fgulp-elixir-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andywer%2Fgulp-elixir-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andywer%2Fgulp-elixir-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andywer","download_url":"https://codeload.github.com/andywer/gulp-elixir-modules/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249057508,"owners_count":21205904,"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-10-01T13:16:43.736Z","updated_at":"2025-04-15T10:50:59.048Z","avatar_url":"https://github.com/andywer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gulp-elixir-modules [![npm version](https://badge.fury.io/js/gulp-elixir-modules.svg)](http://badge.fury.io/js/gulp-elixir-modules)\nElixir extension for handling frontend modules easily. Written for use with the famous [Laravel 5](http://laravel.com/)\nframework, but might also work for any other project using [gulp](http://gulpjs.com/).\n\n\n## What is this plugin about?\n\nThis plugin is your starting point when you notice that the traditional way of arranging frontend assets\nlike stylesheets, javascript files, images and so on does not scale with the size of your application.\n\nTo illustrate the problem I will present the case of an example webmail application.\n\n\n## Installation\n\n```sh\nnpm install gulp-elixir-modules --save-dev\n```\n\n## Usage\n\nThis is a sample gulpfile using the plugin:\n\n```javascript\nvar elixir = require('laravel-elixir');\nrequire('gulp-elixir-modules');\n\n// Optionally change default paths:\nelixir.config.assetsDir = 'resources/';\nelixir.config.cssOutput = 'public/css';\nelixir.config.jsOutput  = 'public/js';\nelixir.config.imgOutput = 'public/images';            // normally not an elixir configuration property, but used by gulp-elixir-modules\nelixir.config.bowerDir  = 'vendor/bower_components';\n\nelixir(function (mix) {\n  mix.modules();\n\n  // - or pass custom options -\n\n  var options = {\n    modulesDir: '/path/to/frontend-modules',    // Path to the frontend modules parent directory. Defaults to elixir.config.assetsDir.\n    version: true                               // Eventually calls mix.version() on created frontend bundle files if set. Defaults to false.\n  };\n\n  mix.modules(options);\n\n  // - or  -\n\n  mix.modules(['list', 'of', 'frontend', 'modules'], options);\n});\n```\n\n## A well-conceived way to arrange client-side assets\n\n### The Problem\n\nA traditional assets directory structure looks like this:\n\n```\nresources/    (often called 'assets' or 'public')\n  css/\n    contacts.css\n    inbox.css\n    mail-editor.css\n    style.css\n    toolbar.css\n  js/\n    app.js\n    contacts.js\n    inbox.js\n    fancy-plugin.js\n    mail-editor.js\n  img/\n    app-logo.png\n    editor-icons.png\n```\n\nThere is nothing really wrong about it. You just have your assets and you grouped them by type. But when your project\ngets bigger you will reach the point where there are just **too many files** in each directory and **things get ugly**.\n\nSo what to do about it? And how to prevent it in the first place?\n\n### The Solution\n\nThe solution is pretty straight-forward: You don't group files by type, since this approach does not scale\n(the number of different asset types is fixed, in sharp contrast to the total file count). You group by what function\nthe files fulfill.\n\nThat simple observation is true for practically any frontend framework, no matter whether you use Angular, React, jQuery\nor anything else.\nSo from now on we will group the assets by **module**. A (frontend) module is **one feature of your application**.\n\nNew approach:\n\n```\nresources/\n  app/\n    images/\n      app-logo.png\n    scripts/\n      app.js\n    styles/\n      style.css\n      toolbar.css\n  contacts/\n    scripts/\n      contacts.js\n    styles/\n      contacts.css\n  fancy-plugin/\n    scripts/\n      plugin.js\n  inbox/\n    scripts/\n      inbox.js\n    styles/\n      inbox.css\n  mail-editor/\n    images/\n      editor-icons.png\n    scripts/\n      editor.js\n    styles/\n      editor.css\n```\n\nYou see the advantage? It becomes easier to find what you are looking for, even if you split the files into smaller ones.\nIt is easy to handle a great amount of files now and you have them separated by what they do, what is a real benefit\nif you want to lazy-load your assets or need to manage dependencies. Additionally you may name your files inside a\nmodule just as you want.\n\nThis gulp plugin will produce the following files, no matter how many source files you have in each module:\n\n```\npublic/\n  css/\n    app.css\n    contacts.css\n    inbox.css\n    mail-editor.css\n  js/\n    app.js\n    contacts.js\n    fancy-plugin.js\n    inbox.js\n    mail-editor.js\n  images/\n    app-logo.png\n    editor-icons.png\n```\n\nYou can now easily use these files in your web page using `\u003cscript\u003e`, `\u003clink\u003e` and `\u003cimg\u003e` tags. And because you have got functionally well-separated modules you are able to include just the functionality you need for the current page.\n\n\n## API\n\n### mix.modules([modules: string[],] [options: object])\n\n##### modules: string[]\n\nList of module names to compile. The default is to take all directory names in the module base directory (see `options.modulesDir`).\n\n##### options: object\n\n- `options.modulesDir`: string\n  Path to the modules parent directory. Defaults to elixir.config.assetsDir.\n- `options.version`: bool\n  Eventually calls mix.version() on created frontend bundle files if set. Defaults to false.\n\n\n## Laravel 4\n\nYou may use Elixir and gulp-elixir-modules with Laravel 4, too! Have a look at [https://medium.com/@specter_bg/using-laravel-elixir-with-laravel-4-24bc506ae1fd](https://medium.com/@specter_bg/using-laravel-elixir-with-laravel-4-24bc506ae1fd).\n\nBut you can use Elixir and gulp-elixir-modules for any non-Laravel project, too. Just adapt the paths as shown in [Usage](#usage).\n\n\n## License\n\nThis software is licensed under the terms of the MIT license. See LICENSE for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandywer%2Fgulp-elixir-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandywer%2Fgulp-elixir-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandywer%2Fgulp-elixir-modules/lists"}