├── .gitignore ├── README.md ├── favicon.ico ├── gulpfile.babel.js ├── index.html ├── js └── custom.js ├── package.json ├── scripts.js ├── scss └── styles.scss └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | bun.lockb 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # A blank HTML5 template for experiments 2 | 3 | 1. Clone this repo to your local computer: 4 | 5 | ```shell 6 | $ git clone git@github.com:huijing/blank-html5.git 7 | ``` 8 | 9 | 2. Install the necessary packages for this repo: 10 | 11 | ```shell 12 | $ npm install 13 | ``` 14 | 15 | 3. Run **Gulp** to concatenate and compile files: 16 | 17 | ```shell 18 | $ gulp 19 | ``` 20 | 21 | - Global gulp command line utility is required via `npm install --global gulp-cli` 22 | - Styles go in the `styles.scss` file, and will be compiled by Gulp 23 | - Scripts go into the js folder, and will be concatenated by Gulp 24 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huijing/blank-html5/dc3306b781ea5d1ea4e515ef36fcec2ec16338fa/favicon.ico -------------------------------------------------------------------------------- /gulpfile.babel.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const browserSync = require("browser-sync"); 3 | const sass = require("@selfisekai/gulp-sass"); 4 | const postcss = require("gulp-postcss"); 5 | const autoprefixer = require("autoprefixer"); 6 | const cssnano = require("cssnano"); 7 | const concat = require("gulp-concat"); 8 | const uglify = require("gulp-uglify"); 9 | const babel = require("gulp-babel"); 10 | 11 | sass.compiler = require("sass"); 12 | 13 | const startServer = (done) => { 14 | browserSync.init({ 15 | server: "./", 16 | port: 2314, 17 | }); 18 | done(); 19 | }; 20 | 21 | const browserSyncReload = (done) => { 22 | browserSync.reload(); 23 | done(); 24 | }; 25 | 26 | const compileScripts = () => { 27 | return gulp 28 | .src("js/custom.js") 29 | .pipe( 30 | babel({ 31 | presets: ["@babel/preset-env"], 32 | }) 33 | ) 34 | .pipe(concat("scripts.js")) 35 | .pipe(gulp.dest("./")) 36 | .pipe(browserSync.reload({ stream: true })); 37 | }; 38 | 39 | const compileStyles = () => { 40 | const plugins = [autoprefixer(), cssnano()]; 41 | return gulp 42 | .src("scss/styles.scss") 43 | .pipe( 44 | sass({ 45 | includePaths: ["scss"], 46 | onError: browserSync.notify, 47 | }) 48 | ) 49 | .pipe(postcss(plugins)) 50 | .pipe(gulp.dest("./")) 51 | .pipe(browserSync.reload({ stream: true })); 52 | }; 53 | 54 | const watchMarkup = () => { 55 | gulp.watch(["index.html"], browserSyncReload); 56 | }; 57 | 58 | const watchScripts = () => { 59 | gulp.watch(["js/*.js"], compileScripts); 60 | }; 61 | 62 | const watchStyles = () => { 63 | gulp.watch(["scss/*.scss"], compileStyles); 64 | }; 65 | 66 | const compile = gulp.parallel(compileScripts, compileStyles); 67 | compile.description = "compile all sources"; 68 | 69 | // Not exposed to CLI 70 | const serve = gulp.series(compile, startServer); 71 | serve.description = "serve compiled source on local server at port 3000"; 72 | 73 | const watch = gulp.parallel(watchMarkup, watchScripts, watchStyles); 74 | watch.description = "watch for changes to all source"; 75 | 76 | const defaultTasks = gulp.parallel(serve, watch); 77 | 78 | export { 79 | compile, 80 | compileScripts, 81 | compileStyles, 82 | serve, 83 | watch, 84 | watchMarkup, 85 | watchScripts, 86 | watchStyles, 87 | }; 88 | 89 | export default defaultTasks; 90 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | HTML5 template 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /js/custom.js: -------------------------------------------------------------------------------- 1 | console.log("🦖 rawr"); 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "blank-html5", 3 | "version": "1.0.0", 4 | "description": "Blank HTML5 template for experiments", 5 | "main": "gulpfile.babel.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Chen Hui Jing", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "@babel/core": "^7.26.0", 13 | "@babel/preset-env": "^7.26.0", 14 | "@babel/register": "^7.25.9", 15 | "@selfisekai/gulp-sass": "^4.2.0", 16 | "autoprefixer": "^10.4.20", 17 | "browser-sync": "^3.0.3", 18 | "cssnano": "^7.0.6", 19 | "gulp": "^5.0.0", 20 | "gulp-babel": "^8.0.0", 21 | "gulp-concat": "^2.6.1", 22 | "gulp-postcss": "^10.0.0", 23 | "gulp-uglify": "^3.0.2", 24 | "postcss": "^8.4.49", 25 | "sass": "^1.83.0" 26 | }, 27 | "babel": { 28 | "presets": [ 29 | "@babel/preset-env" 30 | ] 31 | }, 32 | "browserslist": [ 33 | "defaults" 34 | ], 35 | "repository": { 36 | "type": "git", 37 | "url": "https://github.com/huijing/blank-html5.git" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /scripts.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("🦖 rawr"); -------------------------------------------------------------------------------- /scss/styles.scss: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | height: 100%; 4 | } 5 | 6 | *, 7 | *::before, 8 | *::after { 9 | box-sizing: inherit; 10 | margin: 0; 11 | padding: 0; 12 | } 13 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | html{box-sizing:border-box;height:100%}*,:after,:before{box-sizing:inherit;margin:0;padding:0} --------------------------------------------------------------------------------