Building Stuff: Prepros, Grunt, Gulp

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more

It almost always comes in handy to be able to execute certain operations that affect the source code in general. We want to compile CSS from a preprocessor, minify it, or minify Javascript files and merge them - to name just a few operations. We also want to reduce the size of images and merge them into a CSS sprite.

Therefore, the direct link to source files in HTML has been replaced by optimized distribution versions. And now we’re getting there: to make these distribution versions, we need building tools.

The building tools for the front-end come in two types:

  • simplified – they are simple to use, but their functions are limited (Prepros, CodeKit and other)
  • full-featured – their functions are almost unlimited but they are hard for beginners or non-programmers to tackle (Grunt, Gulp and other)

Prepros

This is an example of a simplified building tool I usually recommend starting with it as it is supported by all platforms and it has a point-and-click user interface.

Prepros

Apart from the ability to perform all basic CSS, Javascript and image tasks, Prepos also has an FTP deployment feature and a synchronized website testing tool for multiple devices.

Grunt

It is necessary to mention that in order to use Grunt, you have to be familiar with the command line. No other advanced knowledge is needed. To be honest, I tiptoe around the command line, however Grunt has become my “buddy” quite quickly.

Grunt can be installed using NPM…

npm install -g grunt-cli

… and then you install one of the plugins, e.g. a plugin for compiling LESS to CSS:

npm install grunt-contrib-less --save-dev

By using plugins, namely using Gruntfile.js, you can create Grunt tasks. This is a simplified example of such a file:

module.exports = function(grunt) {
  'use strict';
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    less: {
      default: {
        files: {
          'dist/css/style.css': 'src/less/index.less'
        }
      }
    },

    cssmin: {
      css: {
        files: {
          'dist/css/style.min.css': 'dist/css/style.css'
        }
      }
    },

    watch: {
      less: {
        files: 'src/less/**/*.less',
        tasks: ['css']
      }
    }
  });

  grunt.registerTask('css', ['less', 'cssmin']);
  grunt.registerTask('default', ['watch']);
};

First, you need to configure less, cssmin and watch plugins in order to create css and default “task aliases”. Then you can add a queue of other tasks.

At the beginning of a project, you just run a default task using the grunt command and then you can track file changes.

See more at gruntjs.com.

Gulp

Gulp can do basically the same things as Grunt but it’s faster and configures tasks using Javascript. Therefore, it is easier to generalize stuff and is more suitable for programmers and larger projects.

See more at gulpjs.com.


Content

Introduction

Introduction

On today’s frontend UI development

UI development transformations

Tools, technologies and workflows

Fallback strategies

CSS3 reference guide

Introduction

Text properties

Background properties

Border properties

Box properties

Media Queries

CSS transforms

CSS animations

CSS3 Layout

Another CSS3 Properties

Non-standard properties

End

End

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more