I Hope Gulp Project Will Save You A Lot Of Time. Thank You For Supporting Free Learning Content! :tw-1f4af:
Terminal commands
Installation: npm i || yarn || npm i --legacy-peer-deps
- the --legacy-peer-deps flag will allow installation to continue if an dependency conflicts (package versions).
Launch developer mode (with server launch)
npm rundev
Launch project build (no server launch, final build only) Launching the project build and uploading the result to the server via FTP. (without running a local server)
npm run build
Launch project build (no server launch, final build only) Launching the project build and uploading the result to the server via FTP. (without running a local server)
The FTP configuration is in config/gulp-settings.js
npm run deploy
Launching the build of the project and creating a zip archive with the name of the project. (without running a local server) Launching the project build but without creating webp images. (no server launch, final build only)
npm run zip
Launching the build of the project and creating a zip archive with the name of the project. (without running a local server) Launching the project build but without creating webp images. (no server launch, final build only)
npm run devbuild
Start creating an SVG sprite. Icons should be placed in the src/svgicons folder, the finished sprite will appear in the src/img/icons/icons.svg folder
Changes in the src/svgicons folder are not tracked in dev mode, if necessary, you can run a rebuild of the sprite it is worth starting the creation of a sprite before starting work with the command:
npm run sprite
The main files for working with the template:
js/app.js
scss/style.scss
index.html - landing page (content) home.html - home page html/*.htm files - pluggable parts
Folder path aliases are used:
@img=src/img @scss=src/scss @js=src/js
Plugin for VS Code - Path Autocomplete Settings. Press F1 in the editor, find the Settings JSON settings, add the code:
"path-autocomplete.pathMappings": {
"@img": "${folder}/src/img", // alias for the img folder
"@scss": "${folder}/src/scss", // alias for the scss folder
"@js": "${folder}/src/js", // alias for js folder
}
If errors occur, make sure that:
- You have the latest version of Node.js installed
- Terminal opened with administrator rights
- There are no # or !
- Folders and files must be named in Latin without spaces
- The img tag and its contents must be written on one line without hyphens
- The src attribute must contain the path to the existing image
Other problems and solutions:
Error "unable to resolve dependency tree"
Solution:
npm i --legacy-peer-deps
node-sass error.
Solutions:
npm rebuild node-sass || npm install sass gulp-sass --save-dev
Python error
Solutions:
npm install --global windows-build-tools