Why We Should Stop Using Grunt & Gulp

Everyone knows jQuery, I’m sure it has saved most of us from cross-browser hell in the past! I have included it here because I often have projects that still require IE8 support. In my opinion it is much easier to include jQuery, than pick out a host of micro-libs to do the same job, with all their custom API’s and documentation. Using both libraries together can be a real life-saver when it comes to refactoring code. It is very quick and easy to see when new code changes have broken functionality (assuming you have written your tests correctly!). Chai is a BDD / TDD assertion library that can be used with any testing framework, but is often used in conjunction with Mocha. It comes with a whole set of API’s that allow you to write your tests in whatever way you prefer .

Individual modules are compiled into a single javascript file which is written to dist/js/app.js. It is then minimified usingUglify.js and written todist/js/app.min.js. Just found an awesome new tool which will revolutionise your build process? Now just wait for someone to browserify gulp write a wrapper for Grunt/Gulp/Brocolli, or write it yourself. Rather than just learning the command line for the tool you want to use, you now have to learn its programatic API, plus the API for your build tool. Sindre Sorhus can only write so many of these tools for you.

By default, most SiteChef themes come with a ready-madeGulp asset pipeline which is automatically compiled on sitechef serve. Assets are also recompiled on filechange using either Gulp-Watch or using Jump-Up, a watcher and desktop notifier. In a follow up post, I’ve detailed the ins and outs of npm and how to use it effectively, showing how you can have an extendable config, multiple tasks, streaming tasks, and more. Turns out one of the main purported benefits of Gulp – its streaming capabilities – doesn’t actually work with all of the available plugins. I tried several more plugins (JSHint also didn’t work), but at the time many of them didn’t support streaming. Gulp has plugins to mitigate this problem – but it just feels like piling more tools on top of a badly solved problem.

Installation

This is my first iteration of a module system I plan to use on new projects going forwards, and it will continue to evolve to fit particular project requirements as they are discovered. You can find all the code, along with the very simple example on GitHub. Feel free to use it if you like, or even suggest improvements. I’m always open to constructive criticism so raise an issue or get in contact with me via the contact page. The code below shows a very simple example on how modules are imported into the main index.js file, then Browserify does the rest for you. The init() method kicks off the DOM interaction in module 1, and a sample unique array is being imported in from module 2. Browserify is the “glue” that brings all of these technologies together.

With browserify, we can implement dependency management on the browser. It also will bundle the code into one file in an efficient way to not repeat dependiencies that are used more than once. Mocha is a very popular JavaScript testing framework that runs on Node.js.

Configuration

Grunt receives a whopping 30,000 downloads most days, and Gulp has a respectable 15,000 daily downloads. Build systems seem to be the tool du jour of the JavaScript community. I’ve used Gulp and Grunt in several Programming Outsourcing projects (mostly closed-source projects, but some open-source, such as Tempus). You can find the version number in your package.json file. Can you please help me about setting up gulp 4.0 and react 16.9.

JetBrains WebStorm is my editor of choice, just remember you may need to point your IDE towards the mocha.opts file in the test settings. I don’t think I really need to explain this one do I?

To then ensure that we are compiling down to the correct compatibility level, we will specify our desired preset in our gulpfile configuration. Just like every other front-end developer who likes to changes their mind about the best build tools at a moment’s notice, yesterday I decided that Gulp and Browserify were for me. However, I am currently working on a PhoneGap project and the workflow can be a little different. When developing PhoneGap applications some people like to use Ripple, a little browser-based emulator for the various devices on which you might run your PhoneGap application. The second, jQuery requires a window with a document, took a good few hours to fix. I tried everything I could find on Stack Overflow including jsdom and mocha-jsdom; But no matter what setup I tried, the error still occurred.

Mocha & Chai

Oh, and if you liked this post, I did a follow up on how to use npm as a build tool. Compare this to my job prior to that where we had hundreds of lines of Grunt config and tonnes of plugins including custom ones to do a similar set of tasks. exit code, meaning putting this into a continuous integration environment such as Travis or Jenkins it would show a bunch of failures, then pass.

