A modular set of gulp tasks that I made for my Wordpress / Joomla / Prestashop projects at my agency. Feel free to fork and modify it to your own tastes. Based on the excellent Gulp tutorials by Stefan Imhoff.
With the default configuration settings, this gulp kit assumes the project directory structure is as follows:
├── gulp # Folder containing all the gulp tasks
│ ├── config.js # Tasks configuration
│ ├── credentials.js # Credentials used to deploy project via Gulp
│ ├── tasks
│ │ ├── default.js
│ │ ├── deploy.js
│ │ ├── deployment
│ │ │ ├── db-export.js
│ │ │ ├── ftp.js
│ │ │ └── zip.js
│ │ ├── development
│ │ │ ├── browser-sync.js
│ │ │ ├── build.js
│ │ │ ├── concat-js.js
│ │ │ ├── jshint.js
│ │ │ ├── rebuild.js
│ │ │ ├── sass.js
│ │ │ ├── scripts.js
│ │ │ ├── scss-lint.js
│ │ │ ├── sprites.js
│ │ │ └── watch.js
│ │ ├── production
│ │ │ ├── base64.js
│ │ │ ├── browser-sync.js
│ │ │ ├── build.js
│ │ │ ├── favicon.js
│ │ │ ├── optimise-css.js
│ │ │ ├── optimise-images.js
│ │ │ └── optimise-js.js
│ │ ├── publish.js
│ │ └── sync
│ │ └── db-import.js
│ └── util
│ ├── bundleLogger.js
│ ├── handleErrors.js
│ └── notification.js
├── gulpfile.js
├── package.json
├── public # This is where your Wordpress / Joomla / Prestashop project files will reside in
└── src
├── favicon # favicon files
│ ├── favicon.html
│ ├── favicon.png
│ └── faviconData.json
├── js # js files
├── sass # .scss files
└── sprites # images used for css sprites
Directory and top level settings are exposed in gulp/config.js. Use this file to update paths to match the directory structure of your project, and to adjust task options. Refer to example config files in examples folder.
Credentials for deployment tasks are set in gulp/credentials.js. Set the right ftp credentials, and you should be able to deploy your website via gulp. To be able to export the local development database as a sql dump via Gulp, set the local database credentials. Remove the ssh credentials if you are not developing with a VM like Vagrant.
Not all configuration is exposed via the config file. For advanced task configuration, you can always edit the tasks themselves in gulp/tasks.
Make sure Node is installed and run the following:
git clone https://github.com/jasonheecs/gulp-tasks.git MyApp
cd MyApp
npm installThe gulp command runs the build process for developing a website. The build process consists of the following tasks:
Spins up a Browsersync server to watch for changes and automatically reloads the server.
Runs a series of tasks for a development build
Uses js-hint to check the syntax of .js files
Generates .css from .scss files
Bundles the javascript files via Browserify
Lint scss files for writing clean and consistent SCSS
Generates CSS sprites (stylesheets and images)
Watch for file changes and inject them / reload the browser.
The gulp publish command is for optimising the site for deployment and consists of the following tasks:
Convert small background images used in css files into base64-encoded data URI strings
Spins up a Browsersync server for the optimised build of the website
Run all tasks need for a production / optimisation build:production
Generates favicons for multiple platforms via Real Favicon Generator. The HTML to display the favicons is output in src/favicon.html (configurable).
Minify and optimise css file(s)
Optimise image file sizes
Minify and optimise JS files
The gulp deploy command is meant for quick deployment of the website via the command line. It consists of the following tasks:
Exports the website's database as a sql dump
Uploads the website either as a .zip file or as stream of individual files. FTP credentials should be set in credentials.js
Generates a .zip package of the website directory.