Alternatives to gulp logo

Alternatives to gulp

Grunt, Webpack, npm, Yarn, and CodeKit are the most popular alternatives and competitors to gulp.
6.2K
4.3K
+ 1
1.7K

What is gulp and what are its top alternatives?

Build system automating tasks: minification and copying of all JavaScript files, static images. More capable of watching files to automatically rerun the task when a file changes.
gulp is a tool in the JS Build Tools / JS Task Runners category of a tech stack.
gulp is an open source tool with 31.6K GitHub stars and 4.4K GitHub forks. Here鈥檚 a link to gulp's open source repository on GitHub

gulp alternatives & related posts

Grunt logo

Grunt

3.7K
2.4K
713
3.7K
2.4K
+ 1
713
The JavaScript Task Runner
Grunt logo
Grunt
VS
gulp logo
gulp

related Grunt posts

Gustavo Mu帽oz
Gustavo Mu帽oz
Web UI Developer at Globant | 4 upvotes 22.7K views
Webpack
Webpack
Grunt
Grunt
gulp
gulp
Parcel
Parcel
#Merge
#WebPackDevServer

Using Webpack is one of the best decision ever. I have used to Grunt and gulp previously, but the experience is not the same, and despite I know there are other bundlers like Parcel, Webpack gives me the perfect balance between automatization and configuration. The ecosystem of tools and loaders is amazing, and with WebPack #merge, you can modularize your build and define standard pieces to assemble different build configurations. I don't like processes where you cannot see their guts, and you have to trust in magic a little bit too much for my taste. But also I don't want to reinvent the wheel and lose too much time configuring my build processes. And of course, I love #WebPackDevServer and hot reloading.

See more

related Webpack posts

Jonathan Pugh
Jonathan Pugh
Software Engineer / Project Manager / Technical Architect | 19 upvotes 242.2K views
Framework7
Framework7
JavaScript
JavaScript
TypeScript
TypeScript
Figma
Figma
Visual Studio Code
Visual Studio Code
Webpack
Webpack
Babel
Babel
Ruby
Ruby
HTML5
HTML5
CouchDB
CouchDB
Pouchdb
Pouchdb
Font Awesome
Font Awesome
Apache Cordova
Apache Cordova
CSS 3
CSS 3
PhoneGap
PhoneGap
#Css
#CSS3
#SCSS
#Sass
#Less
#Electron
#HandleBars
#Template7
#Sketch
#GraphQL
#HTML5
#GraphCool

I needed to choose a full stack of tools for cross platform mobile application design & development. After much research and trying different tools, these are what I came up with that work for me today:

For the client coding I chose Framework7 because of its performance, easy learning curve, and very well designed, beautiful UI widgets. I think it's perfect for solo development or small teams. I didn't like React Native. It felt heavy to me and rigid. Framework7 allows the use of #CSS3, which I think is the best technology to come out of the #WWW movement. No other tech has been able to allow designers and developers to develop such flexible, high performance, customisable user interface elements that are highly responsive and hardware accelerated before. Now #CSS3 includes variables and flexboxes it is truly a powerful language and there is no longer a need for preprocessors such as #SCSS / #Sass / #less. React Native contains a very limited interpretation of #CSS3 which I found very frustrating after using #CSS3 for some years already and knowing its powerful features. The other very nice feature of Framework7 is that you can even build for the browser if you want your app to be available for desktop web browsers. The latest release also includes the ability to build for #Electron so you can have MacOS, Windows and Linux desktop apps. This is not possible with React Native yet.

Framework7 runs on top of Apache Cordova. Cordova and webviews have been slated as being slow in the past. Having a game developer background I found the tweeks to make it run as smooth as silk. One of those tweeks is to use WKWebView. Another important one was using srcset on images.

I use #Template7 for the for the templating system which is a no-nonsense mobile-centric #HandleBars style extensible templating system. It's easy to write custom helpers for, is fast and has a small footprint. I'm not forced into a new paradigm or learning some new syntax. It operates with standard JavaScript, HTML5 and CSS 3. It's written by the developer of Framework7 and so dovetails with it as expected.

