look into npm scripts as a build tool?

[jonXmack]

This isn't a bug per se I just wanted to start a discussion on using npm's scripts as a build tool rather than gulp. There was a post on css tricks today which I didn't get a chance to read until this evening so haven't spoken to Jake about it yet, but I figured the two of you will probably have some opinions on it and potentially reasons for and against.

http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/ https://css-tricks.com/why-npm-scripts/ https://github.com/damonbauer/npm-build-boilerplate

[danimalweb]

I skim read the article and I definitely feel some of the pain points he mentions with using gulp.

If this reduces complexity (no gulp file to worry about), with less dependencies (current multiple version / outdated madness) while reducing build time or not increasing it by much. Then I'm all for it.

This would be well suited a cutting a new branch and having a play around with it. Initial thoughts are that 80% of what is going on in the current gulp file could be easily ported to npm commands.

The remaining 20% could be interesting. We currently pass in a few custom flags for conditional statements and read a manifest.json file for the asset builder. The asset builder is something we are considering getting rid off at the same time as dropping bower in favor of npm for front end deps for v2 #90. It looks like we can create out own js files to do anything more complicated than the basic npm commands.

I'd be interested in seeing how this handles build errors.

Would this work on windows machines? - Do we have anyone that uses Windows with Tofino?

@mrchimp has been working some magic with npm and front end deps recently.

[mrchimp]

I like the sound of this. I've always felt that gulp is needlessly complex, especially when you have a build as big as the Tofino one. I haven't touched Tofino since last year so I may be a bit out of touch with what you guys have been doing...

I've ditched bower in my latest (Laravel) project and found no problems. One thing we are doing in Tofino is using the bower main thing to pull in the files from packages automatically. I've been using Browserify which makes this redundant. If I need a dependency I just install it with npm and then do var React = require('react'); in the files that need it and it all gets sorted out at compile time. It's a much cleaner way of working as the structure is in the code, not in some external files or whatever. The downside is you need to learn to write modern Javascript. The good part is that you can now write modern Javascript!

I'm not sure the best way to get scss/css files from packages without Bower's main. A bunch of @imports in main.scss? Issues with that are it could get pretty big and ugly, though it is at least explicit. Also it relies on the package maintainers not changing their file structure.

I think images and svgs should be relatively straight forward - we just throw a bunch of directories at the npm packages and spit out the result into the build folder.

I think this would all work on Windows but I don't really care to be honest. If you're on windows you've got bigger problems. Andrew devs on a windows machine but all the code runs on Linux boxes.

We should make a list of all the things we need our build to do. I'll start:

• empty the dist folder
• concat? This shouldn't be necessary with js any more. Not sure about css.
• autoprefix css
• minify css
• lint css/js/php, js code style check
• fix lint errors (has anyone been using this?)
• make sourcemaps
• minify/compress svgs, js, css, images
• make svg sprites
• notifications when things finish - this might be a tricky one but it's really useful
• make pot files
• copy font files
• watch for updates

Have I missed anything?

In other news, Grunt 1.0.0-rc1 has just been released. lol.

[danimalweb]

For getting the css/scss we are currently explicitly setting this ourselves for Bootstrap so continuing to do the same would be no big deal IMO. From what I can tell, there is nothing else we need to pull in. The CSS from other deps is usually pretty bad anyway and I often roll in my own rewritten scss version or explicitly pull in their scss version of one exists.

Looks like package.json has a main tag for js files?

One feature I really like in Tofino is that the JS files from each frontend dep is pulled automatically and I can override and specify if I want to add them to the head.js or main.js files.

I don't use the auto fix for JS and PHP lint errors because I don't trust code fixing code enough and fixing it by hand is quick enough. I vote to remove both of these gulp tasks.

I also plan on removing the translate pot file generation and not every website needs multilingual and there are other options than a pot file for multilingual websites.

I've been hearing good things about eslint. We should consider dropping the current js linters and use this instead.

We need a task for Browserify and the new Critical CSS task which is going into v1.1.

[danimalweb]

Closing until we are better positioned to discuss this again. Gulp seems to be working well enough for now. Check your run times for the full gulp task and let me know if its becoming painful.