website development workflow setup automation

newProject.sh

#!/bin/bash

###################
#       What it does:
#       - setup the basic folder structure for a website development project
#       - setup a local and remote (private) Github repo with readme and gitignore
#       - configure NPM and basic setup for using GULP or WEBPACK
#       - install NPM dev dependency packages
###################
#       Requirements:
#       - git bash
#       - github personal access token
#       - nodejs
#       - json package (npm install json -g)
#       - js-beautify (npm install js-beautify)
###################
#       How it works:
#       In the CLI write: newproject <token> <project_name> gulp OR webpack
###################


#	git bash windows, add ssh identity to ssh agent

ssh-add ~/.ssh/id_rsa_github

#	parameters and variables
#	parameters should be used as in example:
#	$ newproject <token> <project_name> <gulp> OR <webpack>

GITHUBTOKEN=${1?ERROR: provide three arguments <token> <project_name> <webpack_OR_gulp(+webpack)>}
PROJECTNAME=${2?ERROR: provide three arguments <token> <project_name> <webpack_OR_gulp(+webpack)>}
TASKRUNNER=${3?ERROR: provide three arguments <token> <project_name> <webpack_OR_gulp(+webpack)>}

#	create root project folder

mkdir -p ~/Documents/web_dev/projects/$PROJECTNAME
cd ~/Documents/web_dev/projects/$PROJECTNAME

#	git and npm setup

git init
curl -i -H "Authorization: token $GITHUBTOKEN" -d "{\"name\":\"$PROJECTNAME\",\"auto_init\":\"true\",\"gitignore_template\":\"Node\",\"private\":\"true\"}" https://api.github.com/user/repos
git remote add origin git@github.com:jorishr/$PROJECTNAME.git
git pull origin master
git status

npm init -y

#   my gulp setup

if [[ "$TASKRUNNER" == gulp ]]
then
mkdir -p ~/Documents/web_dev/projects/$PROJECTNAME/app/assets/{styles,scripts,images}
mkdir -p ~/Documents/web_dev/projects/$PROJECTNAME/app/temp/{styles,scripts}
touch ~/Documents/web_dev/projects/$PROJECTNAME/app/index.html
touch ~/Documents/web_dev/projects/$PROJECTNAME/app/assets/styles/main.scss

mkdir gulpfile.js
echo "const { series, watch, parallel, src, dest} = require('gulp')" > gulpfile.js/index.js
echo "const path = require('path'); module.exports = {mode: '', entry{app:'', vendor: ''}, output{path: path.resolve(__dirname, ''), filename: '[name]-bundle.js'}, module:{rules: [{test: /\.m?js$/, exclude: /node_modules/, use: {loader: 'babel-loader', options: {presets: ['@babel/preset-env'] } } }]} }" > webpack.config.js
js-beautify -r webpack.config.js
npm install --save-dev gulp gulp-sass gulp-cssnano gulp-postcss gulp-imagemin gulp-rev gulp-rev-replace gulp-svg-sprite gulp-uglify gulp-htmlmin autoprefixer del node-sass replace-in-file webpack webpack-cli browser-sync @babel/core @babel/preset-env babel-loader
fi

#	basic webpack setup

if [[ "$TASKRUNNER" == webpack ]]
then
mkdir -p ~/Documents/web_dev/projects/$PROJECTNAME/src/assets/{styles,scripts,images}
touch ~/Documents/web_dev/projects/$PROJECTNAME/src/assets/styles/main.scss

touch ~/Documents/web_dev/projects/$PROJECTNAME/src/template.html
touch ~/Documents/web_dev/projects/$PROJECTNAME/src/index.js

echo "const path=require('path');module.exports={entry:{main:'./src/index.js',vendor:'./src/vendor.js'},output:{filename:'[name].bundle.[contenthash].js',path:path.resolve(__dirname,'dist')},module:{rules:[{test:/\.html$/,use:['html-loader']},{test:/\.(png|jpe?g|gif|svg)$/,use:{loader:'file-loader',options:{name:'[name].[hash].[ext]',outputPath:'imgs'}}},{test:/\.m?js$/,exclude:/node_modules/,use:{loader:'babel-loader',options:{presets:['@babel/preset-env']}}}]},}" > webpack.common.js
echo "const common=require('./webpack.common'),merge=require('webpack-merge'),htmlWebpackPlugin=require('html-webpack-plugin');module.exports=merge(common,{mode:'development',module:{rules:[{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}]},plugins:[new htmlWebpackPlugin({template:'./src/template.html'})]})" > webpack.dev.js
echo "const common=require('./webpack.common'),merge=require('webpack-merge'),HtmlWebpackPlugin=require('html-webpack-plugin'),{CleanWebpackPlugin}=require('clean-webpack-plugin'),MiniCssExtractPlugin=require('mini-css-extract-plugin'),OptimizeCssAssetsPlugin=require('optimize-css-assets-webpack-plugin'),TerserPlugin=require('terser-webpack-plugin');module.exports=merge(common,{mode:'production',module:{rules:[{test:/\.scss$/,use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader']}]},plugins:[new MiniCssExtractPlugin({filename:'[name].[contentHash].css'}),new CleanWebpackPlugin()],optimization:{minimizer:[new OptimizeCssAssetsPlugin(),new TerserPlugin(),new HtmlWebpackPlugin({template:'./src/template.html',minify:{removeAttributeQuotes:!0,collapseWhitespace:!0,removeComments:!0}})]}})" > webpack.prod.js
js-beautify -r webpack.common.js
js-beautify -r webpack.dev.js
js-beautify -r webpack.prod.js

json -I -f package.json -e 'this.scripts={"start": "webpack-dev-server --config webpack.dev.js --open", "build": "webpack --config webpack.build.js"}'

npm install webpack webpack-cli webpack-dev-server webpack-merge clean-webpack-plugin css-loader file-loader html-loader html-webpack-plugin node-sass sass-loader style-loader mini-css-extract-plugin optimize-css-assets-webpack-plugin @babel/core @babel/preset-env babel-loader --save-dev
fi