├── .gitignore ├── lib ├── index.html ├── package.json ├── reset.css └── gulpfile.js ├── package.json ├── LICENSE ├── README.md └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | -------------------------------------------------------------------------------- /lib/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lib/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "", 6 | "devDependencies": { 7 | "gulp": "^3.9.0", 8 | "gulp-concat": "^2.6.0", 9 | "gulp-jshint": "^1.11.2", 10 | "gulp-rename": "^1.2.2", 11 | "gulp-minify-css": "^1.2.1", 12 | "gulp-uglify": "^1.4.1", 13 | "jshint-stylish": "^2.0.1", 14 | "browser-sync": "^2.9.3", 15 | "gulp-livereload": "^3.8.0", 16 | "gulp-plumber": "^1.0.1", 17 | "gulp-sass": "^2.0.4", 18 | "gulp-watch": "^4.3.5" 19 | }, 20 | "author": "", 21 | "license": "" 22 | } 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tempgen", 3 | "version": "0.2.0", 4 | "description": "A simple utility that allows users to create a blank website template with CSS reset, SASS reset. it also provides a live reload server.", 5 | "bin": { 6 | "tempgen": "./index.js" 7 | }, 8 | "scripts": { 9 | "test": "echo \"Error: no test specified\" && exit 1" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/sidthesloth92/website_template_generator.git" 14 | }, 15 | "keywords": [ 16 | "template", 17 | "website", 18 | "generator", 19 | "liverelaod" 20 | ], 21 | "author": "Dinesh Balaji (https://dbwriteups.wordpress.com)", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/sidthesloth92/website_template_generator/issues" 25 | }, 26 | "homepage": "https://github.com/sidthesloth92/website_template_generator#readme", 27 | "dependencies": { 28 | "colors": "^1.1.2", 29 | "commander": "^2.9.0", 30 | "prompt": "^0.2.14", 31 | "shelljs": "^0.5.3" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Dinesh Balaji 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /lib/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /lib/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | uglify = require('gulp-uglify'); //minifies js files 3 | jshint = require('gulp-jshint'); //validates js 4 | concat = require('gulp-concat'); //joins multiple files into one 5 | rename = require('gulp-rename'); //renames files 6 | 7 | sass = require('gulp-sass'); 8 | minifyCss = require('gulp-minify-css'); 9 | concat = require('gulp-concat'); 10 | rename = require('gulp-rename'); 11 | 12 | plumber = require('gulp-plumber'); 13 | 14 | browserSync = require('browser-sync').create(); 15 | reload = browserSync.reload; 16 | 17 | var JS_SRC = ['./js/**/*.js']; 18 | var SCSS_SRC = ['./scss/**/*.scss', './css/**/*.css']; 19 | var HTML_SRC = ['index.html']; 20 | 21 | gulp.task('js', function() { 22 | gulp.src(JS_SRC) 23 | .pipe(plumber()) 24 | .pipe(jshint()) 25 | .pipe(jshint.reporter('jshint-stylish')) 26 | .pipe(uglify()) 27 | .pipe(concat('main.js')) 28 | .pipe(rename({ 29 | basename: 'main', 30 | extname: '.js' 31 | })) 32 | .pipe(gulp.dest('js')); 33 | }); 34 | 35 | gulp.task('scss', function() { 36 | gulp.src(SCSS_SRC) 37 | .pipe(plumber()) 38 | .pipe(sass().on('error', sass.logError)) 39 | .pipe(minifyCss()) 40 | .pipe(concat('style.css')) 41 | .pipe(rename({ 42 | basename: 'style', 43 | extname: '.css' 44 | })) 45 | .pipe(gulp.dest('css')); 46 | }); 47 | 48 | 49 | gulp.task('serve', ['js', 'scss'], function() { 50 | browserSync.init({ 51 | server : { 52 | baseDir : './' 53 | } 54 | }); 55 | 56 | var scssWatch = gulp.watch(SCSS_SRC, ['scss']); 57 | scssWatch.on('change', reload); 58 | 59 | var jsWatch = gulp.watch(JS_SRC, ['js']); 60 | jsWatch.on('change', reload); 61 | 62 | gulp.watch(HTML_SRC, reload); 63 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### Website Template Generator (tempgen) 2 | 3 | Website Template Generator (tempgen) is a simple CLI (Command Line Interface) tool that creates a skeleton structure of a modern website. 4 | 5 | Features include: 6 | - an `index.html` page with boilerplate HTML 7 | - option to include *Eric Meyer's* CSS reset 8 | - option to choose between CSS and SASS/SCSS 9 | - option to choose live reload server 10 | 11 | The utility is cross platform compatible (Windows, OSX, Linux and any Unik like systems) 12 | 13 | ### Installation 14 | 15 | ##### Using NPM 16 | The utility is available in NPM and can be installed using the following command: 17 | 18 | ```sh 19 | sudo npm install tempgen 20 | ``` 21 | 22 | ### Description 23 | 24 | | Flag | Description | Required | 25 | | :--: | :---------- | :------: | 26 | | -w, -website-name | name of the folder to be generated | yes | 27 | | -r, --reset | specify this option to add reset. By default false | no | 28 | | -s, --sass | specify this option to add sass. If -r specified, sass will be added with reset. By default false | no | 29 | | -l, --live-reload | Specify this option to add live reload. By default false | no | 30 | 31 | ### Usage 32 | 33 | ```sh 34 | tempgen [-r | -s | -l ] -w|--website-name 35 | ``` 36 | 37 | ### Example 1: 38 | 39 | ##### Input 40 | 41 | ```sh 42 | tempgen -w mysite 43 | ``` 44 | 45 | ##### Output 46 | 47 | ``` 48 | mysite 49 | ├── css 50 | │ └── style.css 51 | ├── index.html 52 | └── js 53 | └── script.js 54 | ``` 55 | 56 | ### Example 2: 57 | 58 | ##### Input 59 | 60 | ```sh 61 | tempgen -s -r -w mysite 62 | ``` 63 | 64 | ##### Output 65 | ``` 66 | mysite 67 | ├── css 68 | │ └── style.css 69 | ├── index.html 70 | ├── js 71 | │ └── script.js 72 | └── scss 73 | ├── _reset.scss 74 | └── style.scss 75 | ``` 76 | 77 | ### Creating a site with live reload server 78 | 79 | ##### input 80 | ```sh 81 | tempgen -s -r -l -w mysite 82 | ``` 83 | ##### Output 84 | ``` 85 | mysite 86 | ├── css 87 | │ └── style.css 88 | ├── gulpfile.js 89 | ├── index.html 90 | ├── js 91 | │ └── script.js 92 | ├── package.json 93 | └── scss 94 | ├── _reset.scss 95 | └── style.scss 96 | ``` 97 | 98 | The live reload server uses gulp modules. So, you have to do an npm install to install the dependencies. 99 | 100 | ```sh 101 | sudo npm install 102 | ``` 103 | 104 | After which you can launch the live reload server by running the gulp task named serve. 105 | 106 | ```sh 107 | gulp serve 108 | ``` 109 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | 4 | var program = require('commander'); 5 | var shell = require('shelljs'); 6 | var colors = require('colors'); 7 | var prompt = require('prompt'); 8 | 9 | var LIB_LOCATION = '/usr/local/lib/node_modules/tempgen/lib/'; 10 | var RESET_FILE_LOCATION = LIB_LOCATION + 'reset.css'; 11 | var INDEX_FILE_LOCATION = LIB_LOCATION + 'index.html'; 12 | var GULP_FILE_LOCATION = LIB_LOCATION + 'gulpfile.js'; 13 | var GULP_PACKAGE_LOCATION = LIB_LOCATION + 'package.json'; 14 | 15 | 16 | init(); 17 | preProcess(); 18 | postProcess(); 19 | 20 | 21 | function preProcess() { 22 | 23 | program.version("0.1.0") 24 | .option('-w, --website-name [website-name]', 'name of the website folder to be generated, required') 25 | .option('-r, --reset', 'Specify this option to add reset. By default false.') 26 | .option('-s, --sass', 'Specify this option to add sass. If -r specified, sass reset will be added. By default false.') 27 | .option('-l, --live-reload', 'Specify this option to add live reload. By default false.') 28 | 29 | .parse(process.argv); 30 | 31 | //if -w option is not specified or if -w is specified without value 32 | if (!program.websiteName || (typeof program.websiteName == "boolean")) { 33 | console.log(colors.warn("option `-w, --website-name ' argument missing")); 34 | console.log(colors.error("PROCESS FAILED")); 35 | process.exit(1); 36 | } 37 | } 38 | 39 | function init() { 40 | colors.setTheme({ 41 | info: 'green', 42 | debug: 'blue', 43 | warn: 'yellow', 44 | error: 'red' 45 | }); 46 | } 47 | 48 | var reset; 49 | var sass; 50 | var liveReload; 51 | var websiteName; 52 | 53 | function postProcess() { 54 | reset = program.reset ? program.reset : false; 55 | sass = program.sass ? program.sass : false; 56 | liveReload = program.liveReload ? program.liveReload : false; 57 | websiteName = program.websiteName; 58 | 59 | console.log(colors.debug("Reset : " + reset)); 60 | console.log(colors.debug("SASS : " + sass)); 61 | console.log(colors.debug("Live Reload : " + liveReload)); 62 | console.log(colors.debug("Website name : " + websiteName)); 63 | 64 | 65 | if (shell.test('-e', websiteName)) { 66 | 67 | var schema = { 68 | properties: { 69 | 'choice': { 70 | required: true, 71 | pattern: /^[YynN]{1}$/, 72 | message: 'Only (Y|y) or (N|n) allowed' 73 | } 74 | } 75 | } 76 | 77 | console.log(colors.warn("Folder with name : '" + websiteName + "' already exists. Do you want to delete it and create a new one?(Y/N)")); 78 | prompt.start(); 79 | 80 | prompt.get(schema, function(error, result) { 81 | 82 | var choice = result.choice; 83 | 84 | if (choice.toLowerCase() == "y") { 85 | console.log("Deleting existing folder...") 86 | shell.rm('-rf', websiteName); 87 | buildBaseStructure(); 88 | } else { 89 | process.exit(2); 90 | } 91 | }); 92 | 93 | } else { 94 | buildBaseStructure(); 95 | } 96 | } 97 | 98 | 99 | function buildBaseStructure() { 100 | 101 | console.log("Creating base structure...") 102 | shell.mkdir(websiteName); 103 | shell.cd(websiteName); 104 | shell.mkdir('css'); 105 | shell.mkdir('js'); 106 | shell.cp(INDEX_FILE_LOCATION, './'); 107 | 108 | if (sass) { 109 | shell.mkdir('scss'); 110 | } 111 | 112 | 113 | shell.cd('js'); 114 | ''.to('script.js'); 115 | shell.cd('..'); 116 | 117 | if (liveReload) { 118 | console.log("Adding live reload...") 119 | shell.cp(GULP_FILE_LOCATION, './'); 120 | shell.cp(GULP_PACKAGE_LOCATION, './'); 121 | } 122 | 123 | buildCSS(); 124 | } 125 | 126 | 127 | function buildCSS() { 128 | 129 | if (sass) { 130 | console.log("Adding SASS...") 131 | shell.cd('scss'); 132 | 133 | if (reset) { 134 | shell.cp(RESET_FILE_LOCATION, '_reset.scss'); 135 | "@import 'reset';".to('style.scss'); 136 | } else { 137 | ''.to('style.scss'); 138 | } 139 | shell.cd('..'); 140 | } 141 | console.log("Adding CSS..."); 142 | shell.cd('css'); 143 | 144 | if (!sass && reset) { 145 | shell.cp(RESET_FILE_LOCATION, 'reset.css'); 146 | "@import url('reset.css');".to('style.css'); 147 | } else { 148 | ''.to('style.css'); 149 | } 150 | shell.cd('..'); 151 | 152 | console.log(colors.info("Website created successfully")); 153 | } 154 | --------------------------------------------------------------------------------