WarMaxis / Gulp_setup_for_websites_development

Simple Gulp setup for websites develoment. Includes functions: compile SCSS; minification HTML, CSS, JS; create maps for source files; compress images with https://tinypng.com/ API; copy dist files to FTP server. Enjoy!

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Gulp setup for websites development

Simple Gulp setup for websites develoment.

Includes functions:

  • compile SCSS;
  • minification HTML, CSS, JS;
  • create source maps;
  • compress images with TinyPNG API;
  • copy dist files to FTP server.

Enjoy!

Created by Michał Milanowski.

All functions and Gulp tasks:

  • gulp sass - compile your SCSS files into CSS with source maps, compressed and with autoprefixer
  • gulp watch - watcher for gulp sass
  • gulp css-move - copy final CSS files from src directory to dist directory
  • gulp html-move - copy HTML files from src directory to dist directory and minify it
  • gulp tinypng - copy images from src directory to dist directory and compress it with TinyPNG API (require your API key)
  • gulp javascript - concat, minify JavaScript files with Browserify so you can create JS modules and bundle up it
  • gulp watch-js - watcher for gulp javascript
  • gulp js-move - copy final JS files from src directory to dist directory
  • gulp build - copy final all files from src directory to dist directory
  • gulp ftp - copy final all files from dist directory to FTP server (require your FTP passes)
  • gulp default - run gulp sass, gulp watch, gulp javascript, gulp watch-js

How to start?

  1. First, create new JS entry file main.js, in main /src/js/ directory.

  2. Optionally you can create tinypng_api_key.txt text file in /dependencies/ directory with your TinyPNG API key.

  3. Optionally you can create ftp_accesses.json JSON file in /dependencies/ directory with your FTP passes.
    JSON structure:

{
    "host": "yourhost.net",
    "user": "example",
    "password": "verystrongpassword123",
    "hostDirectory": "yourdirectory/anotherdirectory/"
}
  1. Install dependencies (you can use yarn also)
$ npm install
  1. Run Gulp default tasks or one task
$ gulp

About

Simple Gulp setup for websites develoment. Includes functions: compile SCSS; minification HTML, CSS, JS; create maps for source files; compress images with https://tinypng.com/ API; copy dist files to FTP server. Enjoy!

License:MIT License


Languages

Language:JavaScript 100.0%