Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sergromanenko1/gulp-starter-kit
Gulp starter kit for web development using ES6, SCSS and PHP.
https://github.com/sergromanenko1/gulp-starter-kit
babel bem browserify es6 gulp html imagemin php scss source-maps sprites
Last synced: about 2 months ago
JSON representation
Gulp starter kit for web development using ES6, SCSS and PHP.
- Host: GitHub
- URL: https://github.com/sergromanenko1/gulp-starter-kit
- Owner: sergromanenko1
- Created: 2024-05-20T12:25:22.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2024-05-21T06:39:26.000Z (8 months ago)
- Last Synced: 2024-10-11T19:21:14.869Z (3 months ago)
- Topics: babel, bem, browserify, es6, gulp, html, imagemin, php, scss, source-maps, sprites
- Language: JavaScript
- Homepage:
- Size: 1.07 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Run the project
If the local PHP server is not installed, then install WAMP, LAMP, etc. [https://www.php.net/manual/en/install.php](https://www.php.net/manual/en/install.php).
Run the project folder on the local PHP server.
If not installed, install NodeJs and NPM [https://nodejs.org/en/](https://nodejs.org/en/).
Go to the project folder and open the terminal.
When you first run the project in the terminal, to install Gulp globally, run:
```
npm install --global gulp-cli
```
When you first run the project in the terminal, to install dependciies, run:
```
npm install
```
In the gulpfile.js on line 270, specify the URL of the local PHP server in the proxy parameter.
BrowserSync will run a proxy server that broadcasts the local PHP server at [http://localhost:3000/](http://localhost:3000/) and on the IP address of the device with port :3000, for example 192.168.1.2:3000.
The IP address of the device with port :3000 can be used to access the proxy server from other devices on the local WiFi network.
In the terminal, run:
```
gulp
```
When files are changed, the proxy server will reload.
To avoid caching files in the browser, you need to templates/header.php on line 2, set time() to the VAR constant.
Due to domain differences, something may not work through the proxy server.
You can disable the proxy server in the gulpfile file.js on 270 lines by commenting out the proxy parameter.
In the terminal, run:
```
gulp
```
The BrowserSync script will be offered in the terminal to restart the local PHP server when files are changed, it must be inserted before the closing </body>
But if the proxy server is disabled, access from other devices on the local Wi-Fi network will not work.
Before uploading to the hosting in the file templates/header.php on line 2, set any numeric value to the VAR constant.
If the proxy server was disabled and the Browser Sync script was added before the closing </body> to reload the local PHP server, then delete the added script.
To create an optimized version of the /public/ folder, run:
```
gulp minify
```
## Uploading files to the hosting
The listed folders and files should not be uploaded to the hosting, they are only needed for local development:
- /node_modules
- /resources
- gulpfile.js
- package.json
- package-lock.json
- composer.json
- composer.lock
- README.md
## File structure:
/templates/ - contains duplicate HTML blocks
/public/ - Contains frontend files to upload to the hosting (FILES IN THE /public/ FOLDER SHOULD NOT BE EDITED!)
/public/fonts/ - Contains TTF and WOFF fonts
/public/img/ - Contains compressed PNG, JPG, SVG images, PNG sprite and SVG sprite
/public/css/main.css - Contains all compiled SCSS files from the /resources/components folder/
/public/js/main.js - Contains all JS files from the /resources/components folder/
/resources/ - Contains frontend files for development (FILES IN THIS FOLDER ARE BEING EDITED!)
/resources/components/ - Contains folders of BEM blocks with SCSS and JS files
/resources/fonts/ - Contains TTF fonts, WOFF are created automatically
/resources/img/
/resources/img/sprite-png/ - Contains images for a PNG sprite
/resources/img/sprite-svg/ - Contains images for the SVG sprite
/resources/img/main/ - Contains images of the content
/resources/img/scss/main.js - A file for connecting JS files of plug-ins and BEM blocks
/resources/img/js/main.scss - A file for connecting CSS plugin files and CSS BEM blocks
## Gulp tasks
Running a proxy server, with an uncompressed assembly of PNG, JPG, SVG images, CSS and JS files:
```
gulp
```
Build with compression of PNG, JPG, SVG images, CSS and JS files:
```
gulp minify
```