Tutorial: Integrating colouro sync to gulp-based project

This tutorial will walk you through process of integrating colouro-sync to your gulp-based workflow.

There is prepared fork of StartBootstrap Comming Soon Theme for you. The StartBootstrap templates was choosen as good base for the tutorial as it provides:

• clean gulp-based project starter,
• dev task prepared for running browser-sync,
• uses SASS as stylesheet processor.

1. Get your gulp-based project.

   In your working directory run following git clone command to get the forked repo cloned into startbootstrap-commin-soon directory.

   git clone https://github.com/barzto/startbootstrap-coming-soon.git
   

2. Install npm packages

   cd startbootstrap-coming-soon
   npm install
   

3. Install colouro-sdk as dev dependency

   npm i -D colouro-sdk
   

4. Modify gulpfile.js to initialize colouroSync along with browserSync.

   1. Import the colouroSync function at beginning of gulpfile.js

       const colouroSync = require('colouro-sdk').colouroSync;
      

   2. Call colouroSync() in browserSync(done) function. Change the function so it looks like this:

       // BrowserSync
       function browserSync(done) {
           colouroSync();
           browsersync.init({
               server: {
                   baseDir: "./"
               }
           });
           done();
       }
      

5. Create template to be used by expanded by colouro-sync

   cd scss
   cp _variables.scss _variables.scss.in
   

   Edit the newly created _variables.scss.in file and replace non-gray color values with curly braces variables like this (note the last block of variables):

   // Variables
   
   // Restated Bootstrap Variables
   
   $white: #fff !default;
   $gray-100: #f8f9fa !default;
   $gray-200: #e9ecef !default;
   $gray-300: #dee2e6 !default;
   $gray-400: #ced4da !default;
   $gray-500: #adb5bd !default;
   $gray-600: #868e96 !default;
   $gray-700: #495057 !default;
   $gray-800: #343a40 !default;
   $gray-900: #212529 !default;
   $black: #000 !default;
   
   $primary: {{bg-maj}} !default;
   $primary-fg: {{fg-maj}} !default;
   $secondary: {{bg-min}} !default;
   $secondary-fg: {{fg-min}} !default;
   $midground: {{mg}} !default;
   

6. Run the Colouro app on your handset. Enter the preview dialog and:

   • Make sure you are connected to the same wifi as the computer with project, and
   • note the IP address for next step.

7. Create colouro.json configuration file in project root with following content. Replace the IP address in host field with the one Colouro app shows in preview dialog (i.e. the address of handset app is running on).

   {
       "dest": "scss/_variables.scss",
       "templateFile": "scss/_variables.scss.in",
       "host": "192.168.0.42:8080"
   }
   

8. Now we have all set for live color update. The last thing we need to do is run gulp dev to start browserSync server and watch project files for changes.

   gulp dev
   

9. New browser tab should get open with the index.html file loaded. At this point you should be able to change SCSS color variables within Colouro app. Have fun!