{"id":13553606,"url":"https://github.com/AdFabConnect/adfab-gulp-boilerplate","last_synced_at":"2025-04-03T05:31:09.229Z","repository":{"id":57173362,"uuid":"57055368","full_name":"AdFabConnect/adfab-gulp-boilerplate","owner":"AdFabConnect","description":"A boilerplate including Gulp, Less/SASS, BrowserSync.","archived":false,"fork":false,"pushed_at":"2020-12-03T15:55:04.000Z","size":5198,"stargazers_count":16,"open_issues_count":2,"forks_count":1,"subscribers_count":35,"default_branch":"master","last_synced_at":"2024-04-24T01:02:19.310Z","etag":null,"topics":["boilerplate","browsersync","css","gulp","less"],"latest_commit_sha":null,"homepage":"https://adfabconnect.github.io/adfab-gulp-boilerplate/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AdFabConnect.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":"2016-04-25T15:54:45.000Z","updated_at":"2023-05-31T12:08:49.000Z","dependencies_parsed_at":"2022-08-24T14:41:12.326Z","dependency_job_id":null,"html_url":"https://github.com/AdFabConnect/adfab-gulp-boilerplate","commit_stats":null,"previous_names":[],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdFabConnect%2Fadfab-gulp-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdFabConnect%2Fadfab-gulp-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdFabConnect%2Fadfab-gulp-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdFabConnect%2Fadfab-gulp-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AdFabConnect","download_url":"https://codeload.github.com/AdFabConnect/adfab-gulp-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246944377,"owners_count":20858773,"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":["boilerplate","browsersync","css","gulp","less"],"created_at":"2024-08-01T12:02:29.345Z","updated_at":"2025-04-03T05:31:08.930Z","avatar_url":"https://github.com/AdFabConnect.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# ADFAB Gulp Boilerplate\n\n\u003e The goal of this [Gulp](http://gulpjs.com/) boilerplate is to free you time so you can do something more interesting than reinventing the wheel.\n\n[![npm version](https://badge.fury.io/js/adfab-gulp-boilerplate.svg)](http://badge.fury.io/js/adfab-gulp-boilerplate)\n[![Build Status](https://travis-ci.org/AdFabConnect/adfab-gulp-boilerplate.svg?branch=master)](https://travis-ci.org/AdFabConnect/adfab-gulp-boilerplate)\n[![Dependency Status](https://david-dm.org/AdFabConnect/adfab-gulp-boilerplate.svg?theme=shields.io)](https://david-dm.org/AdFabConnect/adfab-gulp-boilerplate)\n[![devDependency Status](https://david-dm.org/AdFabConnect/adfab-gulp-boilerplate/dev-status.svg?theme=shields.io)](https://david-dm.org/AdFabConnect/adfab-gulp-boilerplate#info=devDependencies)\n[![License](https://img.shields.io/badge/license-ISC-blue.svg)](https://raw.githubusercontent.com/AdFabConnect/adfab-gulp-boilerplate/master/LICENSE)\n\n## Features\n\n* Automatic reloading of the browser on code modification (using [Browsersync](https://www.browsersync.io/))\n* CSS / JS Sourcemaps\n* HTML minification\n* [Image minification](https://www.npmjs.com/package/gulp-imagemin)\n* JS compilation\n* [Babel](https://babeljs.io/) transpiler (ES6 support FTW)\n* [SASS](http://sass-lang.com/) or [LESS](http://lesscss.org/) compilation\n* Linting for [JS](https://www.npmjs.com/package/gulp-eslint), [SASS](https://www.npmjs.com/package/gulp-sass-lint) and [LESS](https://www.npmjs.com/package/gulp-lesshint)\n* Desktop notifications on success and error\n* [Fonticon](gulp-iconfont) generation\n* [SVG Sprite](gulp-svgstore) generation\n* Copy or Concat files\n* Production mode: JS / CSS minification + sources maps removal\n\n## Installation\n\n```shell\nnpm install adfab-gulp-boilerplate --save\n```\n\nUpon installation, two files will be copied to the root of your project: `gulpfile.js` and `gulp-config.json`.\n\n## Usage\n\n### Configure the tasks you need\n\nEvery task rely on the `gulp-config.json` file for their configuration. Just fill-in the values you need.\n* `vhost`: your local url,\n* `sourceRoot`: root path where your assets will be stored\n* `destinationRoot`: the path where your public final assets will be stored\n* `tasks`: the list of all tasks you want to run. See details in `gulp-config.json` for details of every options of below for details about how it works \n \n### Task config usage\n\nA task uses somes common parameters:\n* `source`: the source folder - a string or an array of string - relative to sourceRoot\n* `destination`: the source folder - a string or an array of string - relative to destinationRoot\n* `task`: the task you want to use, if the name is not the same as your task name\n* `clean`: cleans destination folder of the task before copying files. So removed files from your source folder will be removed from destination folder too. default true\n* `watch`: while using `gulp watch`or `gulp serve` your task source files will be watched by default. You can choose to watch other files for your task instead, or set to false to stop watching files for this task\n\nExample:\n```json\n{\n    \"fonts\": {\n        \"task\": \"copy\",\n        \"source\": \"fonts/\",\n        \"destination: \"fonts/\",\n    }\n}\n```\n\nThat task named `fonts` will execute the `copy` task which will copy files from your source folder to your destination folder. It will clean font folder every time a file is added/removed from source folder, and will be watched.\n\n```json\n{\n    \"sassadmin\": {\n        \"task\": \"sass\",\n        \"source\": [\"sass/admin.scss\"],\n        \"watch\": [\"sass/**/*.scss\"],\n        \"destination\": \"admin/css\",\n        \"clean\": false\n    }\n}\n```\nThat task named `sassadmin` will execute the `sass` task which will compile sass to css files from your source folder to your destination folder.\nDestination folder wont be cleaned (as your admin css folder may contain other css files not manged by yourself).\nThe source file is only your admin css file, but every .scss file updated from your sass folder will be watched.\n\nMany tasks have more options we will detail in `Task list overview` part.\n\n### Add custom task / Override task\n\nYou can create a folder named `gulp-tasks` at the root of your project.\nIn this folder you can add new tasks. If a task has the same name as a default boilerplate task, it will override it.\n\n\n## Task list overview\n\nEvery tasks has a desktop notification when succeeded or failed, with detailed logs.\n\nHere is a list of current taks available:\n* `copy`: copy files from your source folder to destination folder\n* `concat`: copy files from your source folder to destination folder and concat them in a single file\n* `sass`: to compile scss into css file, with autoprefixer, sourcemaps for development, minify for production\n* `less`: as sass, but for less\n* `sasslint`: checks your sass code\n* `lesshint`: checks your less code\n* `fonticon`: [fonticon](https://www.npmjs.com/package/gulp-iconfont) takes all svg files in a folder to create a fonticon and a [css/less/sass](https://www.npmjs.com/package/gulp-iconfont-css) file to be included in your final css\n* `jslibs`: concatenates and uglify all your js libs into one single file\n* `scripts`: parse your js with babelify for es6 compatibility. adds sourcemaps for dev, uglify for production\n* `eslint`: checks your js code\n* `views`: minify your html\n* `images`: [images](https://www.npmjs.com/package/gulp-imagemin) optimizes image weight when copying\n* `fonts`: juste copy your font files\n* `svgsprite`: create a SVG sprite from all SVG files in a folder\n\n## Gulp usage\n\n### Build\n\nYou can use default task:\n\n```shell\ngulp\n```\n\nor \n\n```shell\ngulp build\n```\n\nTo execute all the task listed in your `gulp-config.json` file in listed order.\n\n### Single task\n\nYou can use:\n\n```shell\ngulp \u003ctaskname\u003e\n```\n\nTo compile only a task fom your `gulp-config.json` file.\n\n### Watch\n\nYou can use:\n\n```shell\ngulp watch\n```\n\nTo build your tasks and watch for updates to compile files\n\n### Browser live reloads\n\nUsing:\n\n```shell\ngulp serve\n```\n\nIt start a [Browsersync](https://www.browsersync.io/) server.\n\nIt acts as a proxy to the domain you specified in `gulp-config.json` (property `vhost`). You can now access your project by specifying the `3000` port (if you usually access your project via `http://project.localhost/`, now it would be `http://project.localhost:3000/`).\n\nYou can also test it in production mode by passing the `--production` option. That way, it will remove *sourcemaps* and minify JS and CSS.\n\n### Development and production\n\nDevelopment mode (by default), adds sourcemaps to your code for js/sass.\n\nYou can run:\n \n```shell\ngulp --production\n```\n\nIt will remove sourcemap genreration and minify your js and css.\n\n## License\n\n[ISC license](https://github.com/AdFabConnect/adfab-gulp-boilerplate/blob/master/LICENSE).\n\nCopyright (c) 2016-2018 ADFAB\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAdFabConnect%2Fadfab-gulp-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAdFabConnect%2Fadfab-gulp-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAdFabConnect%2Fadfab-gulp-boilerplate/lists"}