diff --git a/LICENSE b/LICENSE index e6fc578..8e33ee4 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2017 AtomicPages LLC +Copyright (c) 2020 Dennis Thompson Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 8ed198a..ad05ba3 100644 --- a/README.md +++ b/README.md @@ -1,102 +1,108 @@ -Semantic UI & Webpack 2 Boilerplate -======================================= +# Semantic UI & Webpack Boilerplate After spending a few days on this issue, I decided to create a boilerplate so other developers don't run into the same issues I did when trying to add Semantic UI to a project of my own. -### How to Use -1. Clone the repo -2. Install dependencies via `npm` - * **Note:** `yarn` users will encounter issues installing `semantic-ui` source, if this occurs kill the process and run: +## How to Use +1. Clone the repo +2. Install dependencies via `npm` - ~~~bash - npm i semantic-ui - ~~~ + - **Note:** `yarn` users will encounter issues installing `semantic-ui` source, if this occurs kill the process and run: -3. Run the font path fix. - * Run `node font-fix.js` from the command line - * There is an incorrect transformation that occurs whith the relative paths when using webpack, we need to run this any time we update/install semantic-ui - If you don't care about semantic-ui bundled fonts, then **do not** run this font fix command; amend your webpack config as follows: + ```sh + npm i semantic-ui + ``` - +3. Run the font path fix. - ~~~js - { - test: /\.less$/, // import css from 'foo.less'; - use: [ - 'style-loader', - { - loader: 'css-loader', - options: { url: false } - }, - 'less-loader' - ] - } - ~~~ + - Run `node font-fix.js` from the command line + - There is an incorrect transformation that occurs with the relative paths when using webpack, we need to run this any time we update/install semantic-ui + If you don't care about semantic-ui bundled fonts, then **do not** run this font fix command; amend your webpack config as follows: -4. Start the webpack dev server + + ```js + { + test: /\.less$/, // import css from 'foo.less'; + use: [ + 'style-loader', + { + loader: 'css-loader', + options: { url: false } + }, + 'less-loader' + ] + } + ``` -##### CLI Junkie? -~~~bash +4. Start the webpack dev server + +### CLI + +```sh git clone https://github.com/atomicpages/semantic-ui-webpack2-boilerplate.git npm i node font-fix.js npm start -~~~ +``` + +## Adding a Custom Theme in Semantic UI -### Adding a Custom Theme for Semantic UI Currently, the best way to do this is to develop your theme inside of the `semantic` folder (or wherever your assets are insatlled) and then make a copy in the root. Due to the ridged nature of Semanitc UI, it might not be possible to do this otherwise. Other options: 1. Scrap `less` imports and amend `webpack.config.js` as follows: - ~~~js - { - test: /\.css$/, // changed from \.less$ - use: [ - 'style-loader', - 'css-loader' - ] - } - ~~~ + ```js + { + test: /\.css$/, // changed from \.less$ + use: [ + 'style-loader', + 'css-loader' + ] + } + ``` + + If you ran `font-fix.js` we need to undo what we did. To do this delete the `semantic` folder and reinstall using `npm` Once this is complete we can now build `semantic-ui` independently of Webpack: - If you ran `font-fix.js` we need to undo what we did. To do this delete the `semantic` folder and reinstall using `npm` Once this is complete we can now build `semantic-ui` independently of Webpack: + ```sh + cd semantic + gulp build + gulp watch + ``` - ~~~bash - cd semantic - gulp build - gulp watch - ~~~ + inside of `app/index.js` make the following change: - inside of `app/index.js` make the following change: + ```js + import css from '../semantic/dist/semantic.css'; + ``` - ~~~js - import css from '../semantic/dist/semantic.css'; - ~~~ + **Note:** if you've set aliases ensure those are updated for the proper path. - **Note:** if you've set aliases ensure those are updated for the proper path. +## Adding a Custom Theme -### Adding a Custom Theme Due to the rigid nature of Webpack _and_ Semantic UI, they don't mingle very well. To by pass this, we can develop our theme inside of the `semantic` source folder directly and use gulp tasks to copy it to our project root. -~~~bash +```sh gulp copy-to # copies to semantic folder gulp copy-from # copies from the semantic folder gulp copy-theme-config # copies theme.config to project root; run with copy-from by default -~~~ +``` In order to get webpack to deploy the new changes, all modifications to theme files must be done inside the `semantic-ui` folder. -### Build for Production -// TODO +## Build for Production + +Just run `npm run build` + +## Common issues -### Common issues 1. URL issues with some assets not able to be found - Based on experience, this is usually an issue with the way paths are resolved in webpack. There are two solutions: + Based on experience, this is usually an issue with the way paths are resolved in webpack. There are two solutions: + + 1. Fix the path to be correct (like `font-fix.js`) + 2. Tell `css-loader` to [ignore urls](#idcurls) - 1. Fix the path to be correct (like `font-fix.js`) - 2. Tell `css-loader` to [ignore urls](#idcurls) +## Requirements -### Requirements -* Node 6.x+ +- Node 10.x+ diff --git a/app/index.html b/app/index.html deleted file mode 100644 index 206b8a8..0000000 --- a/app/index.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - -Semantic UI & Webpack 2 - - -
-

