Gulp Integration

[gregrickaby]

I've been dropping hints about this on the last couple of Designer calls. I spent the weekend playing with Gulp for a personal client, and I really quite like it. My goal is to set up wd_s with Gulp while retaining the workflow. Maybe it would even neat to offer both a Grunt and Gulp build options?

Will demo on the next call.

Todo:

• PostCSS (for Autoprefixer and MQ Packer support)
• Combine Media Queries
• Sourcemap on minified styles
• Makepot (i18n support)
• SassDocs
• Notification (Growl) support on failures
• Move Bourbon/Neat out of Bower and into NPM
• Ensure "Clean" is working correctly
• SVGstore is adding HTML headers into svg-icons.def (this is bad)
• Recreate tasks like "styles, javascript, sprites" where applicable
• BrowserSync... how can we make this as awesome as possible?

Would also like to see examples of how others are using Gulp and their config files...

[efuller]

+1 for this! Hopefully in the process, it will fix our sourcemap issues.

[gregrickaby]

I've pushed up my initial Gulp set up in a feature branch. I'd love to have everyone play with it and post feedback here. Check it out!

https://github.com/WebDevStudios/wd_s/tree/feature/gulp

[stacyk]

Super excited about this. I was going to move everything over to gulp too and poof, you did it for me :) Can't wait to play!

[allisonplus]

I've been playing around for notifications and this is where I am currently.

// Add to list
var notify= require('gulp-notify');

// Compile Sass and create stylesheet.
gulp.task('sass', function() {
    return gulp.src('assets/sass/*.scss')

    .pipe(sourcemaps.init())
        .pipe(sass({
            includePaths: neat,
            outputStyle: 'expanded'
        }))
    .on('error', handleErrors)
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./'));
});

//Growl Notification for Errors
function handleErrors() {
    var args = Array.prototype.slice.call(arguments);
    notify.onError({
        title: 'Compile Error',
        message: '<%= error.message %>'
    }).apply(this, args);
    this.emit('end'); // Keeps it from hanging on the task
}

[gregrickaby]

I'm at a really good place with the Gulpfile. I feel like it's nearly development ready.

• Icons, Scripts, Sprites, and Styles work!
• i18n is being weird and isn't scanning PHP files even though I have it configured properly.
• I have not integrated Gulp Notify yet.

Changes:
100394a#diff-878989239e07228f7903fde98f450ed9

Full file:
https://github.com/WebDevStudios/wd_s/blob/100394ab8edd294bdff554b0a2db6543eba8abe2/Gulpfile.js

To test:

• Checkout /feature/gulp
• npm install
• gulp watch

[JPry]

Makepot is working! Here is the link to the changes that I added: 6bc32df...be4e181 (updated)

[JPry]

We may be able to use gulp-notify for Notifications: https://github.com/mikaelbr/gulp-notify. I started to look into it and it seems like it would do what we need.

[gregrickaby]

Update:

Currently at a stand-still until thoughtbot/neat#397 is merged in. This will allow us to drop both Bourbon/Neat from Bower and use them as NPM packages instead.

Growl notifications on error are still under development. Thanks to @allisonplus for helping me with that and @JPry for getting Makepot working.

[colorful-tones]

I added error handling monkey-patch with gulp-plumber, gulp-util, and gulp-notify. Tested, and works with failed Sass and JS compilations. Can't wait for Gulp 4.0 with error built in. 🦄

Associated commits:

• add gulp-util to package.json
• set var gutil = require('gulp-util')
• set var notify = require('gulp-notify')
• add handleErrors function to Gulpfile.js
• replace .on('error) events with .pipe(plumber({errorHandler:handleErr…

[gregrickaby]

Putting this through it's paces on a personal client and I've found the following things:

• Remove all previous error handling code from Gulpfile.js
• Svgmin isn't remove stroke/fill
• SVG template tag is calling .icon-svg-name instead of just .svg-name
• CSS that targets SVGs will need to be updated
• Rename scripts.js to project.js inside scripts.php
• BrowserSync isn't proxying correctly. I see the site on localhost:3000, but isn't connecting when I type my actual local ".dev" address

[gregrickaby]

Ok, all the above issues have been checked off (including all original requirements). I've spent the last hour trying to break it, and now everything is working as expected with these commits: 2aaf82b...e725806

IMHO: Gulp is ready to be merged in, as soon as thoughtbot/neat#397 is merged into https://github.com/thoughtbot/neat.

Thanks to @allisonplus @colorful-tones @JPry and @efuller for all the help. ❤️ y'all!

[gregrickaby]

Good news! thoughtbot/neat#397 has been merged in. I'm told that they will have an update to NPM early next week. Once this drops, we'll be ready to merge this in.

[colorful-tones]