PSG is a shorthand of three separated web development techniques represented in:
PSG has been developed over the node package manager (NPM), the main purpose of it is to be a simple, scalable, clear, optimized, and time-saving starter project for web developers, especially the Front-End ones who would like to work on a tidy and professional structure with no DRY code which follows the best practice.
PSG repository supposed to receive frequently updates to make sure that it always has the latest stable versions of the packages in use, also to make sure that it smoothly-running the commonly used productivity tasks which helps the developers to stay focused on the code without paying attention to any outer time-consuming operations.
With the help of GULP, PSG can do the following:
-
Compiling .PUG pages into plain HTML which the browser can render.
-
Compiling .SCSS styles to plain CSS which the browser can read.
-
Minifying all file types as follows:
- For CSS, Merging all *.scss files and generate from them only one .css file which will be compiled and minified.
- For JS, Merging all *.js files and generate from them only one .js file which will be minified.
- For Media, Compressing all images without touching the quality.
-
Creating a live preview server locally which detects any changes on the code.
-
Copying fonts directory along side other important folders from /src (if there were any), to /dist.
-
Compressing the project (as a development version) to be ready and easy for sharing.
-
Compressing the project (as a production version) to be ready and easy for sharing.
When working with files, you will notice that we followed the rule of Divide and conquer, since there is a separate Js file for each task, which would make the process much easier when testing, executing and debugging.
All of the tasks above are linked with Watchers, which means any change will be detected immediately and apply the corresponding tasks for it.
PSG is using number of development dependencies, here are they:
| Plugin name | source | version |
|---|---|---|
| browser-sync | https://www.npmjs.com/package/browser-sync | ^2.26.12 |
| dotenv | https://www.npmjs.com/package/dotenv | ^8.2.0 |
| gulp | https://www.npmjs.com/package/gulp | ^4.0.2 |
| gulp-autoprefixer | https://www.npmjs.com/package/gulp-autoprefixer | ^7.0.1 |
| gulp-cache | https://www.npmjs.com/package/gulp-cache | ^1.1.3 |
| gulp-clean | https://www.npmjs.com/package/gulp-clean | ^0.4.0 |
| gulp-concat | https://www.npmjs.com/package/gulp-concat | ^2.6.1 |
| gulp-imagemin | https://www.npmjs.com/package/gulp-imagemin | ^7.1.0 |
| gulp-plumber | https://www.npmjs.com/package/gulp-plumber | ^1.2.1 |
| gulp-pug | https://www.npmjs.com/package/gulp-pug | ^4.0.1 |
| gulp-rename | https://www.npmjs.com/package/gulp-rename | ^2.0.0 |
| gulp-sass | https://www.npmjs.com/package/gulp-sass | ^4.1.0 |
| gulp-sourcemaps | https://www.npmjs.com/package/gulp-sourcemaps | ^2.6.5 |
| gulp-uglify | https://www.npmjs.com/package/gulp-uglify | ^3.0.2" |
| gulp-zip | https://www.npmjs.com/package/gulp-zip | ^5.0.2 |
and as dependency:
| Plugin name | source | version |
|---|---|---|
| Bootstrap | https://getbootstrap.com | ^4.5 |
Bootstrap is our main CSS framework, and it can be very easily unintegrated if you wish not using it.
PSG requires Node.js v4+ to run. after making sure that it's installed on your device, follow the commands.
$ cd psg-starter
$ npm i
$ gulp generateDist
$ gulpafter executing the above commands, if everything goes well with you, your default browser will be automatically opened and navigating to the server which just created locally.
From this point, we finished running the project.. Feel free to apply any changes and watcher will start running. the hot reload server is ready and the dist/ directory well be hosted as default ✔.
MIT - Massachusetts Institute of Technology
Free Software, Hell Yeah!