I configured TypeScript to work with the latest version of Framework7. I consider TypeScript to be one of the best creations to come out of Microsoft in some time. They must have an amazing team working on it. It's very powerful and flexible. It helps you catch a lot of bugs and also provides code completion in supporting IDEs. So for my IDE I use Visual Studio Code which is a blazingly fast and silky smooth editor that integrates seamlessly with TypeScript for the ultimate type checking setup (both products are produced by Microsoft).

I use Webpack and Babel to compile the JavaScript. TypeScript can compile to JavaScript directly but Babel offers a few more options and polyfills so you can use the latest (and even prerelease) JavaScript features today and compile to be backwards compatible with virtually any browser. My favorite recent addition is "optional chaining" which greatly simplifies and increases readability of a number of sections of my code dealing with getting and setting data in nested objects.

I use some Ruby scripts to process images with ImageMagick and pngquant to optimise for size and even auto insert responsive image code into the HTML5. Ruby is the ultimate cross platform scripting language. Even as your scripts become large, Ruby allows you to refactor your code easily and make it Object Oriented if necessary. I find it the quickest and easiest way to maintain certain aspects of my build process.

For the user interface design and prototyping I use Figma. Figma has an almost identical user interface to #Sketch but has the added advantage of being cross platform (MacOS and Windows). Its real-time collaboration features are outstanding and I use them a often as I work mostly on remote projects. Clients can collaborate in real-time and see changes I make as I make them. The clickable prototyping features in Figma are also very well designed and mean I can send clickable prototypes to clients to try user interface updates as they are made and get immediate feedback. I'm currently also evaluating the latest version of #AdobeXD as an alternative to Figma as it has the very cool auto-animate feature. It doesn't have real-time collaboration yet, but I heard it is proposed for 2019.

For the UI icons I use Font Awesome Pro. They have the largest selection and best looking icons you can find on the internet with several variations in styles so you can find most of the icons you want for standard projects.

For the backend I was using the #GraphCool Framework. As I later found out, #GraphQL still has some way to go in order to provide the full power of a mature graph query language so later in my project I ripped out #GraphCool and replaced it with CouchDB and Pouchdb. Primarily so I could provide good offline app support. CouchDB with Pouchdb is very flexible and efficient combination and overcomes some of the restrictions I found in #GraphQL and hence #GraphCool also. The most impressive and important feature of CouchDB is its replication. You can configure it in various ways for backups, fault tolerance, caching or conditional merging of databases. CouchDB and Pouchdb even supports storing, retrieving and serving binary or image data or other mime types. This removes a level of complexity usually present in database implementations where binary or image data is usually referenced through an #HTML5 link. With CouchDB and Pouchdb apps can operate offline and sync later, very efficiently, when the network connection is good.

I use PhoneGap when testing the app. It auto-reloads your app when its code is changed and you can also install it on Android phones to preview your app instantly. iOS is a bit more tricky cause of Apple's policies so it's not available on the App Store, but you can build it and install it yourself to your device.

So that's my latest mobile stack. What tools do you use? Have you tried these ones?

See more
Johnny Bell
Johnny Bell
Senior Software Engineer at StackShare | 17 upvotes 138.1K views
Webpack
Webpack
Node.js
Node.js
Yarn
Yarn
npm
npm
Babel
Babel
Prettier
Prettier
ESLint
ESLint
#ES6
#ES5

So when starting a new project you generally have your go to tools to get your site up and running locally, and some scripts to build out a production version of your site. Create React App is great for that, however for my projects I feel as though there is to much bloat in Create React App and if I use it, then I'm tied to React, which I love but if I want to switch it up to Vue or something I want that flexibility.

So to start everything up and running I clone my personal Webpack boilerplate - This is still in Webpack 3, and does need some updating but gets the job done for now. So given the name of the repo you may have guessed that yes I am using Webpack as my bundler I use Webpack because it is so powerful, and even though it has a steep learning curve once you get it, its amazing.

The next thing I do is make sure my machine has Node.js configured and the right version installed then run Yarn. I decided to use Yarn because when I was building out this project npm had some shortcomings such as no .lock file. I could probably move from Yarn to npm but I don't really see any point really.

I use Babel to transpile all of my #ES6 to #ES5 so the browser can read it, I love Babel and to be honest haven't looked up any other transpilers because Babel is amazing.

