Chuck Grimmett

Archives

Tag: Gulp

  • Automating MySQL Backups with Gulp

    As I mentioned a few days ago, I’m using Gulp on a new WordPress project. I like to back up my work every night, and since a lot of WordPress config and customization happens in the WordPress editor and widgets, that means backing up the mysql database as well as the code.

    Why not use this newfound tool? Let’s do it.

    I did some searching and found Gulp WordPress Backup, but it was overkill for what I wanted. But I saw that it used an npm package named mysqldump, for the export, so I grabbed that and started setting up a new task in gulpfile.js:

    // add mysqldump as a dependency var mysqlDump = require('mysqldump');  // dumpDatabase gulp.task('dumpDatabase', () => { return new Promise((resolve, reject) => { mysqlDump({ host: 'localhost', user: 'user', password: 'pass', database: 'wp_database', dest: 'backup.sql' }, (err) => { if (err !== null) return reject(err); }); }) .catch((err) => { console.log(err); }); });

    Next step: Defining the filename. I just wanted to use today’s date because I intend on running this at the end of each work day. Since gulp is all javascript, this is easy:

    var today = new Date(), dd = today.getDate(), mm = today.getMonth()+1 //January is 0! yyyy = today.getFullYear(); if(dd<10) { dd = '0'+dd } if(mm<10) { mm = '0'+mm } today = mm + '-' + dd + '-' + yyyy;

    Add this to the gulp task and you are good to go!

    gulp.task('dumpDatabase', () => { var today = new Date(), dd = today.getDate(), mm = today.getMonth()+1 //January is 0! yyyy = today.getFullYear(); if(dd<10) { dd = '0'+dd } if(mm<10) { mm = '0'+mm } today = mm + '-' + dd + '-' + yyyy;      return new Promise((resolve, reject) => {         mysqlDump({             host: 'localhost',             user: 'user',             password: 'pass',             database: 'wp_database',             dest: 'SQLBackups/' + today + '.sql' // Outputs to the folder named SQLBackups and uses today's date as the filename.         }, (err) => {             if (err !== null) return reject(err);         });     })     .catch((err) => {         console.log(err);     });  });

    Make sure you add mysqldump to your project’s package.json, or at least run npm install mysqldump before using!

  • Gulp and Sketch first use notes

    I’m working on a new WordPress theme development project and using Gulp and Sketch for the first time. Here are my first use notes:

    Gulp

    • Toolkit for automating tasks. Tons of packages available for things like minifying JS, compiling Sass, linting, packaging into zip files, pushing content to S3 and external servers, watching and automatically rendering changes in the browser, etc.
    • Pain to install. Dependencies all the way down.
    • Everything important goes in gulpfile.js

    Here are the tasks I’m using:

    • gulp styles — Compile, autoprefix and minify Sass files.
    • gulp scripts — Minify javascript files.
    • gulp images — Compress and optimize images.
    • gulp watch — Compile assets when file changes are made, start BrowserSync
    • gulp — Default task – runs all of the above tasks.
    • gulp zip — Package theme into zip file for distribution, ignoring node_modules.

    Sketch

    • I love being able to take layers, merge them, and export them as different image formats. This makes exporting background content a breeze.
    • No longer do I need to toil with eyeballing buttons and trying to figure out their padding, background gradients, and border radius. Code export is a gift from above.
    • I like their price model. Use the app for life, free updates for a year, resubscribe when you need more updates.