{"id":20589972,"url":"https://github.com/doist/gulpist","last_synced_at":"2025-04-14T22:24:25.881Z","repository":{"id":30824429,"uuid":"34381761","full_name":"Doist/gulpist","owner":"Doist","description":"Static asset build tool for Doist","archived":false,"fork":false,"pushed_at":"2022-11-29T20:26:35.000Z","size":353,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-28T10:21:40.618Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/Doist.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}},"created_at":"2015-04-22T09:36:00.000Z","updated_at":"2025-03-21T04:26:47.000Z","dependencies_parsed_at":"2023-01-14T17:46:03.903Z","dependency_job_id":null,"html_url":"https://github.com/Doist/gulpist","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/Doist%2Fgulpist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Doist%2Fgulpist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Doist%2Fgulpist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Doist%2Fgulpist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Doist","download_url":"https://codeload.github.com/Doist/gulpist/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248970130,"owners_count":21191377,"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-16T07:33:12.830Z","updated_at":"2025-04-14T22:24:25.863Z","avatar_url":"https://github.com/Doist.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Overview\n\nGulpist is a static asset build tool. It automates some common front-end developerment tasks such as LESS and Coffee compilation, Browserify bundling, file concatenation, image compression, etc.\n\nGulpist is built on [Gulp](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md). It is just a regular Node.js program, so it is extremely flexible and easy to extend and customize. You could use all the available Node.js modules (ex: Browserify) in your task codes, or even write your own customize task.\n\n\n# Get Started\n\nSystem Requirement\n\n- [Node.js](https://nodejs.org/)\n- [Gulp](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md)\n\n### 1. Install Node Dependencies\n\n```\nnpm install gulpist -g\n```\n\n### 2. Task Configuration\n\nCopy `gulpist_config.example.json` file into `YOUR_STATIC_PROJECT_DIR/gulpist_config.json`. This file contains configuration for all the tasks.\n\n\n# Run Gulpist\n\nAll the Gulp tasks are run in the follow command syntax\n\n```\ncd YOUR_STATIC_PROJECT_DIR\ngulpist [task name]\n```\n\n\n# Gulpist Tasks\n\nHere is a list of tasks and their required configuration. Task with `:watch` suffix means it will continuous\nwatch for file change and rerun the task when changes occurred.\n\n\n### less\n\n```\ngulpist less\ngulpist less:watch\n```\n\nConfiguration\n\n```json\n\"less\": {\n    \"dest\": \"..\",\n    \"src\": \"css/web_app.less\",\n    \"prefix\": \".less.\",\n    \"watch\": [\"**/*.less\", \"../images/*.less\"]\n}\n```\n\n| Property | Optional | Description                                                               |\n| -------- | -------- | ------------------------------------------------------------------------- |\n| `prefix` | True     | If specified, the task will output the result file with the given prefix. |\n\n\n---\n\n\n### coffee\n\n```\ngulpist coffee\ngulpist coffee:watch\n```\n\nConfiguration\n\n```json\n\"coffee\": {\n    \"dest\": \".\",\n    \"jshint\": true,\n    \"prefix\": \".coffee.\",\n    \"src\": \"**/*.coffee\"\n}\n```\n\n| Property | Optional | Description                                                               |\n| -------- | -------- | ------------------------------------------------------------------------- |\n| `prefix` | True     | If specified, the task will output the result file with the given prefix. |\n\n\n---\n\n\n### browserify\n\n```\ngulpist browserify\ngulpist browserify:watch\n```\n\nConfiguration\n\n```json\n\"browserify\": {\n    \"dest\": \"../web_app_bundle.js\",\n    \"src\": \"./init/.coffee.InitTodoist.js\"\n}\n```\n\n#### broserify:watch didn't trigger when relevant file is updated?\n\n\n`broserify:watch` is quite picky in term of __file path letter casing__. So suppose you have a module file `Users.js`, but you are\nimporting the module as:\n```\nUsers = require('./users.js')  // lower casing\n```\nThe `browserify:watch` will not work in this case.\n\n\n\n---\n\n\n### babel\n\n```\ngulpist babel\ngulpist babel:watch\n```\n\nConfiguration\n\n```json\n\"babel\": {\n    \"dest\": \".\",\n    \"prefix\": \".es6.\",\n    \"src\": \"**/*.es6.js\"\n}\n```\n\n| Property | Optional | Description                                                               |\n| -------- | -------- | ------------------------------------------------------------------------- |\n| `prefix` | True     | If specified, the task will output the result file with the given prefix. |\n\n\n---\n\n\n### sprite\n\n```\ngulpist sprite\n```\n\nConfiguration\n\n```json\n\"sprite\": [\n    {\n        \"imgSrc\": \"images/icons/*.png\",\n        \"retinaSrcFilter\": \"images/icons/*@2x.png\",\n        \"destDir\": \"./images\",\n        \"imgName\": \"cmp_images.png\",\n        \"retinaImgName\": \"cmp_images@2x.png\",\n        \"cssName\": \"cmp_images.css\",\n        \"lessName\": \"cmp_images.less\",\n        \"imgPath\": \"/static/images/cmp_images.png\",\n        \"retinaImgPath\": \"/static/images/cmp_images@2x.png\",\n        \"imgOptim\": false,\n        \"sortImgsByHeight\": true,\n        \"cssTemplate\": \"css/cmp_images.template.handlebars\"\n    },\n    {\n        \"imgSrc\": \"images/tips/*.png\",\n        \"retinaSrcFilter\": \"images/tips/*@2x.png\",\n        \"destDir\": \"./images\",\n        \"imgName\": \"cmp_tips.png\",\n        \"retinaImgName\": \"cmp_tips@2x.png\",\n        \"cssName\": \"cmp_tips.css\",\n        \"lessName\": \"cmp_tips.less\",\n        \"imgPath\": \"/static/images/cmp_tips.png\",\n        \"retinaImgPath\": \"/static/images/cmp_tips@2x.png\",\n        \"imgOptim\": true,\n        \"sortImgsByHeight\": false,\n        \"cssTemplate\": \"css/cmp_tips.template.handlebars\"\n    },...\n]\n```\n\n| Property           | Optional | Description                                                                                                                                                 |\n| ------------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `imgPath`          | False    | URL path of the sprite image that will be referenced in the CSS file.                                                                                       |\n| `retinaImgPath`    | True     | URL path of the retina sprite image that will be referenced in the CSS file.                                                                                |\n| `lessName`         | True     | If specified, the task will also output a .less file with the given name.                                                                                   |\n| `imgOptim`         | True     | If set to `true` will use gifsicle for GIF, jpegtran for JPEG and optipng for PNG. Set to `false` by default.                                               |\n| `sortImgsByHeight` | True     | By default, images are sort by height (shorter on top, tallest on bottom). If set to `false`, images will be sort alphabetically. Set to `true` by default. |\n| `cssTemplate`      | False    | Should point to the path of the CSS template file. Use the file `css_example.template.handlebars` as an example.                                            |\n\n\n\n#### Notes\nAll of the retina settings (`retinaSrcFilter`, `retinaImgName` and `retinaImgPath`) are optional. But if you add one of them, you should add all of them. If you're not including any retina properties in your gulpist settings, feel free to remove the retina styles from the CSS template file as well.\n\nAvoid image filenames containing `-` or spaces. Make sure the retina images are in the same folder as the normal ones. For retina images just add the `@2x` suffix.\n\nYou can use the name of the file as a class name in your CSS–as shown in the `css_example.template.handlebars` file.\n\nHave in mind that the `gulpist sprite` command is generating a new CSS file. For this CSS file to be loaded by the browser you might need to `@import` it into your main CSS file.\n\n\n---\n\n\n### svg-sprite\n\n```\ngulpist svg-sprite\n```\n\nConfiguration\n```json\n\"svg-sprite\": [\n    {\n        \"imgSrc\": \"images/social_media/icons/*.svg\",\n        \"imgName\": \"../images/social_media/social_media_icons.svg\",\n        \"imgCssPath\": \"/static/apps/landing_pages/images/social_media/social_media_icons.svg\",\n        \"cssDestDir\": \"/less\",\n        \"cssName\": \"social_media_icons.less\",\n        \"cssTemplate\": \"css/social_media_icons.template.less\"\n    },...\n]\n```\n\n| Property        | Description                                                                        |\n| --------------- | ---------------------------------------------------------------------------------- |\n| `imgSrc`        | The files that are being merged into a sprite.                                     |\n| `imgName`       | Relative path, from the location of the CSS file, where the image should be saved. |\n| `imgCssPath`    | Absolute path for the image, used on CSS only.                                     |\n| `cssDestDir`    | Destination folder for the CSS output.                                             |\n| `cssName`       | Name for the CSS file.                                                             |\n| `cssTemplate`   | Path and file of the Mustache template.                                            |\n\n\n---\n\n\n### jade\n\nCompiles Jade files into HTML.\nHave in mind that `gulpist watch` will also compile the jade files that were recently saved, if it is specified in the configuration file.\n\n```\ngulpist jade\n```\n\nConfiguration\n```json\n\"jade\": {\n    \"src\": \"**/*.jade\",\n    \"dest\": \".\",\n    \"indentation\": \"    \"\n}\n```\n\n| Property           | Optional | Description                                            |\n| ------------------ | -------- | ------------------------------------------------------ |\n| `src`              | False    | The files that are being compiled.                     |\n| `dest`             | False    | Folder where to put the compiled HTML files.           |\n| `indentation`      | True     | If specified, will be used as the indentation string.  |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoist%2Fgulpist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoist%2Fgulpist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoist%2Fgulpist/lists"}