Finally when developing I have Prettier setup to make sure all my code is clean and uniform across all my JS files, and ESLint to make sure I catch any errors or code that could be optimized.

I'm really happy with this stack for my local env setup, and I'll probably stick with it for a while.

See more

related npm posts

Johnny Bell
Johnny Bell
Senior Software Engineer at StackShare | 17 upvotes 138.1K views
Webpack
Webpack
Node.js
Node.js
Yarn
Yarn
npm
npm
Babel
Babel
Prettier
Prettier
ESLint
ESLint
#ES6
#ES5

So when starting a new project you generally have your go to tools to get your site up and running locally, and some scripts to build out a production version of your site. Create React App is great for that, however for my projects I feel as though there is to much bloat in Create React App and if I use it, then I'm tied to React, which I love but if I want to switch it up to Vue or something I want that flexibility.

So to start everything up and running I clone my personal Webpack boilerplate - This is still in Webpack 3, and does need some updating but gets the job done for now. So given the name of the repo you may have guessed that yes I am using Webpack as my bundler I use Webpack because it is so powerful, and even though it has a steep learning curve once you get it, its amazing.

The next thing I do is make sure my machine has Node.js configured and the right version installed then run Yarn. I decided to use Yarn because when I was building out this project npm had some shortcomings such as no .lock file. I could probably move from Yarn to npm but I don't really see any point really.

I use Babel to transpile all of my #ES6 to #ES5 so the browser can read it, I love Babel and to be honest haven't looked up any other transpilers because Babel is amazing.

Finally when developing I have Prettier setup to make sure all my code is clean and uniform across all my JS files, and ESLint to make sure I catch any errors or code that could be optimized.

I'm really happy with this stack for my local env setup, and I'll probably stick with it for a while.

See more
npm
npm
Yarn
Yarn
#PackageManagers

#PackageManagers After a long time where npm failed to install packages and lot's of googling on answers, we switched to Yarn and alomost all those problems where solved. Today i mostly use "yarn add" instead of "npm install --save".

See more
Yarn logo

Yarn

3.8K
2.5K
116
3.8K
2.5K
+ 1
116
A new package manager for JavaScript
Yarn logo
Yarn
VS
gulp logo
gulp

related Yarn posts

Johnny Bell
Johnny Bell
Senior Software Engineer at StackShare | 17 upvotes 138.1K views
Webpack
Webpack
Node.js
Node.js
Yarn
Yarn
npm
npm
Babel
Babel
Prettier
Prettier
ESLint
ESLint
#ES6
#ES5

So when starting a new project you generally have your go to tools to get your site up and running locally, and some scripts to build out a production version of your site. Create React App is great for that, however for my projects I feel as though there is to much bloat in Create React App and if I use it, then I'm tied to React, which I love but if I want to switch it up to Vue or something I want that flexibility.

So to start everything up and running I clone my personal Webpack boilerplate - This is still in Webpack 3, and does need some updating but gets the job done for now. So given the name of the repo you may have guessed that yes I am using Webpack as my bundler I use Webpack because it is so powerful, and even though it has a steep learning curve once you get it, its amazing.

The next thing I do is make sure my machine has Node.js configured and the right version installed then run Yarn. I decided to use Yarn because when I was building out this project npm had some shortcomings such as no .lock file. I could probably move from Yarn to npm but I don't really see any point really.

I use Babel to transpile all of my #ES6 to #ES5 so the browser can read it, I love Babel and to be honest haven't looked up any other transpilers because Babel is amazing.

Finally when developing I have Prettier setup to make sure all my code is clean and uniform across all my JS files, and ESLint to make sure I catch any errors or code that could be optimized.

I'm really happy with this stack for my local env setup, and I'll probably stick with it for a while.

See more
npm
npm
Yarn
Yarn
#PackageManagers

#PackageManagers After a long time where npm failed to install packages and lot's of googling on answers, we switched to Yarn and alomost all those problems where solved. Today i mostly use "yarn add" instead of "npm install --save".

See more
CodeKit logo

CodeKit

50
52
23
50
52
+ 1
23
Mac app that compiles Less, Sass, Stylus, Jade, Haml, Javascript, and Markdown files automatically each time you save
CodeKit logo
CodeKit
VS
gulp logo
gulp
Parcel logo

