• Gulp version: 4.0.2
• Package version: 1.3.0
• Last updated: May 2020

• node.js 12 or newer

npm install gulp-cli -g

npm install

{
   "name": "Nikcios-toolset",
   .
   .
   .
   "repository": {
   "type": "git",
   "url": "git+https://github.com/AUTHOR/PROJECT_NAME.git"
   },
   .
   .
   .
   "bugs": {
      "url": "https://github.com/AUTHOR/PROJECT_NAME/issues"
   },
   "homepage": "https://github.com/AUTHOR/PROJECT_NAME#readme"
}

Consider changing these settings before usage.

gulp

• SASS formatting (minification + auto-prefix)
• JavaScript formatting (minification + concat)
• HTML style and JavaScript injecting
• Automatic browser synchronization
• Image minification
• SVG formatting (minification + concat) - Out of order
• Copy video and fonts

To change the structure of the src folder or the dist folder visit the gulp-config.js

Here all the paths are shown and can be changed to your liking.

src
    > assets
        > img
           > 350x150.png
        > fav
           > favicon.ico
    > js
        > nav.js
    > sass
        > _nav.scss
        > _footer.scss
        > base.scss
    > html
        > index.html

dist
    > css
    > img
    > scripts
    > svg
    > video
    index.html

• gulp
  • This is the default command and runs every command in the correct order and ends on a watch which watches all file changes and operates accordingly
• gulp dev
  • Does the same as the default command
• gulp svg
  • Runs the SVG formatting
• gulp clean
  • Cleans the dist folder
• gulp sassFormat
  • Runs the SASS formatting
• gulp images
  • Runs the image formatting
• gulp video
  • Copies videos
• gulp fonts
  • Copies fonts
• gulp JSFormat
  • Runs the JavaScript formatting
• gulp injectToHTML
  • Injects styles and JavaScripts into the HTML files
• gulp serve
  • Starts a browser-sync instance
• gulp watch
  • Starts a watch of all the files in src
• gulp reload
  • Reloads the browser-sync instance

This tool uses browserslists to define browser support which can be changed form the package.json file

To change the support just change the "defaults" tag under browserslist:

"browserslist": [
    "defaults"
  ]

To inject a html partial just the following function after creating the file inside your partial directory:

<!-- inject:partial:partials/htmlfile.html -->
<!-- endinject -->

When using SASS you can decide which files should be copied by typing a underscore before files that should now be copied.

If you're getting an error saying you don't have permission to run scripts run this command in your PowerShell

• Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

When reinstalling delete the `package.json-lock` and the `node_modules` folder then run `npm install`.