Gulp also promises to have a really simple API – “just learn 5 commands and you know it”. Those 5 API commands hide the complexity of Gulps file management utility – VinylFS – and its task runner framework – Orchestrator. Both of these had virtually no documentation, and so trying to work out how to use these resulting in looking through code. The preset-env package is important because this is what specifies our compilation ruleset.

Compiling Es6 With Gulp And Babel

Using this setup, it is easy to create private variables and methods inside the modules. A developer then only need expose what is required to the wider application using the export keyword. The temporary SCSS files are compiled to the tmp/ and are not uploaded to the server on sitechef publish. The configuration for which assets are compiled is contained in gulpfile.jsand imports different scripts from the gulpTasks/ directory.

Babel is a ES2015 compiler, that will transform the latest features back into ES5 compatible code so older browsers will still work. It even has the ability to polyfill methods that older browsers don’t support; so there’s no reason not to start learning and using ES2015 today.

Babel

I’m pretty sure in V4 they removed gulp.task for gulp.series. You will need to change the last few lines that are used to run tasks to this new format. ##gulp_starterA useful browserify gulp repository that explains how many of gulp’s features work and contains an example project to get familiar with it. Or what I prefer to do is run the tests directly in my IDE.

The gulp-babel plugin is pretty simple to use, and just requires us to add a new pipe for Babel as we would do for any other gulp plugin i.e. for SCSS compilation, sourcemaps etc. The only caveats to that statement are that we will also need a relevant Babel preset and a browser polyfill. Luckily, there is an excellent NPM package called gulp-babel which will do the heavy lifting for us. This method is a simple way of implementing Javascript compilation which can offer huge benefits for small projects and proofs of concept and should take only a few minutes to add to your stack. ##browserifyBrowsers do not allow us to use the require method from Node.js.

How To Use Gulp, Browserify And Ripple In Harmony For Your Phonegap App

Just around the time I finished, Grunt 0.4 came out and I spent another 2 weeks waiting for each plugin to migrate to 0.4, and slowly updating our Gruntfile. Granted, Grunt has matured a lot since those days – the API tends to be relatively stable by now.

With all of these plugins and tools, things can start to become a pain to update. The project I was working on at the time had some build browserify gulp scripts that were badly built by inexperienced Node.js devs – using a custom built task runner – so I decided to switch it all to Grunt.

• Gulp has plugins to mitigate this problem – but it just feels like piling more tools on top of a badly solved problem.
• The gulp-babel plugin is pretty simple to use, and just requires us to add a new pipe for Babel as we would do for any other gulp plugin i.e. for SCSS compilation, sourcemaps etc.
• The configuration for which assets are compiled is contained in gulpfile.jsand imports different scripts from the gulpTasks/ directory.
• It also will bundle the code into one file in an efficient way to not repeat dependiencies that are used more than once.
• In my opinion it is much easier to include jQuery, than pick out a host of micro-libs to do the same job, with all their custom API’s and documentation.
• ##browserifyBrowsers do not allow us to use the require method from Node.js.

Its basically a template development environment with all of my favorite dependencies. It also might be useful to look at, if you are learning how to use Elm. To keep frontend code reusable and modular, default themes on SiteChef come setup with a Browserify pipeline. For me, especially more recently, I feel like many of these tools are solving the problem badly. Let me cover some of the reasons why I think these tools are bad choices.

Elm Gulp Browserify Boilerplate

The CI just sees log output and a friendly exit code and assumes everything was A-OK. Overcoming these kinds of hurdles when all you want to do is set up some tooling can be quite a souring experience.

It allows a developer to write and run a set of tests across their JavaScript code, and accurately report the results. The problem with introducing new language features on the web platform is you still need to support older browsers. Because of this, nobody wants to write some lovely ES2015 code, and then have to write another version just for older browsers. Older browsers won’t know how to interpret these new features, and the page will break.

Install Gulp

I have an existing reactjs project and I am trying to implement gulp 4. A browser polyfill plugin – this will emulate a full ES6 environment and fill any holes created by Babel optimising for Node.

Reviewed by: Connie Loizos