├── .gitignore
├── app
    ├── scss
    │   ├── _colors.scss
    │   ├── style.scss
    │   ├── _typography.scss
    │   ├── _variables.scss
    │   └── _global.scss
    └── js
    │   ├── script.js
    │   └── _global.js
├── package.json
├── README.md
├── index.html
└── gulpfile.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/


--------------------------------------------------------------------------------
/app/scss/_colors.scss:
--------------------------------------------------------------------------------
1 | $white: #ffffff;
2 | $black: #000000;
3 | $dkGray: #303030;
4 | $ltGray: #cecece;


--------------------------------------------------------------------------------
/app/js/script.js:
--------------------------------------------------------------------------------
1 | console.log("Load script.js");
2 | 
3 | // Instantiating the global app object
4 | var app = {};
5 | 


--------------------------------------------------------------------------------
/app/scss/style.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 | @import "colors";
3 | @import "global";
4 | @import "typography";
5 | 


--------------------------------------------------------------------------------
/app/js/_global.js:
--------------------------------------------------------------------------------
 1 | // Global
 2 | app.global = {
 3 |     init: function(){ // Load all global functions here
 4 |         console.log("load global functions");
 5 |         app.global.loadHeader();
 6 |     },
 7 |     loadHeader: function(){ // Some specific function
 8 |         console.log("loadHeader()");
 9 |     }
10 | }
11 | 
12 | // Run the global stuff
13 | app.global.init();


--------------------------------------------------------------------------------
/app/scss/_typography.scss:
--------------------------------------------------------------------------------
 1 | h1, h2, h3 {
 2 |     font-weight: 700;
 3 |     margin-top: 0px;
 4 | }
 5 | 
 6 | h1 {
 7 |     font-size: 2rem;
 8 | 
 9 |     @media #{$mq-1000-up}{
10 |         font-size: 3rem;
11 |     }
12 | }
13 | 
14 | h2 {
15 |     font-size: 1.5rem;
16 | 
17 |     @media #{$mq-1000-up}{
18 |         font-size: 2rem;
19 |     }
20 | }
21 | 
22 | h3 {
23 |     font-size: 1.25rem;
24 | 
25 |     @media #{$mq-1000-up}{
26 |         font-size: 1.5rem;
27 |     }
28 | }


--------------------------------------------------------------------------------
/app/scss/_variables.scss:
--------------------------------------------------------------------------------
 1 | // Media Queries
 2 | $mq-620-down: "only screen and (max-width: 620px)";
 3 | $mq-620-up: "only screen and (min-width: 620px)";
 4 | 
 5 | $mq-760-down: "only screen and (max-width: 759px)";
 6 | $mq-760-up: "only screen and (min-width: 760px)";
 7 | 
 8 | $mq-900-down: "only screen and (max-width: 899px)";
 9 | $mq-900-up: "only screen and (min-width: 900px)";
10 | 
11 | $mq-1000-down: "only screen and (max-width: 999px)";
12 | $mq-1000-up: "only screen and (min-width: 1000px)";
13 | 
14 | $mq-1180-up: "only screen and (min-width: 1180px)";
15 | 
16 | $mq-1400-up: "only screen and (min-width: 1400px)";


--------------------------------------------------------------------------------
/app/scss/_global.scss:
--------------------------------------------------------------------------------
 1 | html {
 2 |     box-sizing: border-box;
 3 |     font-size: 100%;
 4 | }
 5 | 
 6 | *, *:before, *:after {
 7 |     box-sizing: inherit;   
 8 | }
 9 | 
10 | body {
11 |     padding: 20px;
12 |     background-color: $ltGray;
13 |     color: $black;
14 |     font-family: 'Roboto', sans-serif;
15 |     line-height: 1.3;
16 | 
17 |     @media #{$mq-1000-up}{
18 |         padding: 1.5rem;
19 |     }
20 | }
21 | 
22 | main {
23 |     padding: 20px;
24 |     background-color: $white;
25 |     border-radius: 15px;
26 |     max-width: 1200px;
27 |     margin: 0 auto;
28 | 
29 |     @media #{$mq-1000-up}{
30 |         display: flex;
31 |         padding: 1.5rem;
32 |     }
33 | }
34 | 
35 | .content {
36 |     
37 |     @media #{$mq-1000-up}{
38 |         flex: 3;
39 |     }
40 | }
41 | 
42 | aside {
43 | 
44 |     @media #{$mq-1000-up}{
45 |         flex: 1;
46 |     }
47 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "frontend-boilerplate",
 3 |   "version": "1.0.0",
 4 |   "description": "Simple front-end boilerplate using Gulp 4",
 5 |   "main": "gulpfile.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git+https://github.com/thecodercoder/frontend-boilerplate.git"
 9 |   },
