{"id":14967629,"url":"https://github.com/luiguild/gulp-reusable","last_synced_at":"2025-10-25T20:31:33.306Z","repository":{"id":83085573,"uuid":"98230698","full_name":"luiguild/gulp-reusable","owner":"luiguild","description":"A powerful boilerplate to work with Gulp 3.9 with SASS, PUG and ES6+ with reusable \u0026 async tasks.","archived":false,"fork":false,"pushed_at":"2017-08-10T19:37:13.000Z","size":36,"stargazers_count":8,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-07T10:11:19.318Z","etag":null,"topics":["babel","babelify","boilerplate","browserify","browsersync","css","css3","es6","es6-javascript","es7","eslint","gulp","gulp-tasks","gulpjs","javascript","js","pug","pugjs","sass","sass-boilerplate"],"latest_commit_sha":null,"homepage":"","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/luiguild.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-24T20:11:11.000Z","updated_at":"2019-01-07T21:10:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"cb028927-902d-4467-b717-7b22fb43f073","html_url":"https://github.com/luiguild/gulp-reusable","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/luiguild/gulp-reusable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luiguild%2Fgulp-reusable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luiguild%2Fgulp-reusable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luiguild%2Fgulp-reusable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luiguild%2Fgulp-reusable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luiguild","download_url":"https://codeload.github.com/luiguild/gulp-reusable/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luiguild%2Fgulp-reusable/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281015505,"owners_count":26430098,"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","status":"online","status_checked_at":"2025-10-25T02:00:06.499Z","response_time":81,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["babel","babelify","boilerplate","browserify","browsersync","css","css3","es6","es6-javascript","es7","eslint","gulp","gulp-tasks","gulpjs","javascript","js","pug","pugjs","sass","sass-boilerplate"],"created_at":"2024-09-24T13:38:22.838Z","updated_at":"2025-10-25T20:31:33.040Z","avatar_url":"https://github.com/luiguild.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/luiguild/gulp-reusable/master/readme-image.png\" height=\"350\"\u003e\u003c/p\u003e\n\n# gulp-reusable\n\nA powerful boilerplate to work with Gulp 3.9 with SASS, PUG and ES6+ with reusable tasks.\n\nThis project work on a NodeJS 6+ with JS-ES6+ innovations and the parts of the code are packages, it's just require one to use :)\n\n### How to use\n**1** Clone this repo\n\u003cbr\u003e\n**2** install it\n\nUsing | Command line\n------------- | -------------\nyarn | `yarn`\nnpm | `npm install`\n\n**3** Setup your configuration file (`gulpfile.config.js`), the ESLint config (`.eslintrc.js`), the Babel config (`.babelrc` only if you will use Babel, obviously) and be sure that all paths and files are right and ready to be processed\n\n\n**4** Run!\n\nyarn | Command line\n------------- | -------------\ndev | `yarn dev`\nbuild | `yarn build`\n\nnpm | Command line\n------------- | -------------\ndev | `npm run dev`\nbuild | `npm run build`\n\n#### Lint your code\n- Make sure that your JS code are standardized with ESLint\n\n#### Transpile your JS-ES6+\n- Write your code using the new features of ES6+ and put to ES2015 using Babel+Babelify and Browserify or just minify your file using UglifyJS.\n\nUsing Browserify and Babel (ES2015 + stage-0 preset are built-in)\n```javascript\ngulp.task('make:js', () =\u003e {\n    return script({\n        source: config.files.js.src, // your input file coming from the configuration\n        eslint: true, // using eslint?\n        concat: `${config.app.name}.js`, // if you prefer concatenate all your JS files into a single one, set a name\n        transpiler: [\n            'browserify',\n            'babel'\n        ], // set the transpiler\n        rename: '.min', // if you want rename the final file\n        dest: config.files.js.dest, // your output file coming from the configuration\n        injection: true // if you want the this file will injected in your index\n    })\n})\n```\n\nWith a simple change, setting up UglifyJS\n```javascript\ngulp.task('make:js:static', () =\u003e {\n    return script({\n        source: config.files.static.js.src,\n        transpiler: 'uglify', // i'm comfortable with my code, just minify\n        rename: '.min',\n        dest: config.files.static.js.dest,\n        injection: true\n    })\n})\n```\n\n#### Work with SASS or SCSS and CSS\n- You can use all the power of these preprocessors and/or pure CSS!\n\n- All files will be combined, autoprefixed, purged, beautified, validated and cleaned by default\n\nThe function recognize the file extension and call the preprocessor automatically, if necessary\n```javascript\ngulp.task('make:sass', () =\u003e {\n    return style({\n        source: config.files.sass.src, // your input file coming from the configuration\n        rename: '.min', // if you want rename the final file\n        dest: config.files.sass.dest, // your output file coming from the configuration\n        injection: true // if you want the this file will injected in your index\n    })\n})\n```\n\n#### Configurable files structure\n- It's simple! You set your file paths and run the tasks!\n\nWith a simple setup, your production environment will be created\n```javascript\nconst app = {\n    name: ''\n}\n\nconst paths = {\n    src: 'src/',\n    dist: 'dist/',\n    static: 'static/'\n}\n```\n\n#### Reusable tasks\n- You can call similar tasks passing others parameters without duplicate them and if you need an specific thing, just edit the main function to expand and adjust to your case.\n\n- All functions already have an callback to help you work with clear logs about the errors\n\n- The functions doesn't have the traditional `.pipe` to control the stream, instead of this, I prefer work with `pump()` package. If you want know more about it \u003e https://www.npmjs.com/package/pump\n\n#### Autoloader packages\n- You not need require a package every time that you install something new to Gulp work with it!\n\n#### Minify\n- With a simple parameter, you set if your output file will be minified or not.\n\n#### Rename\n- You can rename your files with a new name or just adding a `.min` extension.\n\n#### Concatenate files\n- Put all JS/CSS/HTML files into a single one.\n\n#### File injection\n- If you use a template engine (like a PugJS), all your dependencies will be added automatically in your `index.html`.\n\nIn your PugJS 'index' you just need add these comments\n```pug\nhead\n    // inject:css\n    // endinject\n\nbody\n    // libs:js\n    // endinject\n    // inject:js\n    // endinject\n```\n\nThe injection task\n```javascript\ngulp.task('make:injection', () =\u003e {\n    return injection({\n        source: {\n            root: config.files.templates.production[0], // your index file coming from the configuration\n            libs: [\n                `${config.paths.dist}static/js/**/*.js`\n            ], // if you need put some libs\n            app: [\n                `${config.paths.dist}js/**/*.js`,\n                `${config.paths.dist}css/**/*.css`,\n                `${config.paths.dist}static/css/**/*.css`\n            ] // your output files\n        },\n        dest: config.paths.dist // the final destination of your index already injected\n    })\n})\n\n```\n\n#### Browser sync\n- At every new build, BrowserSync will refresh the browser to you.\n\n#### Template controls\n- You can work with a 'index' page separately of the others one.\n\n#### Watching files\n- At every change that you do in your code, Gulp will make a new build to you!\n\nYou can call this function as many times you want\n```javascript\nwatch({\n    source: config.files.templates.debug[0], // your input file(s) coming from the configuration\n    task: 'make:pug:index' // task that will be run at every change\n})\n```\n\n#### Create a production-ready folder structure\n- Gulp will manage the production folder to you.\n\n**SUGGESTION**\n```\nmyApp\n    dist\n        css\n            myApp.min.css\n        js\n            myApp.min.js\n        static\n            css\n                vendor.min.css\n            fonts\n                fontawesome.woff2\n            img\n                logo.png\n            js\n                vendor.min.js\n        templates\n            home\n                home.html\n        index.html\n\n    src\n        js\n            myApp.js\n        sass\n            myApp.sass\n        pug\n            myApp.pug\n\n    static\n        css\n            vendor.css\n        fonts\n            fontawesome.woff2\n        img\n            logo.png\n        js\n            vendor.js\n```\n\n\n## To contribute and make it better\nClone the repo, change what you want and send PR\n\n###### Contributions are always welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluiguild%2Fgulp-reusable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluiguild%2Fgulp-reusable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluiguild%2Fgulp-reusable/lists"}