{"id":13685736,"url":"https://github.com/pgilad/grunt-jade-usemin","last_synced_at":"2025-06-23T02:05:16.370Z","repository":{"id":12108433,"uuid":"14697687","full_name":"pgilad/grunt-jade-usemin","owner":"pgilad","description":"Grunt plugin for running Usemin on Jade files","archived":false,"fork":false,"pushed_at":"2019-02-13T09:26:59.000Z","size":180,"stargazers_count":20,"open_issues_count":0,"forks_count":18,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-09T23:04:34.369Z","etag":null,"topics":["filetype","grunt-plugins","grunt-usemin","gruntfile","jade-files","javascript","target-jade"],"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/pgilad.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":"2013-11-25T20:38:18.000Z","updated_at":"2024-03-06T06:44:56.000Z","dependencies_parsed_at":"2022-09-14T11:12:13.390Z","dependency_job_id":null,"html_url":"https://github.com/pgilad/grunt-jade-usemin","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"purl":"pkg:github/pgilad/grunt-jade-usemin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pgilad%2Fgrunt-jade-usemin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pgilad%2Fgrunt-jade-usemin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pgilad%2Fgrunt-jade-usemin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pgilad%2Fgrunt-jade-usemin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pgilad","download_url":"https://codeload.github.com/pgilad/grunt-jade-usemin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pgilad%2Fgrunt-jade-usemin/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261397365,"owners_count":23152486,"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":["filetype","grunt-plugins","grunt-usemin","gruntfile","jade-files","javascript","target-jade"],"created_at":"2024-08-02T14:00:56.760Z","updated_at":"2025-06-23T02:05:11.348Z","avatar_url":"https://github.com/pgilad.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# [grunt](http://gruntjs.com/)-jade-usemin\n\u003e Grunt plugin for processing jade files and building production js \u0026 css files\n\n[![NPM Version](http://img.shields.io/npm/v/grunt-jade-usemin.svg?style=flat)](https://npmjs.org/package/grunt-jade-usemin)\n[![NPM Downloads](http://img.shields.io/npm/dm/grunt-jade-usemin.svg?style=flat)](https://npmjs.org/package/grunt-jade-usemin)\n[![Build Status](http://img.shields.io/travis/pgilad/grunt-jade-usemin/master.svg?style=flat)](https://travis-ci.org/pgilad/grunt-jade-usemin)\n[![Built with Grunt](http://img.shields.io/badge/BUILT_WITH-GRUNT-orange.svg?style=flat)](http://gruntjs.com/)\n\n## Getting Started\nThis plugin requires Grunt.\n\nIf you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:\n\n```shell\nnpm install --save-dev grunt-jade-usemin\n```\n\nOnce the plugin has been installed, it may be enabled inside your Gruntfile with this line of Javascript:\n\n```js\ngrunt.loadNpmTasks('grunt-jade-usemin');\n```\n\n## The \"jadeUsemin\" task\n\nThis project is based on the [grunt-usemin](https://github.com/yeoman/grunt-usemin) Project.\n`grunt-jade-usemin` is meant to be an assisting tool in preparing projects for build.\n\nThe steps of this plugin are as follows:\n\n1. Scan **src** jade files.\n2. Locate **build blocks** defined by `\u003c!-- build:type(alternate path) target --\u003e`.\n3. Gather **css** and **js** files in build blocks and run them through defined tasks for each filetype.\n4. Optionally output an optimized jade with with only targets to replace the build block.\n\nCurrently only 2 types of build blocks are supported: `css` and `js`.\n\n**jadeUsemin** also:\n\n- Writes optimized jade files\n- You choose which tasks to run for each filetype.\n\nFor example use `grunt-filerev` to add cache-busting to scripts/css.\n\n### Usage\n\n**For more usage examples head on to the [examples](examples/examples.md) section.**\n\n#### Basic Example\n\nTo simply use the task, define your build blocks like so:\n```jade\n//-\u003c!-- build:js public/js/scripts.min.js --\u003e\nscript(src='./src/js/script1.js')\nscript(src='./src/js/script2.js')\n//-\u003c!-- endbuild --\u003e\n\n//-\u003c!-- build:css test/compiled/style.min.css --\u003e\nlink(rel='stylesheet', href='/test/fixtures/style1.css')\nlink(rel='stylesheet', href='/test/fixtures/style2.css')\n//-\u003c!-- endbuild --\u003e\n```\n\nThen you need to define `grunt-jade-usemin` as a task in your `grunt config`.\nYou can use the following setup to process the above pattern:\n\n```js\n//...\njadeUsemin: {\n    scripts: {\n        options: {\n            tasks: {\n                js: ['concat', 'uglify'],\n                css: ['concat', 'cssmin']\n            }\n        },\n        files: [{\n            dest: './src/partials/index.jade',\n            src: './public/partials/index.jade'\n        }]\n    }\n}\n//...\n```\n\nRunning `grunt jadeUsemin:scripts` will now concat and uglify `script1.js` and `script2.js`\nand output them as `public/js/scripts.min.js`. This will also output an optimized jade file\nthat will remove the build block and contain:\n\n```jade\nscript(src='public/js/scripts.min.js')\n```\n\n#### Optimized Jade Files\n\nWriting target jade files is optional. `jadeUsemin` is smart enough that if you don't specify\na target for your src jade files, it won't output a jade file. This is useful if you are working on\nserver side jade files that build blocks still need to be optimized.\n\nIn your grunt configuration you need to configure a destination file (see: [grunt files](http://gruntjs.com/configuring-tasks#files)).\n\nThen if your `src` jade file is:\n\n```jade\n//-\u003c!-- build:css test/compiled/style.min.css --\u003e\nlink(rel='stylesheet', href='/test/fixtures/style1.css')\nlink(rel='stylesheet', href='/test/fixtures/style2.css')\n//-\u003c!-- endbuild --\u003e\n```\n\nYour target jade file will turn into:\n\n```jade\nlink(rel='stylesheet', href='test/compiled/style.min.css')\n```\n\n**Note:** in order to create the optimized target, `grunt-jade-usemin` takes the first src in the relevant build block found and uses that as a template\n\n## API\n\n### Build blocks\n\nBuild blocks have a strict design, so that they may be correctly caught by the regex.\n\n```jade\n\u003c!-- build:type(alternate path) target --\u003e\n\u003c!-- endbuild --\u003e\n```\n\n- Build blocks must be all of the same type (or filetype).\n- You can have as many different build blocks in the same file.\n- Currently only supported blocks are of `js` or `css` types.\n- If writing an optimized jade file, it uses the pattern of the first item to insert optimized script.\n- **alternate path** is **optional** (along with the parenthesis). If used this task will also try\nto find the script/css src files in the alternate path.\n\n### Grunt Task\n\nTasks are *configurable* and *run in the order you specify*.\nThis gives you great flexibility in choosing which and how to run tasks on your build blocks.\n\nThe main task you need to define is called `jadeUsemin`.\n\nBesides specifying the files object, you can use the following options:\n\n#### Tasks\n\nThis is an array of objects, where `key=filetype` and value is an array of tasks to be run in order.\n\n*Default* value is:\n\n```js\ntasks: {\n    js: ['concat', 'uglify'],\n    css: ['concat', 'cssmin']\n}\n```\n\nIn order to allow you to configure your tasks, `jadeUsemin` looks in the following places,\nwhich are ordered by precedence:\n\n1. `task.jadeUsemin.options`. For example: `uglify.jadeUsemin.options`.\n2. `task.options`. For example: `uglify.options`.\n3. Predefined default options for task if they exists.\n\nThis will allow you to control the options with which your tasks are being run on the build blocks.\n\nPlease note that the first task in each filetype runs against the original src files, and writes\nthe destination target file. All the rest of the tasks in the context of the filetype run on the\ndestination file.\n\n**So basically saying - it makes the most sense to run `concat` first on the build blocks.**\n\n##### Specifying no destination for directory tasks (such as filerev)\n\n`grunt-jade-usemin` will look in options for `noDest` and will just specify a `src` for the file\n\nSo a possible way to configure `grunt-filerev` to rewrite the original files with the rev files would be:\n```js\n//in your grunt config\nfilerev: {\n    jadeUsemin: {\n        options: {\n            noDest: true\n        }\n    }\n},\n```\n\n##### Example usage with [grunt-autoprefixer](https://github.com/nDmitry/grunt-autoprefixer)\n\n```js\ntasks: {\n    js: ['concat', 'uglify'],\n    css: ['concat', 'autoprefixer', 'cssmin']\n}\n```\n\n#### dirTasks\n\nType: `string[]|string`\nDefault: `[]`\n\nIf you have tasks that require a directory as destination (i.e [grunt-filerev](https://github.com/yeoman/grunt-filerev))\nthan you can use the `dirTasks` option to specify those in an array or string.\n\nExample:\n```js\ndirTasks: ['filerev']\n// or dirTasks: 'filerev'\n```\n\nThis will parse the destination target as a directory, and not a file.\n\n**important note** - If you use this option for any task, please make sure it is the last task that runs for a file type,\nas it will output a file with different name as the original target.\n\n#### Prefix\n**String** `Default: ''`\n\nThis adds some flexibility to where you keep your public folder. It\nallows you to add a prefix to the path.\n\n## failOnMissingSource\n**Boolean** `Default: false`\n\nShould task fail if there are missing source files in the `jade`. If `false` there will only be a warning.\n\n#### targetPrefix\n**String** `Default: ''`\n\nSame as the `prefix` but used for target location. If you specify a string here it will be prefixed\nto the output of the target file.\n\n#### replacePath\n **Object** `Default: {}`\n\nThis option allows you to specify interpolation patterns for the source and build paths of your js/css.\nEach key value you specify here will be interpolated in the src paths that the plugin finds.\nFor example if you add: `'#{env}': 'dist'` then all occurrences of `#{env}` in src paths will be replaced with `dist`.\nThis gives you the power to change the paths according to different working environments.\n\n#### Gruntfile.js full example\nIn your project's Gruntfile, add a section named `jadeUsemin` to the data object passed into `grunt.initConfig()`.\n\n```js\ngrunt.initConfig({\n  jadeUsemin: {\n    main: {\n      options: {\n        tasks: { //optional if you want to use defaults\n            js: ['concat', 'uglify', 'filerev'],\n            css: ['concat', 'autoprefixer', 'cssmin']\n        },\n        dirTasks: 'filerev',       //optional\n        failOnMissingSource: false // optional\n        prefix: '',                //optional\n        targetPrefix: '',          //optional\n        replacePath: {             //optional\n            '#{env}': 'dist'\n        }\n      },\n      files: [{\n        src: ['src/index.jade', 'src/index2.jade']\n      },{\n        src: ['src/index.jade'],\n        dest: 'dist/index.jade'\n     }]\n    }\n  },\n})\n```\n\n## Contributing\nIn lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using [Grunt](http://gruntjs.com/).\n\n## Contributors\n\n- Pavol Pitonak [https://github.com/ppitonak](https://github.com/ppitonak)\n\n## License\n\nMIT © [Gilad Peleg](https://www.giladpeleg.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpgilad%2Fgrunt-jade-usemin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpgilad%2Fgrunt-jade-usemin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpgilad%2Fgrunt-jade-usemin/lists"}