How to setup a Phoenix 1.3 app with Gulp/ npm scripts

Phoenix Forum Questions / Help
,
21

cool :+1:

22

The main issue that I see with that transition is that nothing in Brunch prepares you for the abstractions that Webpack uses. I think with Webpack the important thing is not to be afraid of the configuration files. After being used to tools that exclusively use JSON for configuration, working inside a CommonJS module that can dynamically assemble the configuration object seems a bit strange. But as you are assembling more and more powerful configurations, you tend to develop the skill that comes in handy outside of Webpack - writing Node.js glue code.

Whenever there is a job that isn’t covered by Webpack and that other tool still has a gimped CLI (i.e. npm script is not enough), you still have the fallback of cobbling together a Node.js script that does what you need to do - without necessarily escalating to Grunt/Gulp and hoping there already is a usable plugin (or having to write one yourself).

Now if you are doing a lot of esoteric stuff, Gulp’s infrastructure can be helpful in the long run to get away from the nitty gritty of developing Node.js scripts but I’m not sure many people would actually get a sufficiently high return on their Gulp investment.

23

NPM scripts can just call into js scripts too, so you can do anything. I do that in a few cases just fine.

24

In that context I was deliberately confining myself to the entry in the scripts member of the package.json file which uses whatever command line interface the “program in use” offers. If you run a shell script from there, your shell scripting skill comes into play; if you run a Node.js script from there then that skill comes into play.

Hypothetically “npm scripts” can do anything if you are willing to write the necessary Node.js scripts. But I don’t think that is what Keith Cirkel had in mind when he suggested to use “npm as a Build Tool”. The idea is to stick primarily with CLI, some shell scripts and the occasional Node.js script.

Once you are writing too many Node.js scripts, it’s time to look into something like Gulp/Grunt/etc.

25

Exactly this, you only use these when no other choice because of poorly designed API’s. :slight_smile:

26

To note that in order to add phoenix.js I needed to add import "phoenix" to app.js.
Strange because by default, app.js only has an import "phoenix.html" statement, and phoenix.js is loaded anyway :thinking:.

27

Given

import {Socket} from "phoenix";

in assets/js/socket.js, phoenix.js should automatically be pulled in once you have

import socket from "./socket";

in assets/js/app.js (which is commented out by default). So a

import 'phoenix';

should not be necessary in assets/js/app.js

When you comment out

// import socket from "./socket";

neither phoenix.js or socket.js are included in the bundle.

28

Right, that’s it. I wasn’t getting it because on a normal brunch app all that code is compiled by default, but despite that one must comment out

import socket from "./socket";

for it to run.

29

Here’s the repo showing how to setup a phoenix 1.3 app with npm scripts instead of brunch: npm-scripts-example;

1 Like
30

I’m ready to minify the js output for production. I’ve been trying and searching stuff for hours with no results. Is there any way to insert something like .pipe(uglifyjs) in the browserify pipeline to get this to work?

31

Shot in the dark (i.e. possible starting point):

32

@peerreynders Thanks so much for the quick response.
I had seen that package, but it says it’s no replacement to using uglifyjs:

Uglifyify provides an additional optimization when used with Uglify, but does not provide all of the optimization that using Uglify on its own does, so it’s not a replacement.

33

It shows the alternative:

browserify index.js | uglifyjs -c > bundle.js

what prevents you from doing that in an npm script?

Ultimately uglifyjs can be used on whatever output browserify generates - command line usage.

34

I need to add all the other stuff (babel, exorcist, configs) and i’m trying to figure out if I can maintain the build.js file. And since you changed the cli approach to a programmatic approach to insert source maps I thought it would be difficult to do all that with a npm script.

35

Looks like Phoenix 1.4 will be moving to Webpack 4 (which I think Chris has said is a lot simpler than previous versions - hence why they’re moving to it now).

I think he mentions it in this talk:

:slight_smile:

1 Like
36

Have you looked at minify-stream?

2 Likes
37

Yeah I saw that. Maybe on the next project I’ll try it.

1 Like
38

I don’t know how I missed that. That’s exactly what I was looking for, works fine! Just needed to drop .pipe(minifyStream()) inside the pipeline:

  .transform(babelify.configure(config), babelrc)
  .bundle()
  .pipe(minifyStream())
  .pipe(exorcist(mapPath))
  .pipe(target);