git init
git branch -M main
git remote add origin https://github.com/secretagentan/project-portfolio.git
touch README.md
git add .
git commit -m "first commit"
git push -u origin main
npm init
npm install lite-server --save-dev
Edit package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "npm run lite",
"lite": "lite-server"
},
RUN: lite-server
npm start
touch .gitignore
Add the following text inside the .gitignore file
node_modules
npm install [email protected] [email protected]
npm install [email protected]
[INCOMPLETE] Add the following within the "head" tag
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fnode_modules%2Fbootstrap%2Fdist%2Fcss%2Fbootstrap.min.css" />
<!-- Additional CSS must be placed after Bootstrap CSS -->
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fcss%2Fstyles.css" />
[INCOMPLETE] Add the following below the closing "footer" tag
</footer>
<!-- jQuery must come first, then Popper.js, then the Bootstrap JavaScript plugins.-->
<script src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fnode_modules%2Fjquery%2Fdist%2Fjquery.slim.min.js"></script>
<script src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fnode_modules%2Fpopper.js%2Fdist%2Fumd%2Fpopper.min.js"></script>
<script src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fnode_modules%2Fbootstrap%2Fdist%2Fjs%2Fbootstrap.min.js"></script>
npm install [email protected]
npm install [email protected]
[INCOMPLETE] Update the following within the "head" tag
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fnode_modules%2Fbootstrap%2Fdist%2Fcss%2Fbootstrap.min.css" />
<!-- Additional CSS must be placed after Bootstrap CSS -->
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fnode_modules%2Ffont-awesome%2Fcss%2Ffont-awesome.min.css" />
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fnode_modules%2Fbootstrap-social%2Fbootstrap-social.css" />
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fcss%2Fstyles.css" />
Create the following folder/file:
css/styles.scss
node -v
For Node version 16.x, enter:
npm install --save-dev node-sass@6
npm install --save-dev sass
For Intel Mac:
"scripts": {
"lite": "lite-server",
"scss": "node-sass -o css/ css/",
"start": "npm run lite",
"test": "echo \"Error: no test specified\" && exit 1"
},
For M1 Mac:
"scripts": {
"lite": "lite-server",
"scss": "sass css:css",
"start": "npm run lite",
"test": "echo \"Error: no test specified\" && exit 1"
},
npm run scss
Create the following folder/file:
js/scripts.js
[INCOMPLETE] Add the "js/scripts.js" src below the scripts under the "footer" tag:
<script src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fnode_modules%2Fjquery%2Fdist%2Fjquery.slim.min.js"></script>
<script src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fnode_modules%2Fpopper.js%2Fdist%2Fumd%2Fpopper.min.js"></script>
<script src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fnode_modules%2Fbootstrap%2Fdist%2Fjs%2Fbootstrap.min.js"></script>
<script src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fjs%2Fscripts.js"></script>
Inside project folder:
npm install --save-dev [email protected]
npm install --save-dev -E [email protected]
Update script object in package.json:
"start": "npm run watch:all",
"watch:scss": "onchange 'css/*.scss' -- npm run scss",
"watch:all": "parallelshell 'npm run watch:scss' 'npm run lite'"
Install copyfiles module (use sudo if this doesn't work):
npm install --save-dev [email protected]
Update the scripts object in package.json:
"copyfonts": "copyfiles -f node_modules/font-awesome/fonts/* dist/fonts",
Install imagemin-cli module (use sudo if doesn't work):
npm install --save-dev [email protected]
Update scripts in package.json:
"imagemin": "imagemin img/* -o dist/img",
npm install --save-dev [email protected]
Update scripts (package.json):
"usemin": "usemin contactus.html -d dist --htmlmin -o dist/contactus.html && usemin aboutus.html -d dist --htmlmin -o dist/aboutus.html && usemin index.html -d dist --htmlmin -o dist/index.html",
[INCOMPLETE] Wrap CSS links inside "head" with build:css and endbuild comments
<!-- build:css css/main.css -->
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fnode_modules%2Fbootstrap%2Fdist%2Fcss%2Fbootstrap.min.css" />
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fnode_modules%2Ffont-awesome%2Fcss%2Ffont-awesome.min.css" />
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fnode_modules%2Fbootstrap-social%2Fbootstrap-social.css" />
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fcss%2Fstyles.css" />
<!-- endbuild -->
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DLobster%7COpen%2BSans" />
- Do not include Google fonts.
[INCOMPLETE] Wrap JS scripts below closing "footer" with build:js and endbuild comments
<!-- build:js js/main.js -->
<script src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fnode_modules%2Fjquery%2Fdist%2Fjquery.slim.min.js"></script>
<script src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fnode_modules%2Fpopper.js%2Fdist%2Fumd%2Fpopper.min.js"></script>
<script src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fnode_modules%2Fbootstrap%2Fdist%2Fjs%2Fbootstrap.min.js"></script>
<script src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fjs%2Fscripts.js"></script>
<!-- endbuild -->
npm install --save-dev [email protected]
package.json:
"scripts": {
"clean": "rimraf dist",
package.json:
"scripts": {
"build": "npm run clean && npm run imagemin && npm run copyfonts && npm run usemin",
add "dist" to .gitignore:
node_modules
dist
npm run build