Category: Grunt

Setting up an ES6 Project Using Babel and webpack

In this article, we’re going to look at creating a build setup for handling modern JavaScript (running in web browsers) using Babel and Webpack. This is needed to ensure that our modern JavaScript code in particular is made compatible with a wider range of browsers than it might otherwise be. JavaScript, like most we...

Using MySQL with Node.js & the mysql JavaScript Client

NoSQL databases are all the rage these days and probably the preferred back-end for Node.js applications. But you shouldn’t architect your next project based on what’s hip and trendy, rather the type of database to be used should depend on the project’s requirements. If your project involves dynamic ...

An Introduction to Gulp.js

Developers spend precious little time coding. Even if we ignore irritating meetings, much of the job involves basic tasks which can sap your working day: generating HTML from templates and content files compressing new and modified images compiling Sass to CSS code removing console and debugger statements from scripts...

Organizing Your Grunt Tasks

The idea of breaking up your code into smaller bite sized chunks creates an environment that is easy to work in and maintain. That’s often thought of as module design, and is a standard for web development these days. I’m going to show you a way you can use module design to better organize your Grunt tasks....

Component-Led Design Patterns with Nunjucks & Grunt

The following is a guest post by Morgan Feeney. Morgan and his colleagues went through a journey of trying to find the right code prototyping tools, and found that a Nunjucks based system worked well. I think it’s a compelling choice! I’ll let Morgan make that clear. Recently I was involved with the creati...

Lazy Loading Images with the Igaro App JavaScript Framework

A while back I wrote about the Igaro App JS Framework (disclaimer: I’m the framework author). “Sigh! Not another framework” I hear you say (and probably rightly so). Well, let me tell you what sets Igaro app apart. Igaro App is NOT yet another framework that plugs into your HTML. It’s a complete...

Getting M.E.A.N. With Trello and Zapier

When speaking of workflow tools, there’s no doubt that both Trello and Zapier play a significant role in the lives of many developers. Trello manages tasks while Zapier automates them. This makes this pair a powerful combination. By the end of this article, we’ll have wired up a form that posts to a MongoDB...

Meet Elixir, the Laravel Way of Compiling Assets

Many thanks to Jad Joubran, Gabriel Zerbib, Anthony Chambers, and Scott Molinari for peer reviewing this post, and thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! In today’s web applications, we use a wide variety of tools to speed up the development workflow while keepi...

Build and Publish Your Own Grunt Plugin

Grunt is a widespread and popular task runner for JavaScript. Its architecture is based on plugins that you can combine and configure to create a powerful build system for your web applications. The Grunt ecosystem is huge and offers hundreds of plugins to help you with tedious and repetitive tasks, such as linting, te...

Watch: Compiling Sass using grunt-contrib-watch

Learn how to use grunt’s sass, watch, and connect plug-ins to create a build system that opens a browser, and updates any change in html, or Sass code live in the browser. Loading the player… jwplayer("video-5760").setup({ image: "https://d3rj1gznkm47xj.cloudfront.net/9f3f6ff0-58e0-4cc7-9803-a6126bba84a...