Frontend Automation Using Grunt

There’s a great variety of assembly automators — take as much as you like, but many of them are not suitable for simple tasks. Below goes a description of what is used for faster work on Frontend. Who cares, welcome to the cut.

Automation of Frontend requires a comprehensive approach, as in layout, you can automate a lot of functions such as working with layout, usage of special tools to improve the speed of writing styles, etc.

At the end of the work the developer should have a compressed file of styles and scripts. This way the likelihood that after the compression of scripts and styles to backend something would go wrong decreases.

In addition, to increase the speed of layout you need to use any of preprocessor (LESS, SASS, etc.); you have to compile all the files on the fly so that a page would update immediately. The same takes JavaScript. Grunt comes to the rescue!

What should be automated:

• SASS, LESS files compilation;
• Use of Autuprefixer to get rid of unnecessary prefixes;
• Compressing of compiled CSS file;
• Merging and compressing of JavaScript files;
• Automatic updating of the page after any file, whether HTML, CSS or JavaScript was changed.

Mind here that we will work with console commands and Node.js. If you didn’t work with them, don’t hesitate, because the only thing you need is to write a command in a console and then forget it.

Well, now down to business. To start the work on a new project with collector and automatic page updating, you must have Node.js installed. It can be easily installed on any platform.

Next thing you need is to clone repository or download it from GitHub, then go to the console in the project folder and run npm install command. It will install all the necessary plug-ins, which are described in the package.json file.

Sometimes, the installation is not successful, the main mistake here that user is not allowed to create new files. In this case, sudo npm install command would help and npm installs all the needed packages to node_modules directory.

Well, repository is downloaded, plug-ins are installed, time to run Grunt. This can be done with a simple command in the console: grunt.

The project should be set on any of Denver servers or on something like that. Personally I use webstorm server, execute Run → Run in the open html-file, after that a page opens in a default browser.

Now, our page will be automatically updated whenever you change files.

Let's take a closer look at what we have under the hood.

The structure of the project:

Assets directory contains images, JavaScript files and files of styles.

Our compiled files will be written to dist

Relations necessary for work of collector are registered in a package.json file.

Gruntfile.js is a file where Grunt settings are made for the current project.

All settings for plug-ins are written in Gruntfile.js file. This project is set up for LESS files compilation, but if you use SASS, then you just need to install a plug-in to compile SASS-files and disable LESS.

Setting LESS generation

Using grunt-contrib-less, create a task called less in the file of configurations, and write paths to files in settings:

less:{
    development:{
        options:{
            paths:["assets/css"]},
        files:{"dist/style.css":"assets/css/main.less"}}},

After you create CSS-file, add the required prefixes for properties. Let me remind that you needn’t write prefixes by hand, since here we use autoprefixer. autoprefixer. It analyzes the styles file and automatically appends the desired prefixes. By default, we support the 2 most recent versions of browsers.

autoprefixer:{
    options:{
        browsers:['last 2 versions','ie 9']},
    your_target:{
        src:'dist/style.css',
        dest:'dist/style.css'}},

After we added the desired prefixes our CSS should be a little compressed. This is done via a very cool plug-in CSSO. It compresses the CSS better than any other plus creates a GZIP-file, and all this happens on the fly.

csso:{
    compress:{
        options:{
            report:'gzip'},
        files:{'dist/style.min.css':['dist/style.css']}}},

JavaScript files are compressed using the grunt-contrib-uglify. This wonderful plug-in will quickly and efficiently combine and compress all your scripts. In the settings we write ways to sources and the way with the name for our compressed file.

uglify:{
    options:{
        mangle:false},
    my_target:{
        files:{'dist/main.min.js':['assets/js/**/*.js']}}}

That's done with the basic parameters of collector. Frontend Automation with Grunt turned to be not as terrible as it seems. Here I gave the most minimal setup. You can also configure the compilation separately for dev and prod regimes, set compression only for styles of Productions. This way the compilation will run a little faster, but those few milliseconds hardly would make the work more effective. The template can be downloaded here.

Thank you for paying attention to my article. If something can be improved, please write in the comments or submit pull requests.