Need to speed up scripts task

sage
1

I’m using Sage with the provided gulp task.

The scripts task takes ~5 seconds. Because I need to use es6 modules, I also added es6-module-transpiler to the task which adds another ~5 seconds.
10 seconds is too slow for a dev environment imo.

So I thought maybe the task could be simplified by not compiling, minifying etc all the vendor stuff. Removing the libs from bower_components reduces the build time to ~200 ms.

Could really use some comments or help here / tips on how to fix the gulp task. :slight_smile:

1 Like
2

I have incremental builds in the pipe. That will drastically speed up compiles without sacrificing dev/prod parity.

In the meantime: you can hide uglification behind a flag with gulpif. For instance add a ‘–fast’ flag. Look at how the --production flag is implemented.

Can provide code but moving today -> afk.

1 Like
3

do you have a public branch somewhere? I was starting to look at this too.

4

So far I am testing different tools in isolation to get a feel for how they work/limitations. Have not touched sage gulpfile yet.

For reference, this is currently my gold standard for incremental builds: https://github.com/clippy-io/clippy.io/blob/master/Makefile (disclosure: this is my project)

If we do our jobs properly we will basically port the functionality nailed down in the 1980’s with Make to gulp. What is old is new again.

5

So looking at the Makefile I take it your project uses Browserify (fixes ES6 modules in my case) and watchify which handles incremental builds.

Looks pretty sweet. Although at this point I might just end up writing a npm build script instead. Just doesn’t feel right importing browserify into gulp imo, and I’d rather use npm than make.

6

Sounds like you don’t understand what make does

7

You’re right. What are the advantages of make over npm run? What does it do that npm can’t do?

8

Yes would very much like to explain this. Explaining how this works will bring us all onto the same page as to how I want the incremental builds to work. I’ll try to get to this today.

1 Like
9

To give an example of austin’s suggestion, try this:

  1. Add a variable to the enabled object:

    // CLI options
    var enabled = {
    // Enable static asset revisioning when --production
    rev: argv.production,
    // Disable source maps when --production
    maps: !argv.production,
    // Fail styles task on error when --production
    failStyleTask: argv.production,
    uglify: !argv.fast
    };
    In this case I used “uglify”.

  2. use an $.if check to not uglify if the --fast flag is set
    change the jsTasks pipe:

    .pipe($.uglify)
    to

    .pipe(function() {
    return $.if(enabled.uglify,$.uglify());
    })

10

Yup this is what I ended up doing.

It still doesn’t solve the slow es6 module transpiling but it’ll do until incremental building is in place.

11

Hi metind,

Would you mind sharing your gulpfile with me? I’m trying to get the babel es6 transpiler working in my Sage pipeline but haven’t had success.

Thanks,
Jason

12

I did get babel to transpile, but because it doesn’t include a loader in the browser (“require is not defined”) I had to use something else. So I found gulp-es6-module-transpiler which does work.

var es6 = require('gulp-es6-module-transpiler');

then

.pipe(es6, {formatter: 'bundle' })

right before the pipe to concat.

13

Ah. Did you have to name your es6 files with an extension other than .js? I’m trying to figure out how to get only my app-specific es6 modules to run through that (and not third-party libraries like jquery).

Thanks,
Jason

14

If you had any example of importing/exporting your files that would be helpful to (perhaps your version of main.js)?

-J

15

Nope, this is not possible with how the gulpfile is currently written. As you can see in my original post:

this is exactly the problem :smile:

16

Afk but previous discussion about browserify and babel Gulp and Browserify/Webpack in Sage?

I would recommend using npm + browserify + babel (as a browserify transform) for your app scripts in a separate task that is a dependency of the main JS task.

17

My head…it hurts…so bad :smile:

I followed the link you provided (thanks for that). A more complete example of integrating this with my sage gulpfile would be helpful if it’s not too much trouble?

-J

18

Yeah sure, I’ll write a blog post.

Edit: or you can just hire me and I’ll do it for you right now lol

19

I prefer the former :smile: