How to serve tmp files?

[niallobrien]

I'm working on a Yeoman generator and am wondering what's the best way to handle compiled css (from Gulp-Sass) for development vs production (dist)? I can use BrowserSync with Gulp no problem, but I'm working from a fork of generator-gulp-webapp in which I've replaced gulp-ruby-sass with gulp-sass (libsass) and I see that Connect serves the compiled css from .tmp/styles/ while developing (gulp watch). How can I achieve a similar process with Gulp-Browser-Sync? Thanks in advance.

[shakyShane]

Oh man - those tmp folder setups make me squirm. I've never had the need from them myself so I've not looked into this much.

Are you intending on keep the connect server?

[niallobrien]

Nah, I've already replaced Connect & LiveReload with BrowserSync. I'll probably just output the compiled main.css to be alongside main.scss and remove main.css in the clean task. Is this what you do?

[shakyShane]

I've used CSS preprocessors for a couple of years now and I've never understood the need for any type of .tmp directory. Just seems to complicate thing, don't you think? I normally just have the scss/less/stylus files in a separate directory and then always output the result into a css directory that is served to the browser.

[niallobrien]

Thanks Shane. Yeah, it does seem silly. Do you prefix your compiled css (hash or something) for cache purposes for your build tasks? I see that Yeoman doesn't seem to be doing this anymore (I'm sure it did before). Sorry to go a little off-topic.

[shakyShane]

haha that's alright.

I usually use version revving for production stuff. So that's either handled by a back-end, or something along these lines which inserts part of an MD5 hash into the filename.

Meaning I develop with SASS -> regular old CSS files (unminified, but usually autoprefixed). Then the build process will minify, version rev & upload to a CDN. (the mininfied, revved version never goes into git)

[niallobrien]

Thanks for your help @shakyShane. I'll add that in down the road, in the meantime here's what I got - Bootstrap + Gulp + Gulp-Sass (libsass) + BrowserSync. :) https://github.com/niallobrien/generator-gulp-bootstrap

[shakyShane]

With gulp, it's better to NOT use browser sync for the file watching.

Check out this example - notice that the first argument to browserSync is null & within other tasks you can trigger a reload

[niallobrien]

Thanks for the tip @shakyShane - really do appreciate it.

[shakyShane]

No probs.

This is a good example too https://github.com/shakyShane/jekyll-gulp-sass-browser-sync/blob/master/gulpfile.js

[niallobrien]

Thanks for your help. Would you mind taking a look at this gist and telling me what I'm doing wrong please? I'm getting an Object #

[shakyShane]

commented on it.

[niallobrien]

Thanks, it works! :) https://github.com/niallobrien/generator-gulp-bootstrap/blob/master/app/templates/gulpfile.js

[shakyShane]

I'd go even further and do this.

gulp.watch([
        "app/*.html"
    ]).on('change', function () {
        browserSync.reload();
    });

and then add this to the images/js tasks after writing files

.pipe(browserSync.reload({stream: true, once: true));

This way you're removing as much file-watching as possible, & that always gives you better performance

[niallobrien]

Great - thanks for that.

[niallobrien]

Thanks @shakyShane - I'm now trying to get gulp-plumber in there (which I can use fine on other projects). Although it catches the error...it seems to stop watching for changes at that point, which is a shame. https://gist.github.com/niallobrien/11220294

[adam-lynch]

Ooh, @niallobrien I think I'll be copying that $ convention for gulp-load-plugins. Lovely

[shakyShane]

Just looking back through this, I think I missed the point that all you really wanted was to serve assets from multiple directories... The server.baseDir option does actually accept an array of paths that can used by connect.

server: {
    baseDir: ["app", ".tmp"]
}

[niallobrien]

Cheers for your help Shane. One last question (if I haven't annoyed you enough already!) - https://gist.github.com/niallobrien/11324771 - This is what I have at the moment, however it's not automatically auto-updating the browser even though the terminal says that the main.css file was changed and it's injecting it into all connected browsers. If I manually refresh the browser, the changes are shown.

[robwierzbowski]

Documenting that baseDir can be an array would be helpful — came here looking for that info (and found it, so :+1: ). Thanks!