Presentation made for a WordPress initiation workshop.
- LOCAL: http://web.wordpressinit.lndo.site/
- DEV: ~
- PRE: ~
- PRO: https://jjpeleato.com/courses/initwordpress/
Project built with the framework reveal.js.
More information on GitHub
- You have to install Lando
If Lando's tools does not work for you, there is another way. You must install the environment manually: XAMP, Node.JS, NPM or Yarn and Gulp CLI.
For more information visit:
Notes:
- If you work with Windows < 10. To execute the commands, I recommend installing Cygwin.
- If you work with Windows 10. To execute the commands, I recommend installing WSL 2 with Ubuntu.
- If you work with Windows 10. You need install the following package win-node-env.
- I recommend installing the following IDE for PHP Programming: PHPStorm (recommended) or Visual Studio Code.
├─ .husky/ # Husky directory (git-hooks)
├─ assets/
├─ gulp/
│ ├─ task/
│ └─ config.js # Paths and configuration Gulp system.
├─ public/
├─ .babelrc
├─ .editorconfig
├─ .gitignore
├─ .lando.yml
├─ .stylelintignore
├─ .stylelintrc
├─ commitlint.config.js
├─ gulpfile.babel.js
├─ LICENSE
├─ package.json
└─ README.md
- Run
git clone https://github.com/jjpeleato/slides-starter-boilerplate.git slides-project
- Open the
initialize.sh
file and edit the GIT variable with the new repository. I recommend SSH connection. Example:git@github.com:jjpeleato/slides-starter-boilerplate.git
. - Run
sh initialize.sh
. - For security. Open the
initialize.sh
file and edit the GIT variable to~
. - Open the
README.md
and rename the name of presentation, name of project and description. - Open the
lando.yml
and rename the project and proxy name. - Open the
package.json
and edit the name and description. - Open the
public/.well-known/security.txt
and edit the canonical. - Open the
public/humans.txt
and edit the last update. - Open your terminal and browse to the root location of your project.
- Run
$lando start
.- The project has a
.lando.yml
file with all the environment settings. - The command starts the installation process when it finishes, you can see all the URLs to access.
- The project has a
- If required. Run:
$lando npm install --save-dev
or$lando yarn install --dev
. - If required. Run:
$lando npm run prepare
. - If required. Run:
$lando npm run gulp:prod
. - End. Happy developing.
- Open your terminal and browse to the root location of your project.
- To work with and compile your SASS and JS files on the fly start:
$lando gulp
,$lando npm run gulp:dev
or$lando npm run gulp:prod
- Gulp actions commands list:
$lando gulp clean
Delete all files.$lando gulp css
Compile SASS to CSS and validate SASS according Stylelint. Not concat.$lando gulp cssAssets
Copy CSS assets to public directory.$lando gulp copyCssFontawesome
Copy Fontawesome CSS assets to public directory.$lando gulp copyWebfontsFontawesome
Copy Fontawesome webfont assets to public directory.$lando gulp fontAssets
Copy fonts assets to public directory.$lando gulp fontawesome
Copy fontawesome assets to public directory.$lando gulp images
Copy and minify image assets to public directory.$lando gulp imagesAssets
Copy and minify other image assets to public directory.$lando gulp js
Validate the code with JSHint. Minify the JS files.$lando gulp jsAssets
Copy JS assets to public directory.$lando gulp jsCopy
Copy another JS assets to public directory.$lando gulp validate
Validate JS with JSHint and SCSS according Stylelint.$lando gulp validateJs
Validate JS with JSHint.$lando gulp validateScss
Validate SCSS according Stylelint.$lando gulp watch
Compile SASS to CSS and concat and minify JS files in real-time.
- NPM actions commands list:
$lando npm run prepare
Enable Git hooks. Important: Run always after npm install.$lando npm run gulp:dev
Compile for development environment.$lando npm run gulp:prod
Compile for production environment.$lando npm run gulp:validate
Run validate JS and SCSS files.
The present project uses several technologies and tools for the automation and development process. For more information and learning visit the following links.
- Reveal.js
- Lando
- Docker
- Git
- Nginx
- Node.js
- NPM
- Yarn
- Gulp
- JSHint
- Stylelint
- Mark Otto's coding standards
- Fontawesome
- EditorConfig
- Husky
- Conventional Commits
- Commitlint
- Commitizen
- Human.txt
- Security.txt
Note: Thanks all people to work on these projects.
- It is very important that if you deploy the project to publish. The DocumentRoot on the VirtualHost has to point to the public/ directory.
- At the moment you can not update the
gulp-imagemin
package because it generates an error. I will investigate in the following commitments. - You can not update the
stylelint
,stylelint-config-standard
andstylelint-scss
becausegulp-stylelint
package cannot work with them.
- It is possible that on macOS the Gulp tasks do not run the correct form. In this case install NodeJS, NPM and Gulp-cli in your OS and execute the tasks outside the Docker containers.
More information on the following commits. If required.
Grettings @jjpeleato.