Anyone has an example of getting to work Gulp as an external_pipeline on dev and build tasks?
Thanks!
2 Likes
Hi there!
I was experimenting with this just this morning, so I figured I would put up an example repo to show you how I got a basic Gulp task running.
In the config.rb file, you’ll need to define your external pipeline settings. Here are mine. (note that I also set my images path to point to the post-minfied images directory & I’m also ignoring the pre-minified images directory on build)
The way I understood these configs was: name gets set to…the name of your external pipeline task, command is the command that you want to run (in mine, I set this to my default Gulp task - unless I’m building, then I run my buildProd task) with the pointers to the associated Node module(s).
For your reference, I was following this: https://github.com/middleman/middleman-guides/commit/1a253a1ea5b9915a0cc10610f859813e41767854
Hopefully, that sets you in the right direction. I’m sure we’ll gain more insight on this as more folks use v4, but I was happy to see that I could get things working with my initial stab at this!
2 Likes
thanks for your reply!
I’m trying to replace Middleman SASS processing and Livereload with Gulp tasks for Development with no luck… did you try it?
Here’s an informative video from a site called Watch and Learn which demonstrates how to use gulp-livereload instead of MM’s version.
Sass might be a little more sticky. Any particular reason why you don’t want to use MM Sass processing?
I did not try to replace either Middleman Sass or LiveReload with Gulp tasks. However, you may be interested to know that you can use SassC with Middleman.
I know that there seems to be some interest in getting Browsersync working with Middleman, but I haven’t seen any solid write-ups about it/don’t know if anyone has developed a plugin for it.
Yes I know. That question was directed to @ibarral.
Good to know about SassC. Thanks!
As for Browsersync, I don’t believe there is a plugin yet. I would love to see one. Here is an interesting article on using Browsersync with MM. So far though, I’ve not gotten it to work in practice. When proxying Browser sync in front of MM’s server, Browser sync doesn’t seem to pick up files changes for some reason.
Have you checked this post? The template included has everything I needed to set up my own gulp external pipeline, with Node-Sass and Browsersync.
This also might be helpful for people wanting to do gulp + Middleman: https://www.youtube.com/watch?v=-io8EeB3GHI
1 Like
I was looking for the same but couldn’t find any with the current versions.
So I made a Boilerplate. Hope this helps anyone who needs it.
2 Likes
@tarik, thanks for the Boilerplate. I’ve tried it (with success) and I plan to finally move from Sprockets and Ruby-Sass to current suggested setup with SassC and Gulp as a means to compile my .js (currently just the simplest case of JS-contatenation, I don’t use much more).
After analyzing you code, I have a question: why your gulpfile.js is watching *.erb files along with *.js? The middleman-livereload doesn’t do that by itself? I removed that line from my gulpfile and it works as expected. I checked modification of one JS file, one SCSS file (shouldn’t be related anyway) and my HAML files (instead of ERB, yes, before deleting this questioned line I changed it to watch for HAML).
gulp.watch('source/**/*.haml').on('change', browserSync.reload); // this line deleted
yes you are right, it is unnecessary.
I probably should modify it as well. thanks for pointing it out.