10 |   "keywords": [
11 |     "gulp",
12 |     "boilerplate",
13 |     "html",
14 |     "css",
15 |     "javascript"
16 |   ],
17 |   "author": "@thecodercoder",
18 |   "license": "ISC",
19 |   "bugs": {
20 |     "url": "https://github.com/thecodercoder/frontend-boilerplate/issues"
21 |   },
22 |   "homepage": "https://github.com/thecodercoder/frontend-boilerplate#readme",
23 |   "devDependencies": {},
24 |   "dependencies": {
25 |     "autoprefixer": "^10.2.6",
26 |     "browser-sync": "^2.27.4",
27 |     "cssnano": "^5.0.6",
28 |     "gulp": "^4.0.2",
29 |     "gulp-concat": "^2.6.1",
30 |     "gulp-postcss": "^9.0.0",
31 |     "gulp-replace": "^1.1.3",
32 |     "gulp-sass": "^5.0.0",
33 |     "gulp-terser": "^2.0.1",
34 |     "postcss": "^8.3.5",
35 |     "sass": "^1.35.2"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Front-end Boilerplate using Sass and Gulp 4
 2 | 
 3 | Using a set of boilerplate files when you're starting a website project can be a huge time-saver. Instead of having to start from scratch or copy and paste from previous projects, you can get up and running in just a minute or two.
 4 | 
 5 | I wanted to share my own boilerplate that I use for simple front-end websites that use HTML, SCSS, and JavaScript. And I'm using Gulp 4 to compile, prefix, and minify my files.
 6 | 
 7 | I also wrote a rather detailed walkthrough on how to get up and running with Gulp 4, as well as migration tips from Gulp 3. 
 8 | 
 9 | You can read that on my blog [here](https://coder-coder.com/gulp-4-walk-through).
10 | 
11 | ## Quickstart guide
12 | 
13 | * Clone or download this Git repo onto your computer.
14 | * Install [Node.js](https://nodejs.org/en/) if you don't have it yet.
15 | * Run `npm install`
16 | * Run `gulp` to run the default Gulp task
17 | 
18 | In this proejct, Gulp is configured to run the following functions:
19 | 
20 | * Compile the SCSS files to CSS
21 | * Autoprefix and minify the CSS file
22 | * Concatenate the JS files
23 | * Uglify the JS files
24 | * Move final CSS and JS files to the `/dist` folder
25 |  
26 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en-US">
 3 |     <head>
 4 |         <!-- General meta tags needed-->
 5 |         <meta charset="utf-8">
 6 |         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 7 |         <!-- Needed for responsive design -->
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 9 |         <!-- If you want custom browser colors on mobile -->
10 |         <meta name="theme-color" content="#1843c1" />
11 |         <meta name="apple-mobile-web-app-status-bar-style" content="#1843c1">
12 | 
13 |         <title></title>
14 | 
15 |         <!-- Google Fonts -->
16 |         <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet"> 
17 |         
18 |         <!-- CSS File -->
19 |         <link rel="stylesheet" href="dist/style.css?cb=1572492103778">
20 |     </head>
21 |     <body>
22 | 
23 |         <main>
24 |             <section class="content">
25 |                 <h1>Front-end Boilerplate</h1>
26 |                 <h2>Using Sass and Gulp</h2>
27 | 
28 |                 <p>
29 |                     Here's a quick set-up guide:
30 |                 </p>
31 | 
32 |                 <ul>
33 |                     <li>Clone Git repo</li>
34 |                     <li>Install by running "npm install" on the commmand line</li>
35 |                     <li>Run "gulp" on the command line.</li>
36 |                 </ul>
37 | 
38 |             </section>
39 |             
40 |             <aside>
41 |                 <h3>Project Info</h3>
42 |                 <p>
43 |                     This is a starter front-end project which will compile SCSS and JS files using Gulp 4.
44 |                 </p>
45 |             </aside>
46 |             
47 |         </main>
48 | 
49 |         <!-- JavaScript File -->
50 |         <script src="dist/all.js?cb=1572492103778"></script>
51 |     </body>
52 | </html>


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
  1 | // Initialize modules
  2 | // Importing specific gulp API functions lets us write them below as series() instead of gulp.series()
  3 | const { src, dest, watch, series, parallel } = require('gulp');
  4 | // Importing all the Gulp-related packages we want to use
  5 | const sass = require('gulp-sass')(require('sass'));
  6 | const concat = require('gulp-concat');
  7 | const terser = require('gulp-terser');
  8 | const postcss = require('gulp-postcss');
  9 | const autoprefixer = require('autoprefixer');
 10 | const cssnano = require('cssnano');
 11 | const replace = require('gulp-replace');
 12 | const browsersync = require('browser-sync').create();
 13 | 
 14 | // File paths
 15 | const files = {
 16 | 	scssPath: 'app/scss/**/*.scss',
 17 | 	jsPath: 'app/js/**/*.js',
 18 | };
 19 | 
 20 | // Sass task: compiles the style.scss file into style.css
 21 | function scssTask() {
 22 | 	return src(files.scssPath, { sourcemaps: true }) // set source and turn on sourcemaps
 23 | 		.pipe(sass()) // compile SCSS to CSS
 24 | 		.pipe(postcss([autoprefixer(), cssnano()])) // PostCSS plugins
 25 | 		.pipe(dest('dist', { sourcemaps: '.' })); // put final CSS in dist folder with sourcemap
 26 | }
 27 | 
 28 | // JS task: concatenates and uglifies JS files to script.js
 29 | function jsTask() {
 30 | 	return src(
 31 | 		[
 32 | 			files.jsPath,
 33 | 			//,'!' + 'includes/js/jquery.min.js', // to exclude any specific files
 34 | 		],
 35 | 		{ sourcemaps: true }
 36 | 	)
 37 | 		.pipe(concat('all.js'))
 38 | 		.pipe(terser())
 39 | 		.pipe(dest('dist', { sourcemaps: '.' }));
 40 | }
 41 | 
 42 | // Cachebust
 43 | function cacheBustTask() {
 44 | 	var cbString = new Date().getTime();
 45 | 	return src(['index.html'])
 46 | 		.pipe(replace(/cb=\d+/g, 'cb=' + cbString))
 47 | 		.pipe(dest('.'));
 48 | }
 49 | 
 50 | // Browsersync to spin up a local server
 51 | function browserSyncServe(cb) {
 52 | 	// initializes browsersync server
 53 | 	browsersync.init({
 54 | 		server: {
 55 | 			baseDir: '.',
 56 | 		},
 57 | 		notify: {
 58 | 			styles: {
 59 | 				top: 'auto',
 60 | 				bottom: '0',
 61 | 			},
 62 | 		},
 63 | 	});
 64 | 	cb();
 65 | }
 66 | function browserSyncReload(cb) {
 67 | 	// reloads browsersync server
 68 | 	browsersync.reload();
 69 | 	cb();
 70 | }
 71 | 
 72 | // Watch task: watch SCSS and JS files for changes
 73 | // If any change, run scss and js tasks simultaneously
 74 | function watchTask() {
 75 | 	watch(
 76 | 		[files.scssPath, files.jsPath],
 77 | 		{ interval: 1000, usePolling: true }, //Makes docker work
 78 | 		series(parallel(scssTask, jsTask), cacheBustTask)
 79 | 	);
 80 | }
 81 | 
 82 | // Browsersync Watch task
 83 | // Watch HTML file for change and reload browsersync server
 84 | // watch SCSS and JS files for changes, run scss and js tasks simultaneously and update browsersync
 85 | function bsWatchTask() {
 86 | 	watch('index.html', browserSyncReload);
 87 | 	watch(
 88 | 		[files.scssPath, files.jsPath],
 89 | 		{ interval: 1000, usePolling: true }, //Makes docker work
 90 | 		series(parallel(scssTask, jsTask), cacheBustTask, browserSyncReload)
 91 | 	);
 92 | }
 93 | 
 94 | // Export the default Gulp task so it can be run
 95 | // Runs the scss and js tasks simultaneously
 96 | // then runs cacheBust, then watch task
 97 | exports.default = series(parallel(scssTask, jsTask), cacheBustTask, watchTask);
 98 | 
 99 | // Runs all of the above but also spins up a local Browsersync server
100 | // Run by typing in "gulp bs" on the command line
101 | exports.bs = series(
102 | 	parallel(scssTask, jsTask),
103 | 	cacheBustTask,
104 | 	browserSyncServe,
105 | 	bsWatchTask
106 | );
107 | 


--------------------------------------------------------------------------------