Dogs Roles with Humans

-

Domestic dogs inherited complex behaviors, such as bite inhibition, from their wolf ancestors, which would have been pack hunters with complex body language. These sophisticated forms of social cognition and communication may account for their trainability, playfulness, and ability to fit into human households and social situations, and these attributes have given dogs a relationship with humans that has enabled them to become one of the most successful species on the planet today.

-

The dogs' value to early human hunter-gatherers led to them quickly becoming ubiquitous across world cultures. Dogs perform many roles for people, such as hunting, herding, pulling loads, protection, assisting police and military, companionship, and, more recently, aiding handicapped individuals. This impact on human society has given them the nickname "man's best friend" in the Western world. In some cultures, however, dogs are also a source of meat.

- -
-
-
-
- - -
-
- - -
-
-
-
- - Optional Details -
-
- - -
-
-
Sign Up
-
-
-
- - diff --git a/app/index.js b/app/index.js index ecfcf1d..7b44e4f 100644 --- a/app/index.js +++ b/app/index.js @@ -1,4 +1,7 @@ +import $ from 'jquery'; + import css from 'semantic/semantic.less'; + import 'semantic/definitions/modules/transition'; import 'semantic/definitions/modules/accordion'; diff --git a/font-fix.js b/font-fix.js index 276bda7..1547b21 100644 --- a/font-fix.js +++ b/font-fix.js @@ -2,27 +2,31 @@ const fs = require('fs'); function fixFontPath(filename) { if (fs.existsSync(filename)) { - let content = fs.readFileSync(filename, 'utf8'); + const content = fs.readFileSync(filename, 'utf8'); let quote = '"'; if (/@fontPath\s*:\s*'/.test(content)) { quote = "'"; } - let newContent = content.replace( - /@fontPath\s*:\s*("|')\.{2}\/\.{2}\/themes\//g, - `@fontPath : ${quote}../../` + fs.writeFileSync( + filename, + content.replace( + /@fontPath\s*:\s*("|')\.{2}\/\.{2}\/themes\//g, + `@fontPath : ${quote}../../` + ), + 'utf8' ); - - fs.writeFileSync(filename, newContent, 'utf8'); } else { console.warn(`${filename} does not exist`); } } -fixFontPath('semantic/src/themes/basic/elements/icon.variables'); -fixFontPath('semantic/src/themes/default/globals/site.variables'); -fixFontPath('semantic/src/themes/flat/globals/site.variables'); -fixFontPath('semantic/src/themes/github/elements/icon.variables'); -fixFontPath('semantic/src/themes/material/elements/icon.variables'); -fixFontPath('semantic/src/themes/material/globals/site.variables'); +[ + 'semantic/src/themes/basic/elements/icon.variables', + 'semantic/src/themes/default/globals/site.variables', + 'semantic/src/themes/flat/globals/site.variables', + 'semantic/src/themes/github/elements/icon.variables', + 'semantic/src/themes/material/elements/icon.variables', + 'semantic/src/themes/material/globals/site.variables', +].forEach(fixFontPath); diff --git a/gulpfile.js b/gulpfile.js index d2b61f7..ab3ef14 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -7,47 +7,40 @@ const SEMANTIC_GULP = path.resolve(__dirname, 'semantic', 'gulpfile.js'); const THEME_NAME = 'theme'; gulp.task('build', () => { - return gulp.src(SEMANTIC_GULP) - .pipe(chug({ tasks: [ 'build' ]})); + return gulp.src(SEMANTIC_GULP).pipe(chug({ tasks: ['build'] })); }); gulp.task('build-javascript', () => { - return gulp.src(SEMANTIC_GULP) - .pipe(chug({ tasks: [ 'build-javascript' ]})); + return gulp.src(SEMANTIC_GULP).pipe(chug({ tasks: ['build-javascript'] })); }); gulp.task('build-css', () => { - return gulp.src(SEMANTIC_GULP) - .pipe(chug({ tasks: [ 'build-css' ]})); + return gulp.src(SEMANTIC_GULP).pipe(chug({ tasks: ['build-css'] })); }); gulp.task('build-assets', () => { - return gulp.src(SEMANTIC_GULP) - .pipe(chug({ tasks: [ 'build-assets' ]})); + return gulp.src(SEMANTIC_GULP).pipe(chug({ tasks: ['build-assets'] })); }); gulp.task('clean', () => { - return gulp.src(SEMANTIC_GULP) - .pipe(chug({ tasks: [ 'clean' ]})); + return gulp.src(SEMANTIC_GULP).pipe(chug({ tasks: ['clean'] })); }); gulp.task('watch', () => { - return gulp.src(SEMANTIC_GULP) - .pipe(chug({ tasks: [ 'watch' ]})); + return gulp.src(SEMANTIC_GULP).pipe(chug({ tasks: ['watch'] })); }); -gulp.task('copy-to', () =>{ - return gulp.src(THEME_NAME + '/**/*.*', { base: '.'}) - .pipe(gulp.dest('semantic/src/themes/')); +gulp.task('copy-to', () => { + return gulp.src(THEME_NAME + '/**/*.*', { base: '.' }).pipe(gulp.dest('semantic/src/themes/')); }); -gulp.task('copy-from', [ 'copy-theme-config' ], () => { - return gulp.src('semantic/src/themes/' + THEME_NAME + '/**/*.*') +gulp.task('copy-from', ['copy-theme-config'], () => { + return gulp + .src('semantic/src/themes/' + THEME_NAME + '/**/*.*') .pipe(gulp.dest('./' + THEME_NAME)); }); gulp.task('copy-theme-config', () => { del('./theme.config'); - return gulp.src('semantic/src/theme.config') - .pipe(gulp.dest('.')); + return gulp.src('semantic/src/theme.config').pipe(gulp.dest('.')); }); diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json new file mode 100644 index 0000000..2235a2e --- /dev/null +++ b/npm-shrinkwrap.json @@ -0,0 +1,7 @@ +{ + "dependencies": { + "graceful-fs": { + "version": "4.2.4" + } + } +} diff --git a/package.json b/package.json index f08b43b..0f1d5b4 100644 --- a/package.json +++ b/package.json @@ -1,31 +1,38 @@ { - "name": "semantic-ui-webpack2-boilerplate", + "name": "semantic-ui-webpack-boilerplate", "version": "1.0.3", - "description": "A boilerplate for semantic-ui and webpack2", + "description": "A boilerplate for semantic-ui and webpack", "main": "index.js", - "repository": "https://github.com/atomicpages/semantic-ui-webpack2-boilerplate.git", - "author": "Dennis Thompson ", + "repository": { + "type": "git", + "url": "https://github.com/atomicpages/semantic-ui-webpack2-boilerplate.git" + }, + "private": true, + "author": "Dennis Thompson", "license": "MIT", "scripts": { - "start": "webpack-dev-server -d --progress --hot" + "build": "webpack --mode=production", + "start": "webpack serve --hot" + }, + "peerDependencies": { + "jquery": "^3.0.0" }, "devDependencies": { - "css-loader": "^0.26.1", - "del": "^2.2.2", - "file-loader": "^0.10.0", - "gulp": "^3.9.1", + "@djthoms/prettier-config": "^2.0.0", + "css-loader": "^5.0.0", + "del": "^6.0.0", + "file-loader": "^6.1.1", + "gulp": "^3.0.0", "gulp-chug": "^0.5.1", - "html-webpack-plugin": "^2.28.0", - "image-webpack-loader": "^3.2.0", - "less-loader": "^2.2.3", - "semantic-ui": "^2.2.8", - "style-loader": "^0.13.1", - "url-loader": "^0.5.7", - "webpack": "^2.2.1", - "webpack-dev-server": "^2.4.1", - "wrench": "^1.5.9" + "html-webpack-plugin": "^4.5.0", + "less-loader": "^7.0.2", + "prettier": "^2.1.2", + "semantic-ui": "^2.4.2", + "style-loader": "^2.0.0", + "url-loader": "^4.1.1", + "webpack": "^5.0.0", + "webpack-cli": "^4.0.0", + "webpack-dev-server": "^3.0.0" }, - "dependencies": { - "jquery": "^3.1.1" - } + "prettier": "@djthoms/prettier-config" } diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..2f212b6 --- /dev/null +++ b/public/index.html @@ -0,0 +1,93 @@ + + + + + Semantic UI & Webpack + + +
+

Dogs Roles with Humans

+

+ Domestic dogs inherited complex behaviors, such as bite inhibition, from their wolf + ancestors, which would have been pack hunters with complex body language. These + sophisticated forms of social cognition and communication may account for their + trainability, playfulness, and ability to fit into human households and social + situations, and these attributes have given dogs a relationship with humans that has + enabled them to become one of the most successful species on the planet today. +

+

+ The dogs' value to early human hunter-gatherers led to them quickly becoming + ubiquitous across world cultures. Dogs perform many roles for people, such as + hunting, herding, pulling loads, protection, assisting police and military, + companionship, and, more recently, aiding handicapped individuals. This impact on + human society has given them the nickname "man's best friend" in the Western world. + In some cultures, however, dogs are also a source of meat. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ + +
+
+ + +
+
+
+
+ + Optional Details +
+
+ + +
+
+ +
+
+
+ + + diff --git a/semantic.json b/semantic.json index 51a714a..3058249 100644 --- a/semantic.json +++ b/semantic.json @@ -18,5 +18,5 @@ "permission": false, "autoInstall": false, "rtl": false, - "version": "2.2.8" + "version": "2.4.2" } diff --git a/webpack.config.js b/webpack.config.js index 1272f5c..88efc51 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -3,53 +3,50 @@ const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { - entry: './app/index.js', // where the bundler starts the bundling process - output: { // where the bundled code is saved + entry: path.resolve('./app/index.js'), // where the bundler starts the bundling process + output: { + // where the bundled code is saved path: path.resolve('dist'), - filename: 'index_bundle.js' + filename: 'index_bundle.js', + }, + externals: { + jquery: 'jQuery', }, resolve: { alias: { semantic: path.resolve(__dirname, 'semantic/src/'), - jquery: path.resolve(__dirname, 'node_modules/jquery/src/jquery') - } + }, }, module: { - loaders: [ + rules: [ { test: /\.(png|gif)$/, - loader: 'url-loader?limit=1024&name=[name]-[hash:8].[ext]!image-webpack-loader' + loader: 'url-loader', + options: { + limit: 1024 + } }, { test: /\.jpg$/, - loader: 'file-loader' + loader: 'file-loader', }, { test: /\.less$/, // import css from 'foo.less'; - use: [ - 'style-loader', - 'css-loader', - 'less-loader' - ] + use: ['style-loader', 'css-loader', 'less-loader'], }, { test: /\.(ttf|eot|svg|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/, - loader: 'file-loader' - } - ] + loader: 'file-loader', + }, + ], }, devtool: 'eval-source-map', devServer: { compress: true }, plugins: [ new HtmlWebpackPlugin({ - template: './app/index.html', + template: './public/index.html', filename: 'index.html', - inject: 'body' // inject scripts before closing body tag + inject: 'body', // inject scripts before closing body tag }), - new webpack.ProvidePlugin({ - $: 'jquery', - jQuery: 'jquery', - 'window.jQuery': 'jquery' - }) - ] + ], }; diff --git a/webpack.prod.config.js b/webpack.prod.config.js deleted file mode 100644 index c0853dd..0000000 --- a/webpack.prod.config.js +++ /dev/null @@ -1,64 +0,0 @@ -const path = require('path'); -const webpack = require('webpack'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); - -module.exports = { - entry: './app/index.js', // where the bundler starts the bundling process - output: { // where the bundled code is saved - path: path.resolve('dist'), - filename: 'index_bundle.js' - }, - resolve: { - alias: { - semantic: path.resolve(__dirname, 'semantic/src/'), - jquery: path.resolve(__dirname, 'node_modules/jquery/src/jquery') - } - }, - module: { - loaders: [ - { - test: /\.(png|gif)$/, - loader: 'url-loader?limit=1024&name=[name]-[hash:8].[ext]!image-webpack-loader' - }, - { - test: /\.jpg$/, - loader: 'file-loader' - }, - { - test: /\.less$/, // import css from 'foo.less'; - use: [ - 'style-loader', - 'css-loader', - 'less-loader' - ] - }, - { - test: /\.(ttf|eot|svg|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/, - loader: 'file-loader' - } - ] - }, - devtool: 'source-map', - plugins: [ - new HtmlWebpackPlugin({ - template: './app/index.html', - filename: 'index.html', - inject: 'body' // inject scripts before closing body tag - }), - new webpack.ProvidePlugin({ - $: 'jquery', - jQuery: 'jquery', - 'window.jQuery': 'jquery' - }), - new webpack.optimize.UglifyJsPlugin({ - sourceMap: options.devtool && (options.devtool.indexOf("sourcemap") >= 0 || options.devtool.indexOf("source-map") >= 0), - beautify: false, - mangle: { - screw_ie8: true, - keep_fnames: true - }, - compress: { screw_ie8: true }, - comments: false - }) - ] -};