Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Filtering Files with Grunt
4150
single,single-post,postid-4150,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
Screen Shot 2013-09-10 at 4.01.01 PM

Filtering Files with Grunt

Screen Shot 2013-09-10 at 4.01.01 PM

Grunt is a great automation tool/task runner. I mainly use it to move files between stage and production servers and some front end processing for javascript and css files. It’s great for updating js, template, css, html and backend binaries all at once.

Small updates for me often require changing 5 to 10 backend/frontend files. Keeping track of what files need to be pushed to production can be a challenge. I use the Grunt config file Gruntfile.js to help make sense of all the updates. I group all the changes in the update under a task. For example:

    grunt.registerTask('a2einternshippush', [
        'copy:jslocal',
        'copy:templateslocal',
        'cssmin',
        'requirejs:entryCreateInternship',
        'requirejs:entryCompanyInternship',
        'copy:jsinternshiptolive',
        'copy:aspxinternshiptolive',
        'copy:bin'
    ]);

executing “grunt a23internshippush” from the command line will run all the above task.

Each of the tasks in the above example contain 1 or more targets. For example, the copy task is listed several times for specific targets like ‘copy:templateslocal’. A task’s target is where all the work is done.

The target level has detailed configuration info. This is where you can set the options or files you want to include. It’s possible to specify individual files or filter a group of files. There are multiple ways of defining files. The simplest approach would be to specify an individual file:

 
{
src: 'css/style.css',
dest: 'css/style.css'
}

Multiple files can be specified in arrays:

 
files: 
[
    {
        src: 'CreateProfile.aspx', 
        dest: 'CreateProfile.aspx'
    },
    {
        src: 'css/main.css', 
        dest: 'css/main.css'
    },
    {
        src: 'css/contact.css', 
        dest: 'css/contact.css'
    } 
]

Globbing patterns from the node libraries node-glob and minimatch can be used to filter files.

* matches any number of characters, but not /
? matches a single character, but not /
** matches any number of characters, including /, as long as it’s the only thing in a path part
{} allows for a comma-separated list of “or” expressions
! at the beginning of a pattern will negate the match

-http://gruntjs.com/configuring-tasks

Most tasks require simple filtering like grab all java script files in a director: “script/*.js” or grab all java script files in the all subdirectories “script/**/*.js”

This is only scratching the surface of the type of filter options available in Grunt. More globbing patterns can be found at: node-glob and minimatch .