Parcel

372
67
5
372
67
+ 1
5
馃摝馃殌 A fast, zero configuration web application bundler
Parcel logo
Parcel
VS
gulp logo
gulp

related Parcel posts

Gustavo Mu帽oz
Gustavo Mu帽oz
Web UI Developer at Globant | 4 upvotes 22.7K views
Webpack
Webpack
Grunt
Grunt
gulp
gulp
Parcel
Parcel
#Merge
#WebPackDevServer

Using Webpack is one of the best decision ever. I have used to Grunt and gulp previously, but the experience is not the same, and despite I know there are other bundlers like Parcel, Webpack gives me the perfect balance between automatization and configuration. The ecosystem of tools and loaders is amazing, and with WebPack #merge, you can modularize your build and define standard pieces to assemble different build configurations. I don't like processes where you cannot see their guts, and you have to trust in magic a little bit too much for my taste. But also I don't want to reinvent the wheel and lose too much time configuring my build processes. And of course, I love #WebPackDevServer and hot reloading.

See more
rollup logo

rollup

56
25
4
56
25
+ 1
4
The next-generation JavaScript module bundler
rollup logo
rollup
VS
gulp logo
gulp
Webpacker logo

Webpacker

29
26
0
29
26
+ 1
0
Use Webpack to manage app-like JavaScript modules in Rails (by Rails)
    Be the first to leave a pro
    Webpacker logo
    Webpacker
    VS
    gulp logo
    gulp
    Laravel Elixir logo

    Laravel Elixir

    17
    17
    0
    17
    17
    + 1
    0
    It provides a clean, fluent API for defining basic Gulp tasks for your Laravel application
      Be the first to leave a pro
      Laravel Elixir logo
      Laravel Elixir
      VS
      gulp logo
      gulp
      Backpack logo

      Backpack

      9
      18
      9
      9
      18
      + 1
      9
      Build Node.js backends with Webpack
      Backpack logo
      Backpack
      VS
      gulp logo
      gulp
      System.js logo

      System.js

      9
      4
      2
      9
      4
      + 1
      2
      Dynamic ES module loader
      System.js logo
      System.js
      VS
      gulp logo
      gulp
      Jetpack logo

      Jetpack

      5
      7
      0
      5
      7
      + 1
      0
      Webpack made more convenient
        Be the first to leave a pro
        Jetpack logo
        Jetpack
        VS
        gulp logo
        gulp
        Just logo

        Just

        4
        7
        0
        4
        7
        + 1
        0
        A library that organizes build tasks for your JS projects
          Be the first to leave a pro
          Just logo
          Just
          VS
          gulp logo
          gulp
          Pingy CLI logo

          Pingy CLI

          3
          10
          6
          3
          10
          + 1
          6
          The Simple Front End Build Tool
          Pingy CLI logo
          Pingy CLI
          VS
          gulp logo
          gulp
          StealJS logo

          StealJS

          2
          2
          0
          2
          2
          + 1
          0
          A JavaScript dependency loader and builder
            Be the first to leave a pro
            StealJS logo
            StealJS
            VS
            gulp logo
            gulp
            Fly.js logo

            Fly.js

            2
            9
            0
            2
            9
            + 1
            0
            New generation build system
              Be the first to leave a pro
              Fly.js logo
              Fly.js
              VS
              gulp logo
              gulp
              Metro Bundler logo

              Metro Bundler

              2
              1
              0
              2
              1
              + 1
              0
              馃殗 The JavaScript bundler for React Native
                Be the first to leave a pro
                Metro Bundler logo
                Metro Bundler
                VS
                gulp logo
                gulp
                Pika Pack logo

                Pika Pack

                1
                3
                0
                1
                3
                + 1
                0
                馃摝鈿★笍 npm package building, reimagined
                  Be the first to leave a pro
                  Pika Pack logo
                  Pika Pack
                  VS
                  gulp logo
                  gulp
                  Maid logo

                  Maid

                  1
                  2
                  0
                  1
                  2
                  + 1
                  0
                  Markdown driven task runner
                    Be the first to leave a pro
                    Maid logo
                    Maid
                    VS
                    gulp logo
                    gulp