[SOLVED] How to use GULP on Gomix?

Glitch Help
1

Hi,

I’m totally new to bundling and React, and I was wondering how can I use GULP on my gomix project.
I searched in the forum but only could find this post saying that we can

use grunt/gulp as you normally would

Reading the gulp documentation, I see that I have to create a gulpfile.js to declare my tasks and then type gulp in the command line. But there is no command line on Gomix.

I have the following file structure :

  • server.js
  • package.json
  • Client
    • App.js
    • Component1.js
    • Component2.js
    • …
  • public
    • index.html

What is the best approach to minify the client-side js and serve it as a bundle in Gomix ?

I guess there are several things that I don’t understand, could you please enlight my path ?

2

Hi Sladix,

thanks for asking, and we hope you’re enjoying your experience on Gomix :slight_smile: There is a couple ways to solve your problem.

The “fully automated way” is to call gulp from your package.json file, as part of the "start" script.

If you just want to give gulp a shot and see what happens, you can access the “experimental” command line. Put this bookmarklet on your bookmark bar:

javascript:(function () { var existingConsole = $(".custom-console"); if (existingConsole.length > 0) { existingConsole.remove(); } else { var consoleDiv = $( '<div id="activity-log" class="custom-console" style="overflow: hidden;">' ); var url = `https://api.${window.location.host}/${application.currentProject().name()}/console/${application.currentUser().persistentToken()}/`; consoleDiv[0].innerHTML = `<iframe src="${url}" style="width: 100%; height: 100%" />`; $("#activity-log").after( consoleDiv ); } })()

and you’ll have a nice terminal on your editor :slight_smile:

6 Likes
3

Hello etamponi,

Thanks for the answer, my experience with Gomix so far is just perfect, it’s so easy to use !!! The console is amazing =D

Ok it’s working now, I was just a little lost in all theses differents way of doing things !

I have another question now, how do I make gulp part of "start": "node server.js" in my package.json ?

4

One way you could do it is using another npm script stage, like in our Grunt example - the grunt script runs at the prepublish stage so it’s ready for when start gets called - https://gomix.com/#!/project/grunt-js.

You could also run a bash script from the start command, which allows you to put multiple commands in a .sh file.

5

Hi,

So i used

"scripts": {
    "prepublish": "gulp",
    "start": "node server.js"
  }

In my package.json but once Finished 'default' after 17 μs is done, the server doesn’t start. Also, the log loader and the one next to “show live” keep spinning.

I also created a sstart.sh containing :

gulp
node server.js

and then I set :

"scripts": {
	"start": "sstart.sh"
}

When I set up a bash script, I got the error message line 30: ./sstart.sh: Permission denied
Am I missing something ? :confused:

Here is my project URL btw : https://gomix.com/#!/project/tangy-beast

6

Ok my bad, gulp was not exiting because I added a watch task. Silly me.

Thanks for all the help !

1 Like
7

Glad you got it working!

1 Like
8

Here’s another approach, using the Glitch terminal: https://fourtonfish.com/blog/2017-07-23-glitch-gulp-absolutely-yes

In case anyone is still wondering about this :slightly_smiling_face: