{"id":20383530,"url":"https://github.com/smerth/gulp-4-site-builder-jade-coffeescript-bootstrap","last_synced_at":"2026-04-10T15:07:01.886Z","repository":{"id":3699619,"uuid":"50623059","full_name":"smerth/gulp-4-site-builder-jade-coffeescript-bootstrap","owner":"smerth","description":"This site repo uses Gulp to generate a development build and a staging build of a Bootstrap4 site.  Gulp-gh-Pages is used to push the staging build to github pages. HTML is written using Jade syntax.  Javascript can be written in vanilla js or CoffeeScript.","archived":false,"fork":false,"pushed_at":"2023-10-10T10:05:51.000Z","size":5714,"stargazers_count":0,"open_issues_count":16,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-15T00:13:17.073Z","etag":null,"topics":["bootstrap","css","gulp","html","javascript"],"latest_commit_sha":null,"homepage":"http://smerth.github.io/gulp-4-site-builder-jade-coffeescript-bootstrap/","language":"Pug","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/smerth.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-01-28T23:52:04.000Z","updated_at":"2022-03-08T17:31:10.000Z","dependencies_parsed_at":"2024-11-15T02:24:15.495Z","dependency_job_id":"cfbc459c-3350-410f-afbd-8df79bb16be6","html_url":"https://github.com/smerth/gulp-4-site-builder-jade-coffeescript-bootstrap","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/smerth/gulp-4-site-builder-jade-coffeescript-bootstrap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smerth%2Fgulp-4-site-builder-jade-coffeescript-bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smerth%2Fgulp-4-site-builder-jade-coffeescript-bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smerth%2Fgulp-4-site-builder-jade-coffeescript-bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smerth%2Fgulp-4-site-builder-jade-coffeescript-bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smerth","download_url":"https://codeload.github.com/smerth/gulp-4-site-builder-jade-coffeescript-bootstrap/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smerth%2Fgulp-4-site-builder-jade-coffeescript-bootstrap/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267320257,"owners_count":24068527,"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-07-27T02:00:11.917Z","response_time":82,"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":["bootstrap","css","gulp","html","javascript"],"created_at":"2024-11-15T02:23:15.909Z","updated_at":"2025-12-30T21:45:59.637Z","avatar_url":"https://github.com/smerth.png","language":"Pug","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Static Site Generator Built with Gulp and using Jade, Coffeescript and Bootstrap\n\n\nThis project is a static site generator.  It uses Gulp to manage a workflow that does the following:\n- compiles coffeescript to javascript\n- concatenates your javascript and any libraries you add into a single `main.js` file.\n- compiles SCSS to CSS (Bootstrap!)\n- compiles Jade to HTML\n- generates, and serves a development version of the site on localhost\n- compresses HTML, Javascript, CSS and Images into a staging folder and serves that locally to be able to check the build\n- adds a base url to the staging build a deploys the site to gh-pages\n\n\n\n\u003e Caveat 1\n\u003e\n\u003e The Gulp build process uses `gulp-compass` which uses an outdated version of Compass.  That version has trouble with the latest version of Bootstrap SCSS.\n\u003e\n\u003e Specifically, you need to edit one file `_root.scss` adding \"color\" to the statements on line 4 and 8.\n\n\n```scss\n// Custom variable values only support SassScript inside `#{}`.\n  @each $color, $value in $colors {\n    --color-#{$color}: #{$value};\n    }\n  @each $color, $value in $theme-colors {\n    --color-#{$color}: #{$value};\n    }\n```\n\n\n\n\u003e Caveat 2\n\u003e\n\u003e Obviously Gulp is old school, now I only use Web-pack and of course Bower is deprecated.  None-the-less, this generator works and was built to get a grip on Gulp and writing processes with pipes...\n\n\n\n\n![App Screenshot](https://raw.githubusercontent.com/smerth/bootstrap-jade-and-coffeescript-with-gulp-and-bower/master/screenshot.png)\n\n\n\n## Requirements\n\nMake sure you have the following installed globally:\n\n- node.js\n- npm\n- ruby\n- compass\n- bower\n\n## Usage\n\n### Clone\n\n```bash\ngit clone https://github.com/smerth/bootstrap-jade-and-coffeescript-with-gulp-and-bower.git YOUR-PROJECT-NAME\n```\n\n### Install npm assets\n\n```bash\ncd YOUR-PROJECT-NAME \u0026\u0026 npm install\n```\n\n### Install bower assets\n\n```bash\ngulp bower\n```\n\n## Transfer bower main assets to `src/vendor`\n\n```bash\ngulp vendor\n```\n\n### Serve the dev build\n\n```bash\ngulp\n```\n\nThis runs a collection of tasks and serves up the built development folder contents at: http://localhost:8080.\n\n### Build the staging folder\n\n```bash\ngulp stage\n```\n\nThis will copy all the necessary files from the `development` folder to the `staging` folder after compression the CSS, HTML and Javascript.  Then it serves the `staging` folder at: http://localhost:8001.\n\n### Build staging to deploy to gh-pages\n\nFirst create a repo on Github to host your code. Next you will need to create a `gh-pages` branch.\n\nWhen deploying to `gh-pages` the paths to assets need to be prefixed with the project name for your repository.  Otherwise the assets will not be found when the server looks for them.\n\nInstead of build in a gulp task to prefix assets and pages I have opted to add `\u003cbase\u003e`element to the layout of the site. \n\nYou can edit the base url @ `base_url.jade`\n\n```jade\n- var base = locals\ncase base\n  when 0\n    base(href=\"/\")\n  when 1\n    base(href=\"http://smerth.github.io/bootstrap-jade-and-coffeescript-with-gulp-and-bower/\")   \n  default\n    base(href=\"/\")\n```\n\nNow you can set a local variable for the label `base`\n\n@ terminal\n\n```bash\nbase=0\nor \nbase=1\n```\n\nWhen the local variable `base` is set to `1` the jade compiler will include the `\u003cbase\u003e` element in the layout with the url to your project.\n\nWhen it is set to `0` the jade compiler will include the `\u003cbase\u003e` element in the layout with the url set to `/`.\n\nNow build the staging folder\n\n```bash\ngulp stage\n```\n\n\n\n### Push the staging folder to gh-pages\n\n```bash\ngulp deploy\n```\n\nYou have to have set the base url and built the staging folder first, before you deploy.\n\nGive Github a few minutes to propagate your files around the globe before checking the site.\n\n## Development Worflow\n\n\u003e Write code in `src`.\n\u003e Develop and Debug in `development` mode.\n\u003e Compress site to `staging` and then\n\u003e Push `staging` to the live server.\n\n## Directory structure\n\nThe installation and build process will add the following folders and contents:\n\n- bower_components\n- src/vendor\n- builds/\\*\n- node_modules\n\nThe jade files and folder structure in `src/templates/sections` will be replicated in HTML in the `builds/development` and `builds/staging` folders by Gulp.\n\nCoffeeScript files will be processed to JavaScript prior to all JavaScript files being concatenated.\n\n### Misc. files\n\n.gitignore - useful to exclude staging/ if you want to track that folder separately and push it somewhere else.\n\n.atomignore - useful to exclude annoying files from the Atom finder side-bar if you use Atom Text Editor\n\nconfig.rb - useful if you want to explicitly define your ruby and gems for use with compass to process SASS.\n\n.ruby-version - you might want to specify a ruby-version (in which case chruby is nice way to control your ruby version on a per project basis.)\n\n## Gulp tasks\n\n### `gulp`\n\nDoes the following:\n\n- `connectdev` - serves the contents of the development folder at: http://localhost:8080\n- `vendor` - moves the main files from bower_components to src_vendor, main files are defined in each dependancies package.json file.\n- `coffee` - compiles CoffeeScript files to js files and places them in 'src/scripts'\n- `js` - concatenates all js files in 'src/scripts' and the bower dependancy js files in 'vendor' into a single JS file and outputs it to development and staging.\n- `jadedev` and `jadestage` - each compile jade template files into html and place them into `development` and `staging`. `jadestage` also compresses the output HTML and sends a local variable to the jade processor which is used to swich the base url used to compile the staging site (to make it easy to host the site on gh-pages.)\n- `images` - compresses image files and moves them to development and staging.\n- `watchdev` - watches for changes to any of the folders your likely to edit during development and then runs related tasks when changes are detected and reloads the browser.\n\n### `gulp install-assets`\n\nDoes the following:\n\n- bower - download bower dependancies to bower_components\n- vendor - move bower dependancy main assets to vendor\n\n### `gulp stage`\n\nThe purpose of gulp stage is move files from development to staging while minifying,\ncompressing, removing maps and comments...\n\n### Other gulp tasks\n\n`gulp bower`\n\nDownloads and installs the libraries listed as dependencies in bower.json file. Normally you would only run this once when setting up, or after including a new Bower dependency.\n\n`gulp vendor`\n\nMoves only the main Bower dependencies to `src/vendor` In this build the Javascript processing tasks rely on the .js files (jquery.js and Bootstrap.js) being in `src/vendor`. (You'll also see bootstrap.scss is also moved to `src/vendor` but in fact that bootstrap.scss is referenced from bower_components in style.scss. That way all of Boostrap's partial .scss files can be pulled in by Compass... there are alot of ways of organizing the bootstrap styles... this is just one way...)\n\n`gulp coffee`\n\nProcesses CoffeeScript files into js files and places them in the `src/js` folder.\n\n`gulp js`\n\nConcatenates js files from `src/vendor` and `scripts/js`. You can control the order of Concatenation by changing the jsSource variable.\n\n`gulp jade`\n\nCompiles Jade into HTML. The option: `{base: }` tells `gulp.dest` to recreate the directory structure found inside the specified base folder. So you can build directory structure in the sections folder inside templates and it will be reflected in the `development` and `staging` folders\n\n`gulp compass`\n\nThis task will compile any SASS you write in `src/sass` with all of the bootstrap scss and outputs a single css file to `development/css`\n\nThis task uses Compass which means you can work with Susy or Breakpoint, etc. However, using Compass means dealing with Ruby. For simple SASS processing you could use gulp-sass and do away with Ruby.\n\n`gulp images`\n\nThis is the only task not split into development and staging. Image files are compressed and sent to images in both development and staging...\n\n`gulp watchdev`\n\nGulp has the watch function built in. When developing the `watchdev` task will make sure changes you make to your code-base are reflected in `development` folder and the brower is reloaded.\n\n`gulp htmlmin`\n\nThis task takes the html from development folder and compresses it into staging folder. Not used in this build process since Gulp-jade can output compressed HTML.\n\n`gulp jsuglify`\n\nCompress JS from development to staging\n\n`gulp cssnano`\n\nCompress css from development to staging\n\n## Is it working?\n\n### Check the following:\n\n- Site should be up and running at: http://localhost:8080\n- Bootstrap 4 should be working\n- Scripts should be loaded and working (check responsive side-bar menu, errors on the console)\n- In terminal gulp should be watching for changes to the code\n- Writing changes to: sass stylesheets, jade templates, coffeescripts, js scripts, image files,\n  should result in a live reload with changes immediately visible in the browser.\n- The development folder should contain un-compressed css and js files. with comments and maps intact.\n- After running `gulp stage` the development folder contents should be compressed and the base url should be swapped out according to the switch in the `base_url.jade` include.\n\n## Useful Links\n\n### Build System\n\n- [Node.js](https://nodejs.org/en/)\n- [NPM](https://www.npmjs.com)\n- [Gulp](http://gulpjs.com)\n- [Bower](http://bower.io)\n\n### Write HTML\n\n- [Jade Language](http://jade-lang.com)\n\n### Write JavaScript\n\n- [CoffeeScript](http://coffeescript.org)\n\n### Write Style\n\n- [SASS](http://sass-lang.com)\n- [Bootstrap](http://getbootstrap.com)\n- [Bootstrap 4](http://v4-alpha.getbootstrap.com)\n\n### Ditch Bootstrap and go DIY\n\n- [Compass](http://compass-style.org)\n- [Susy](http://susy.oddbird.net)\n- [Breakpoint](https://github.com/lesjames/Breakpoint)\n\n### Needed for Compass\n\n- [Ruby](https://www.ruby-lang.org/en/)\n- [Ruby Gems](https://rubygems.org)\n- [chruby](https://github.com/postmodern/chruby)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmerth%2Fgulp-4-site-builder-jade-coffeescript-bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmerth%2Fgulp-4-site-builder-jade-coffeescript-bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmerth%2Fgulp-4-site-builder-jade-coffeescript-bootstrap/lists"}