├── .babelrc ├── .gitignore ├── .prettierrc ├── assets ├── js │ └── main.js ├── layouts │ └── layout.pug ├── pages │ └── index.pug ├── partials │ └── head.pug └── scss │ ├── _dope.scss │ └── main.scss ├── bin └── dypsy.js ├── config.js ├── gulpfile.js ├── index.js ├── lib ├── frameworkLogo.js ├── tasks │ ├── browserSync.js │ ├── build.js │ ├── dev.js │ ├── oldfile.js │ ├── pug.js │ ├── sass.js │ └── watch.js └── tools │ └── watcher.js ├── package-lock.json ├── package.json ├── public ├── dist │ └── css │ │ └── main.css ├── index.html └── main.css └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/env", 5 | { 6 | "targets": { 7 | "edge": "17", 8 | "firefox": "60", 9 | "chrome": "67", 10 | "safari": "11.1" 11 | } 12 | } 13 | ], 14 | "@babel/preset-react" 15 | ], 16 | "plugins": [ 17 | [ 18 | "@babel/plugin-proposal-decorators", 19 | { 20 | "legacy": true 21 | } 22 | ], 23 | [ 24 | "@babel/plugin-proposal-class-properties", 25 | { 26 | "loose": true 27 | } 28 | ], 29 | "@babel/plugin-syntax-dynamic-import", 30 | "@babel/plugin-transform-async-to-generator" 31 | ] 32 | } 33 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "printWidth": 80, 4 | "tabWidth": 2, 5 | "singleQuote": true, 6 | "trailingComma": "none", 7 | "jsxBracketSameLine": false, 8 | "parser": "babylon", 9 | "noSemi": true, 10 | "rcVerbose": true 11 | } 12 | -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | const printName = name => { 2 | return name; 3 | }; 4 | 5 | console.log(printName('Joe')); 6 | -------------------------------------------------------------------------------- /assets/layouts/layout.pug: -------------------------------------------------------------------------------- 1 | //- layout.pug 2 | html 3 | head 4 | title My Site - #{title} 5 | block scripts 6 | script(src='/jquery.js') 7 | body 8 | block content 9 | block foot 10 | #footer 11 | p some footer content 12 | -------------------------------------------------------------------------------- /assets/pages/index.pug: -------------------------------------------------------------------------------- 1 | extends ../layouts/layout.pug 2 | 3 | block scripts 4 | script(src='/jquery.js') 5 | script(src='/pets.js') 6 | 7 | block content 8 | 9 | p swag 10 | div swag 11 | -------------------------------------------------------------------------------- /assets/partials/head.pug: -------------------------------------------------------------------------------- 1 | meta(charset='UTF-8') 2 | title title 3 | meta(name='description', content='<%= page.description || site.description %>') 4 | meta(name='viewport', content='width=device-width, initial-scale=1') 5 | meta(name='theme-color', content='#157878') 6 | link(href='https://fonts.googleapis.com/css?family=Open+Sans:400,700', rel='stylesheet', type='text/css') 7 | link(rel='stylesheet', href='<%= site.basePath %>/assets/css/styles.css') 8 | -------------------------------------------------------------------------------- /assets/scss/_dope.scss: -------------------------------------------------------------------------------- 1 | #header { 2 | background: black; 3 | color: red; 4 | } -------------------------------------------------------------------------------- /assets/scss/main.scss: -------------------------------------------------------------------------------- 1 | @import "dope"; 2 | 3 | body { 4 | background: red; 5 | color: white; 6 | 7 | div { 8 | color: white; 9 | } 10 | 11 | #test { 12 | background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); 13 | } 14 | } -------------------------------------------------------------------------------- /bin/dypsy.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | 'use strict'; 4 | 5 | require('../')(); 6 | -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | // const projects = require('./assets/data/projects'); 2 | var projectLocation = process.cwd(); 3 | const config = `${projectLocation}/config.js`; 4 | 5 | module.exports = { 6 | site: { 7 | title: 'DYPSY', 8 | description: 'A simple static site generator', 9 | basePath: process.env.NODE_ENV === 'production' ? '/public' : '' 10 | }, 11 | build: { 12 | sass: { 13 | src: `${projectLocation}/assets/scss`, 14 | destination: `${projectLocation}/public/dist/css` 15 | }, 16 | pug: { 17 | src: `${projectLocation}/assets/pages`, 18 | destination: `${projectLocation}/public` 19 | }, 20 | browserSync: { 21 | src: `${projectLocation}/public` 22 | }, 23 | outputPath: process.env.NODE_ENV === 'production' ? './docs' : './public' 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const sass = require('gulp-sass'); 3 | const autoprefixer = require('gulp-autoprefixer'); 4 | const browserSync = require('browser-sync'); 5 | const reload = browserSync.reload; 6 | var exec = require('child_process').exec; 7 | const chalk = require('chalk'); 8 | 9 | gulp.task('default', ['webpack', 'styles', 'pages'], () => { 10 | gulp.watch('./assets/scss/**/*', ['styles']); 11 | gulp.watch('./assets/js/**/*', ['webpack']); 12 | gulp 13 | .watch([ 14 | './public/**/*', 15 | './public/*', 16 | '!public/js/**/.#*js', 17 | '!public/css/**/.#*css' 18 | ]) 19 | .on('change', reload); 20 | }); 21 | 22 | gulp.task('watch-proxy', ['webpack', 'styles', 'browser-sync-proxy'], () => { 23 | gulp.watch('./assets/scss/**/*', ['styles']); 24 | gulp.watch('./assets/js/**/*', ['webpack']); 25 | gulp 26 | .watch([ 27 | './public/**/*', 28 | './public/*', 29 | '!public/js/**/.#*js', 30 | '!public/css/**/.#*css' 31 | ]) 32 | .on('change', reload); 33 | }); 34 | 35 | gulp.task('styles', () => { 36 | gulp 37 | .src('assets/scss/**/*.scss') 38 | .pipe( 39 | sass({ 40 | outputStyle: 'compressed' 41 | }).on('error', sass.logError) 42 | ) 43 | .pipe( 44 | autoprefixer({ 45 | browsers: ['last 2 versions'] 46 | }) 47 | ) 48 | .pipe(gulp.dest('./public/css')) 49 | .pipe(browserSync.stream()); 50 | }); 51 | 52 | gulp.task('browser-sync', function() { 53 | browserSync.init({ 54 | server: './public', 55 | notify: false, 56 | open: false //change this to true if you want the broser to open automatically 57 | }); 58 | }); 59 | 60 | gulp.task('pages', cb => { 61 | exec('npm run build', function(err, stdout, stderr) { 62 | console.log(stdout); 63 | console.log(stderr); 64 | cb(err); 65 | }); 66 | }); 67 | 68 | gulp.task('webpack', cb => { 69 | exec('npm run dev:webpack', function(err, stdout, stderr) { 70 | console.log(stdout); 71 | console.log(stderr); 72 | cb(err); 73 | }); 74 | }); 75 | 76 | gulp.task('build', ['styles'], cb => { 77 | exec('npm run build:webpack', function(err, stdout, stderr) { 78 | console.log(stdout); 79 | console.log(stderr); 80 | cb(err); 81 | }); 82 | }); 83 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const chalk = require('chalk'); 2 | const frameworkLogo = require('./lib/frameworkLogo'); 3 | const commander = require('commander'); 4 | const buildAllTasks = require('./lib/tasks/build.js'); 5 | const watchTasks = require('./lib/tasks/watch.js'); 6 | const devTasks = require('./lib/tasks/dev.js'); 7 | 8 | module.exports = () => { 9 | commander 10 | .version('1.0.0') 11 | .option('build', 'Build Static Site') 12 | .option('watcher', 'Watching Files') 13 | .option('dev', 'Development mode') 14 | .parse(process.argv); 15 | 16 | if (commander.build) { 17 | // console.log(chalk.hex('#38ff34').bold(frameworkLogo)); 18 | console.log( 19 | chalk.blue(`Started Building... 20 | `) 21 | ); 22 | buildAllTasks(); 23 | } 24 | if (commander.watcher) { 25 | console.log( 26 | chalk.blue(`Watching Files... 27 | `) 28 | ); 29 | watchTasks(); 30 | } 31 | if (commander.dev) { 32 | console.log( 33 | chalk.blue(`Watching Files... 34 | `) 35 | ); 36 | devTasks(); 37 | } 38 | 39 | console.log('Welcome to dypsy!'); 40 | }; 41 | -------------------------------------------------------------------------------- /lib/frameworkLogo.js: -------------------------------------------------------------------------------- 1 | module.exports = ` 2 | ██████╗ ██╗ ██╗██████╗ ███████╗██╗ ██╗ 3 | ██╔══██╗╚██╗ ██╔╝██╔══██╗██╔════╝╚██╗ ██╔╝ 4 | ██║ ██║ ╚████╔╝ ██████╔╝███████╗ ╚████╔╝ 5 | ██║ ██║ ╚██╔╝ ██╔═══╝ ╚════██║ ╚██╔╝ 6 | ██████╔╝ ██║ ██║ ███████║ ██║ 7 | ╚═════╝ ╚═╝ ╚═╝ ╚══════╝ ╚═╝ 8 | 9 | 10 | .-. 11 | | | 12 | | | 13 | | | 14 | ..--" "--.. 15 | .' .-'" "'-. '. 16 | .-. / .' '. \ .-. 17 | ||\'/ / __ __ \ \'/|| 18 | || '|| /()| |()\ ||' || 19 | \\ || '--' '--' || // 20 | \\_\ \ Y / /_// 21 | '--'.'. \--^--/ .'.'--' 22 | > '-'._.'-' < 23 | .' '. 24 | '-._________.-' hjw 25 | 26 | ` 27 | ; 28 | -------------------------------------------------------------------------------- /lib/tasks/browserSync.js: -------------------------------------------------------------------------------- 1 | const browserSync = require('browser-sync'); 2 | const reload = browserSync.reload; 3 | module.exports = () => { 4 | browserSync.init({ 5 | server: './public', 6 | notify: false, 7 | open: false //change this to true if you want the broser to open automatically 8 | }); 9 | }; 10 | -------------------------------------------------------------------------------- /lib/tasks/build.js: -------------------------------------------------------------------------------- 1 | const pugTask = require('./pug.js'); 2 | const sassTask = require('./sass.js'); 3 | const browserSyncTask = require('./sass.js'); 4 | module.exports = () => { 5 | pugTask(); 6 | sassTask(); 7 | // browserSyncTask(); 8 | }; 9 | -------------------------------------------------------------------------------- /lib/tasks/dev.js: -------------------------------------------------------------------------------- 1 | const pugTask = require('./pug.js'); 2 | const sassTask = require('./sass.js'); 3 | const browserSyncTask = require('./browserSync.js'); 4 | const watcher = require('../tools/watcher.js'); 5 | var projectLocation = process.cwd(); 6 | const config = require(`${projectLocation}/config.js`); 7 | 8 | module.exports = () => { 9 | // watcher(config.build.pug.src, pugTask); 10 | // watcher(config.build.sass.src, sassTask); 11 | watcher(config.build.sass.src, browserSyncTask); 12 | }; 13 | -------------------------------------------------------------------------------- /lib/tasks/oldfile.js: -------------------------------------------------------------------------------- 1 | const fse = require('fs-extra'); 2 | const path = require('path'); 3 | const ejs = require('ejs'); 4 | const marked = require('marked'); 5 | const frontMatter = require('front-matter'); 6 | const glob = require('glob'); 7 | const config = require('../config'); 8 | const pug = require('pug'); 9 | const chalk = require('chalk'); 10 | const frameworkLogo = require('./frameworkLogo'); 11 | const pugTask = require('./tasks/pug.js'); 12 | const commander = require('commander'); 13 | 14 | commander 15 | .version('0.1.0') 16 | .option('-b, --build', 'Build Static Site') 17 | .parse(process.argv); 18 | if (commander.peppers) { 19 | console.log('pressed p'); 20 | } 21 | console.log( 22 | chalk.blue(`Started Building... 23 | `) 24 | ); 25 | pugTask('./assets', './public'); 26 | console.log(chalk.hex('#38ff34').bold(frameworkLogo)); 27 | // clear destination folder 28 | // fse.emptyDirSync(distPath); 29 | 30 | // copy assets folder 31 | // fse.copy(`${srcPath}/assets`, `${distPath}/assets`) 32 | 33 | // // read pages 34 | // const files = glob.sync('**/*.@(md|ejs|html|pug)', { cwd: `${srcPath}/pages` }); 35 | // 36 | // files.forEach((file, i) => { 37 | // const fileData = path.parse(file); 38 | // const destPath = path.join(distPath, fileData.dir); 39 | // console.log(fileData.base); 40 | // // create destination directory 41 | // fse.mkdirsSync(destPath); 42 | // 43 | // // read page file 44 | // const data = fse.readFileSync(`${srcPath}/pages/${file}`, 'utf-8'); 45 | // 46 | // // render page 47 | // const pageData = frontMatter(data); 48 | // 49 | // let pageContent; 50 | // let completePage; 51 | // 52 | // // generate page content according to file type 53 | // switch (fileData.ext) { 54 | // case '.md': 55 | // pageContent = marked(pageData.body); 56 | // break; 57 | // case '.ejs': 58 | // const templateConfig = Object.assign({}, config, { 59 | // page: pageData.attributes 60 | // }); 61 | // pageContent = ejs.render(pageData.body, templateConfig, { 62 | // filename: `${srcPath}/pages/${file}` 63 | // }); 64 | // // render layout with page contents 65 | // const layout = pageData.attributes.layout || 'default'; 66 | // const layoutFileName = `${srcPath}/pages/layouts/${layout}.ejs`; 67 | // const layoutData = fse.readFileSync(layoutFileName, 'utf-8'); 68 | // completePage = ejs.render( 69 | // layoutData, 70 | // Object.assign({}, templateConfig, { 71 | // body: pageContent, 72 | // filename: layoutFileName 73 | // }) 74 | // ); 75 | // 76 | // break; 77 | // case '.pug': 78 | // var fn = pug.compile(data, { 79 | // filename: `${srcPath}/pages/${fileData.name}`, 80 | // pretty: true 81 | // })({ 82 | // pageTitle: 'Joes' 83 | // }); 84 | // completePage = fn; 85 | // break; 86 | // default: 87 | // pageContent = pageData.body; 88 | // } 89 | // // save the html file 90 | // fse.writeFileSync(`${destPath}/${fileData.name}.html`, completePage); 91 | // }); 92 | // 93 | // console.log(chalk.hex('#38ff34').bold(frameworkLogo)); 94 | // console.log(chalk.green.bold('Completed...')); 95 | -------------------------------------------------------------------------------- /lib/tasks/pug.js: -------------------------------------------------------------------------------- 1 | const fse = require('fs-extra'); 2 | const path = require('path'); 3 | const glob = require('glob'); 4 | const pug = require('pug'); 5 | const chalk = require('chalk'); 6 | var projectLocation = process.cwd(); 7 | const config = require(`${projectLocation}/config.js`); 8 | 9 | // console.log(config); 10 | module.exports = () => { 11 | const srcPath = config.build.pug.src; 12 | const distPath = config.build.pug.destination; 13 | // read pages 14 | const files = glob.sync('**/*.@(pug)', { 15 | cwd: `${srcPath}` 16 | }); 17 | 18 | files.forEach((file, i) => { 19 | const fileData = path.parse(file); 20 | const destPath = path.join(distPath, fileData.dir); 21 | console.log(fileData.base); 22 | // create destination directory 23 | fse.mkdirsSync(destPath); 24 | 25 | // read page file 26 | const data = fse.readFileSync(`${srcPath}/${file}`, 'utf-8'); 27 | 28 | // render page 29 | let pageContent; 30 | let completePage; 31 | 32 | // generate page content according to file type 33 | switch (fileData.ext) { 34 | case '.pug': 35 | var fn = pug.compile(data, { 36 | filename: `${srcPath}/${fileData.name}`, 37 | pretty: true 38 | })({ 39 | pageTitle: 'Joes' 40 | }); 41 | completePage = fn; 42 | break; 43 | default: 44 | pageContent = pageData.body; 45 | } 46 | // save the html file 47 | fse.writeFileSync(`${destPath}/${fileData.name}.html`, completePage); 48 | }); 49 | 50 | console.log(chalk.green.bold('Completed...')); 51 | }; 52 | -------------------------------------------------------------------------------- /lib/tasks/sass.js: -------------------------------------------------------------------------------- 1 | const fse = require('fs-extra'); 2 | const path = require('path'); 3 | const glob = require('glob'); 4 | const pug = require('pug'); 5 | const sass = require('node-sass'); 6 | const chalk = require('chalk'); 7 | var projectLocation = process.cwd(); 8 | const config = require(`${projectLocation}/config.js`); 9 | const autoprefixer = require('autoprefixer'); 10 | const postcss = require('postcss'); 11 | 12 | module.exports = () => { 13 | const srcPath = config.build.sass.src; 14 | const distPath = config.build.sass.destination; 15 | 16 | // read pages 17 | const files = glob.sync('**/[!exclude_]*.@(scss)', { 18 | cwd: `${srcPath}` 19 | }); 20 | let pageContent; 21 | let completePage; 22 | 23 | files.forEach((file, i) => { 24 | const fileData = path.parse(file); 25 | const destPath = path.join(distPath, fileData.dir); 26 | // console.log(fileData.base); 27 | // create destination directory 28 | // fse.mkdirsSync(destPath); 29 | console.log(file); 30 | sass.render( 31 | { 32 | file: `${srcPath}/${file}`, 33 | includePaths: [`${srcPath}`], 34 | outFile: `${distPath}/${fileData.name}`, 35 | outputStyle: 'compressed' 36 | }, 37 | function(err, result) { 38 | const css = result.css.toString(); 39 | if (!err) { 40 | postcss([autoprefixer]) 41 | .process(css, { 42 | from: `${srcPath}/${file}`, 43 | to: `${distPath}/${fileData.name}` 44 | }) 45 | .then(function(result) { 46 | result.warnings().forEach(function(warn) { 47 | console.warn(warn.toString()); 48 | }); 49 | fse.writeFileSync(`${destPath}/${fileData.name}.css`, result.css); 50 | }); 51 | } else { 52 | console.log(chalk.red.bold(err)); 53 | } 54 | } 55 | ); 56 | }); 57 | 58 | console.log(chalk.green.bold('Completed...')); 59 | }; 60 | -------------------------------------------------------------------------------- /lib/tasks/watch.js: -------------------------------------------------------------------------------- 1 | const pugTask = require('./pug.js'); 2 | const sassTask = require('./sass.js'); 3 | const browserSyncTask = require('./sass.js'); 4 | const watcher = require('../tools/watcher.js'); 5 | var projectLocation = process.cwd(); 6 | const config = require(`${projectLocation}/config.js`); 7 | 8 | module.exports = () => { 9 | watcher(config.build.pug.src, pugTask); 10 | watcher(config.build.sass.src, sassTask); 11 | // watcher(config.build.sass.src, sassTalk); 12 | }; 13 | -------------------------------------------------------------------------------- /lib/tools/watcher.js: -------------------------------------------------------------------------------- 1 | const chokidar = require('chokidar'); 2 | const browserSync = require('browser-sync'); 3 | const reload = browserSync.reload; 4 | module.exports = (directory, task) => { 5 | // Initialize watcher. 6 | var watcher = chokidar.watch(directory, { 7 | ignored: /(^|[\/\\])\../, 8 | persistent: true 9 | }); 10 | 11 | // Something to use when events are received. 12 | // var log = console.log.bind(console); 13 | watcher 14 | .on('add', path => { 15 | task(); 16 | // log(`File ${path} has been added`); 17 | }) 18 | .on('change', path => { 19 | // watcher(config.build.sass.src, sassTask); 20 | task(); 21 | // console.log(`File ${path} has been changed`); 22 | }) 23 | .on('unlink', path => { 24 | task(); 25 | // console.log(`File ${path} has been removed`); 26 | }); 27 | // chokidar.watch('assets/scss/**/*.scss', config); 28 | }; 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cp-jam", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "lib/index.js", 6 | "bin": { 7 | "dypsy": "bin/dypsy.js" 8 | }, 9 | "engines": { 10 | "node": ">=8" 11 | }, 12 | "preferGlobal": true, 13 | "scripts": { 14 | "build": "node lib/index.js", 15 | "dev:webpack": "webpack --mode development --env.NODE_ENV=dev", 16 | "build:webpack": "webpack --mode production --env.NODE_ENV=production", 17 | "watch": "gulp", 18 | "proxy": "gulp watch-proxy" 19 | }, 20 | "author": "", 21 | "license": "ISC", 22 | "dependencies": { 23 | "chalk": "^2.4.2", 24 | "chokidar": "^2.1.1", 25 | "commander": "^2.19.0", 26 | "ejs": "^2.6.1", 27 | "front-matter": "^3.0.1", 28 | "fs-extra": "^7.0.1", 29 | "glob": "^7.1.3", 30 | "marked": "^0.6.0", 31 | "pug": "^2.0.3" 32 | }, 33 | "devDependencies": { 34 | "@babel/core": "^7.1.5", 35 | "@babel/plugin-proposal-class-properties": "^7.1.0", 36 | "@babel/plugin-proposal-decorators": "^7.1.6", 37 | "@babel/plugin-syntax-dynamic-import": "^7.0.0", 38 | "@babel/plugin-transform-async-to-generator": "^7.1.0", 39 | "@babel/preset-env": "^7.1.5", 40 | "@babel/preset-es2016": "^7.0.0-beta.53", 41 | "@babel/preset-react": "^7.0.0", 42 | "@babel/preset-stage-0": "^7.0.0", 43 | "@babel/register": "^7.0.0", 44 | "autoprefixer": "^9.3.1", 45 | "axios": "^0.18.0", 46 | "babel-core": "^6.26.3", 47 | "babel-loader": "^8.0.4", 48 | "babel-preset-env": "^1.7.0", 49 | "browser-sync": "^2.26.3", 50 | "clean-webpack-plugin": "^0.1.19", 51 | "css-loader": "^1.0.1", 52 | "extract-text-webpack-plugin": "^4.0.0-beta.0", 53 | "gulp": "^3.9.1", 54 | "gulp-autoprefixer": "^3.1.1", 55 | "gulp-sass": "^3.0.0", 56 | "har-validator": "^5.1.3", 57 | "html-webpack-plugin": "^3.2.0", 58 | "mini-css-extract-plugin": "^0.4.4", 59 | "node-sass": "^4.11.0", 60 | "postcss-loader": "^3.0.0", 61 | "prettier": "^1.15.1", 62 | "prettier-loader": "^2.1.1", 63 | "react": "^16.6.1", 64 | "react-dom": "^16.6.1", 65 | "react-redux": "^5.1.0", 66 | "sass-loader": "^7.1.0", 67 | "style-loader": "^0.23.1", 68 | "uglify-es": "^3.3.9", 69 | "uglifyjs-webpack-plugin": "^1.3.0", 70 | "webpack": "^4.25.1", 71 | "webpack-cli": "^3.1.2", 72 | "webpack-dev-server": "^3.1.14", 73 | "webpack-md5-hash": "0.0.6" 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /public/dist/css/main.css: -------------------------------------------------------------------------------- 1 | #header{background:black;color:red}body{background:red;color:white}body div{color:white}body #test{background:-moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%)} 2 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | My Site - 5 | 6 | 7 | 8 | 9 |

dip

10 |

swag

11 |
swag
12 | 15 | 16 | -------------------------------------------------------------------------------- /public/main.css: -------------------------------------------------------------------------------- 1 | #header{background:black;color:red}body{background:purple}body div{color:white}body #test{background:-moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%)} 2 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const WebpackMd5Hash = require('webpack-md5-hash'); 4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 5 | const CleanWebpackPlugin = require('clean-webpack-plugin'); 6 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 7 | const UglifyJS = require('uglify-es'); 8 | 9 | const DefaultUglifyJsOptions = UglifyJS.default_options(); 10 | const compress = DefaultUglifyJsOptions.compress; 11 | for (let compressOption in compress) { 12 | compress[compressOption] = false; 13 | } 14 | compress.unused = true; 15 | 16 | module.exports = env => { 17 | return { 18 | entry: { 19 | main: './assets/js/main.js' 20 | }, 21 | output: { 22 | path: path.resolve(__dirname, 'public/js/dist'), 23 | filename: '[name].js' // '[name].[chunkhash].js' put this if you want to get hashed files to cache bust 24 | }, 25 | module: { 26 | rules: [ 27 | { 28 | test: /\.js$/, 29 | exclude: /node_modules/, 30 | use: ['babel-loader', 'prettier-loader'] 31 | }, 32 | { 33 | test: /\.scss$/, 34 | use: [ 35 | 'style-loader', 36 | MiniCssExtractPlugin.loader, 37 | 'css-loader', 38 | 'sass-loader', 39 | 'postcss-loader' 40 | ] 41 | } 42 | ] 43 | }, 44 | plugins: [ 45 | new CleanWebpackPlugin('public/js/dist', {}), 46 | new MiniCssExtractPlugin({ 47 | filename: 'styles.css' // 'style.[contenthash].css' put this if you want to get hashed files to cache bust 48 | }), 49 | // new HtmlWebpackPlugin({ 50 | // inject: false, 51 | // hash: true, 52 | // template: './assets/index.html', 53 | // children: false, 54 | // filename: '../index.html' 55 | // }), 56 | new WebpackMd5Hash() 57 | ], 58 | optimization: { 59 | splitChunks: { 60 | chunks: 'all', 61 | minSize: 0 62 | }, 63 | minimize: true, 64 | minimizer: [ 65 | new UglifyJsPlugin({ 66 | uglifyOptions: { 67 | compress, 68 | mangle: false, 69 | output: { 70 | beautify: env.NODE_ENV !== 'production' ? true : false 71 | } 72 | } 73 | }) 74 | ], 75 | usedExports: true, 76 | sideEffects: true 77 | } 78 | }; 79 | }; 80 | --------------------------------------------------------------------------------