{"id":20383525,"url":"https://github.com/smerth/gulp-4-web-workflow-with-pug-and-bootstrap","last_synced_at":"2026-04-30T12:35:01.253Z","repository":{"id":44127664,"uuid":"64415716","full_name":"smerth/gulp-4-web-workflow-with-pug-and-bootstrap","owner":"smerth","description":"Use Gulp to process Jade templates, build development and staging versions, and push the staging version to gh-pages.","archived":false,"fork":false,"pushed_at":"2022-12-03T14:33:47.000Z","size":1887,"stargazers_count":0,"open_issues_count":16,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-27T13:30:45.694Z","etag":null,"topics":["bootstrap","gulp","jade"],"latest_commit_sha":null,"homepage":"https://smerth.github.io/gulp-4-web-workflow-with-pug-and-bootstrap","language":"HTML","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}},"created_at":"2016-07-28T17:38:56.000Z","updated_at":"2022-06-16T22:33:18.000Z","dependencies_parsed_at":"2023-01-22T20:31:35.988Z","dependency_job_id":null,"html_url":"https://github.com/smerth/gulp-4-web-workflow-with-pug-and-bootstrap","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/smerth/gulp-4-web-workflow-with-pug-and-bootstrap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smerth%2Fgulp-4-web-workflow-with-pug-and-bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smerth%2Fgulp-4-web-workflow-with-pug-and-bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smerth%2Fgulp-4-web-workflow-with-pug-and-bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smerth%2Fgulp-4-web-workflow-with-pug-and-bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smerth","download_url":"https://codeload.github.com/smerth/gulp-4-web-workflow-with-pug-and-bootstrap/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smerth%2Fgulp-4-web-workflow-with-pug-and-bootstrap/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32465009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T22:27:22.272Z","status":"online","status_checked_at":"2026-04-30T02:00:05.929Z","response_time":57,"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","gulp","jade"],"created_at":"2024-11-15T02:23:14.160Z","updated_at":"2026-04-30T12:35:01.232Z","avatar_url":"https://github.com/smerth.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Gulp 4 web workflow with pug and bootstrap\n\nThis demo uses Gulp to process pug (Jade) template files and a NODE_ENV variable to allow different builds for Development and Staging.\n\n## Usage\n\nClone the repo. Install the dependancies and run gulp\n\n```bash\ngulp\n```\n\nThe default gulp task runs a series of build tasks and then runs a watch task. The browser should open and re-fresh whenever you make a change to files in `src`\n\n## Gulpfile.js\n\n```javascript\nvar gulp = require(\"gulp\");\n\nvar autoprefixer = require(\"gulp-autoprefixer\");\nvar browserSync = require(\"browser-sync\").create();\nvar sass = require(\"gulp-sass\");\nvar cleanCSS = require(\"gulp-clean-css\");\nvar sourcemaps = require(\"gulp-sourcemaps\");\nvar concat = require(\"gulp-concat\");\nvar imagemin = require(\"gulp-imagemin\");\nvar changed = require(\"gulp-changed\");\nvar uglify = require(\"gulp-uglify\");\nvar lineendingcorrector = require(\"gulp-line-ending-corrector\");\nvar pug = require(\"gulp-pug\");\nvar del = require(\"del\");\nvar ghPages = require(\"gulp-gh-pages\");\n// var gulpif = require(\"gulp-if\");\n\n// Global environment variables to set different task processing\nvar env = process.env.NODE_ENV || \"development\";\nif (env === \"development\") {\n  outputDir = \"builds/development/\";\n  sassStyle = \"expanded\";\n} else {\n  outputDir = \"./builds/production/\";\n  sassStyle = \"compressed\";\n}\n\n// Directories\nvar libraries = \"./src/libraries/\"; // external js\nvar css = \"./src/css/\"; // expternal css\nvar scss = \"./src/scss/\";\nvar images = \"./src/images/\";\nvar js = \"./src/js/\";\nvar pages = \"./src/pages/\";\n\n// Watch for changes in these files\nvar pugTemplates = pages + \"**/*.pug\";\nvar pugIncludes = \"./src/includes/**/*.pug\";\nvar scssFiles = scss + \"**/*.scss\";\nvar cssFiles = css + \"**/*.css\";\nvar imageFiles = images + \"**/*\";\nvar libraryFiles = libraries + \"**/*.js\";\nvar jsFiles = js + \"**/*.js\"; // haven't built a task to process js yet\n\n// If you have a bunch of js library files and you want\n// to process them in a specific order\nvar librariesORDERED = [\n  // libraries + \"bootstrap.min.js\"\n  // libraries + \"bootstrap-hover.js\",\n  // libraries + \"nav-scroll.js\",\n  libraries + \"prism.js\"\n  // libraries + \"resizeSensor.js\",\n  // libraries + \"sticky-sidebar.js\",\n  // libraries + \"stick-sb.js\",\n  // libraries + \"skip-link-focus-fix.js\",\n];\n\n// If you have a bunch of css files and you want\n// to process them in a specific order\nvar cssORDERED = [\n  // css + \"bootstrap.min.css\",\n  css + \"sticky-footer.css\",\n  // css + \"all.css\",\n  css + \"prism.css\"\n  // css + \"style.css\",\n];\n\n// TASKS\n\n// The `clean` function is not exported so it can be considered a private task.\n// It can still be used within the `series()` composition.\nfunction clean() {\n  return del([\"./builds/\"]);\n}\n\n// Import you scss partial files into your style.scss file\n// then use this function to transpile you scss into css in the build folders\nfunction compileSCSS() {\n  return gulp\n    .src([scss + \"style.scss\"])\n    .pipe(sourcemaps.init({ loadMaps: true }))\n    .pipe(\n      sass({\n        outputStyle: \"expanded\"\n      })\n    )\n    .on(\"error\", sass.logError)\n    .pipe(autoprefixer(\"last 2 versions\"))\n    .pipe(sourcemaps.write())\n    .pipe(lineendingcorrector())\n    .pipe(gulp.dest(outputDir + \"/css/\"));\n}\n\n// If you have several css files from several libraries (like prism and bootstrap)\n// use this function to concat everything together in order\nfunction concatCSS() {\n  return gulp\n    .src(cssORDERED)\n    .pipe(sourcemaps.init({ loadMaps: true, largeFile: true }))\n    .pipe(concat(\"libraries.min.css\"))\n    .pipe(cleanCSS())\n    .pipe(sourcemaps.write(\"./maps/\"))\n    .pipe(lineendingcorrector())\n    .pipe(gulp.dest(outputDir + \"/css/\"));\n}\n\n// If you have several javascript files from several libraries (like prism and bootstrap)\n// use this function to concat everything together in order\nfunction concatLibraries() {\n  return gulp\n    .src(librariesORDERED)\n    .pipe(concat(\"libraries.js\"))\n    .pipe(uglify())\n    .pipe(lineendingcorrector())\n    .pipe(gulp.dest(outputDir + \"js/\"));\n}\n\n// image optimization\nfunction imgmin() {\n  return gulp\n    .src(images + \"/**/*\")\n    .pipe(changed(outputDir + \"/images/\"))\n    .pipe(\n      imagemin([\n        imagemin.gifsicle({ interlaced: true }),\n        imagemin.jpegtran({ progressive: true }),\n        imagemin.optipng({ optimizationLevel: 5 })\n      ])\n    )\n    .pipe(gulp.dest(outputDir + \"/images/\"));\n}\n\nfunction pugPages() {\n  return gulp\n    .src(pages + \"/**/*.pug\")\n    .pipe(pug())\n    .pipe(gulp.dest(outputDir));\n}\n\nfunction build() {\n  gulp.series(compileSCSS, concatCSS, concatLibraries, imgmin, jadePages);\n}\n\nfunction watch() {\n  browserSync.init({\n    server: {\n      baseDir: outputDir\n    },\n    open: \"external\"\n  });\n  gulp.watch(scssFiles, gulp.series([compileSCSS, concatCSS]));\n  gulp.watch(libraryFiles, concatLibraries);\n  gulp.watch(cssFiles, concatCSS);\n  gulp.watch(imageFiles, imgmin);\n  gulp.watch(pugTemplates, pugPages);\n  gulp.watch(pugIncludes, pugPages);\n  gulp.watch([outputDir]).on(\"change\", browserSync.reload);\n}\n\nfunction deploy(cb) {\n  gulp.src(\"./builds/development/**/*\").pipe(ghPages());\n  cb();\n}\n\n// gulp.task('deploy', function () {\n//   return gulp.src(\"./prod/**/*\")\n//     .pipe(ghPages({\n//       remoteUrl: \"https://github.com/your_github_username_here/your_github_username_here.github.io.git\",\n//       branch: \"master\"\n//     }))\n// });\n\nvar build = gulp.series(\n  compileSCSS,\n  concatCSS,\n  concatLibraries,\n  imgmin,\n  pugPages\n);\n\nexports.compileSCSS = compileSCSS;\nexports.concatCSS = concatCSS;\nexports.concatLibraries = concatLibraries;\nexports.watch = watch;\nexports.imgmin = imgmin;\nexports.pugPages = pugPages;\nexports.build = build;\nexports.deploy = deploy;\n\nvar develop = gulp.series(clean, build, watch);\n\ngulp.task(\"default\", develop);\n\n// Gulp tasks for processing js files\n// not yet converted from Gulp 3\n\n// Task from http://stackoverflow.com/a/28088306\n// gulp.task('js', function() {\n//     browserify('./src/js/main', { debug: true})\n//         .transform(to5ify)\n//         .bundle()\n//         .on('error', gutil.log.bind(gutil, 'Browserify Error'))\n//         .pipe(source('bundle.js'))\n//         .pipe(buffer())\n//         .pipe(sourcemaps.init({\n//             loadMaps: true\n//         })) // loads map from browserify file\n//         .pipe(uglify())\n//         .pipe(sourcemaps.write('./')) // writes .map file\n//         .pipe(gulp.dest('./builds/development/js'));\n// });\n\n// add write source maps as above\n// gulp.task('js', function() {\n//     browserify('./src/js/main', { debug: env === 'development'}).bundle()\n//         .pipe(source('bundle.js'))\n//         .pipe(streamify(gulpif(env === 'production', uglify())))\n//         .pipe(gulp.dest(outputDir + '/js'))\n//         .pipe(connect.reload());\n// });\n```\n\n## Links\n\n### Gulp\n\n[GulpJS](https://gulpjs.com/)\n\n[Gulp 4 Tutorial with Node JS, ImageMin, Browser Sync, SASS, SourceMaps, CleanCSS \u0026 More](https://www.youtube.com/watch?v=tTrPLQ6nOX8)\n\n### Jade\n\n[Jade Language - Node Template Engine](http://jade-lang.com/)\n\n[Baking Bootstrap Snippets with Jade](https://webdesign.tutsplus.com/tutorials/baking-bootstrap-snippets-with-jade--cms-22798)\n\n[Jade Syntax Documentation by example](https://naltatis.github.io/jade-syntax-docs/#mixin)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmerth%2Fgulp-4-web-workflow-with-pug-and-bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmerth%2Fgulp-4-web-workflow-with-pug-and-bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmerth%2Fgulp-4-web-workflow-with-pug-and-bootstrap/lists"}