Grunt Tasks

Grunt in Responsive Framework

Grunt is a JavaScript task runner used to perform menial, repetitive manual tasks such as minification, linting, etc..

Responsive Framework has several Grunt tasks. Each is detailed below. Some tasks have sub-tasks, which can be run by calling the parent task followed by a : followed by the sub-task name. Example: sass:dev.

Grunt Tasks

Grunt tasks run functions defined in your dependencies and Gruntfile.js file. Below are the Grunt tasks and how they are configured in Responsive Framework.

Each can be run by typing grunt taskname when in terminal viewing the framework's directory.

concat

Combines all JavaScript folders in the following directories into a single file, /js/script.js.

uglify

Takes any file in the following directories ending with .js (but not .min.js) and creates a minified version with the same name, adding .min.

• /js
• /js/vendor

sass

Compiles framework SASS into CSS files. The following directories are included before the SASS is compiled:

• bower_components/normalize.scss/sass
• bower_components/mathsass/dist/
• bower_components/responsive-foundation/css-dev

This function has several parts.

dev

Compiles the following SASS files into CSS files.

• css-dev/style.scss into style.css
• css-dev/ie.scss into ie.css

prod

Compiles the following SASS files into CSS files.

• css-dev/style.scss into style.min.css
• css-dev/ie.scss into ie.min.css

fonts

Compiles all .scss files in the css-dev/customizer/font-palettes directory (not recursively) into the css directory.

Example: css-dev/customizer/font-palettes/f1.scss becomes css/f1.css.

admin

The file css-dev/admin.scss is compiled into admin/admin.css.

addtextdomain

Adds a textdomain argument to all gettext functions missing one and replaces all textdomain arguments that are not responsive-framework.

makepot

Generates a responsive-framework.pot file and stores it in the /languages directory. This file can be used by a translator to localize the framework into another language.

version

Uses regular expressions to replace hardcoded version numbers in code.

This task has several sub-tasks.

functions

Updates the RESPONSIVE_FRAMEWORK_VERSION constant's value to match the version property in the package.json file.

styles

Updates the theme version in css-dev/style.scss file to match the package.json file.

modernizr

Updates the RESPONSIVE_MODERNIZR_VERSION constant's value to match the version in the modernizr dependency's package.json file.

lightgallery

Updates the RESPONSIVE_LIGHTGALLERY_VERSION constant's value to match the version in the lightgallery dependency's package.json file.

lg-thumbnail

Updates the RESPONSIVE_LG_THUMBNAIL_VERSION constant's value to match the version in the lightgallery dependency's package.json file.

copy

Copies files from one directory to another. This task has sub-tasks.

hooks

Copies hooks/post-merge/ to .git/hooks/post-merge.

lightgallery

Copies the contents of node_modules/lightgallery/dist to js/vendor/lightgallery.

lg-thumbnail

Copies the contents of node_modules/lg-thumbnail/dist to js/vendor/lg-thumbnail.

phplint

Searches all PHP files (excluding the vendor and node_modules directories) and checks for any fatal errors, which are an indication of syntax errors.

bower

Installs all Bower dependencies to the bower_components directory.

modernizr

Creates a custom build of Modernizr with the tests and options specified in the task's settings. The generated file is saved as js/vendor/modernizr.js.

clean

Removes all files in the /languages folder (see #376).

watch

Tells Grunt to watch for changes and run Grunt tasks when changes occur. The following files are monitored for changes and run the specified Grunt tasks:

• Gruntfile.js (reloads Grunt, applying any task changes made)
• JavaScript files (changes trigger concat, uglify)
  • Any .js file in bower_components/responsive-foundation/js-dev
  • Any .js file in /js-dev
  • Any .js file in /js/vendor
• SASS files (changes trigger sass:dev and sass:prod)
  • Any .scss file in bower_components/responsive-foundation/css-dev
  • Any .scss files in /css-dev
• Any .scss files in /css-dev/customizer/font-palettes (triggers sass:fonts)
• css-dev/admin.scss (triggers sass:admin)
• Any PHP file (triggers phplint)

Combination Grunt Tasks

A Grunt task can also run a combination of tasks in a specific order. Here are the Grunt combination tasks available.

grunt or grunt default

This is the default Grunt command. When this command is run, Bower dependencies are installed and the watch function is invoked, causing the terminal window to wait for specified files to change (see watch detailed above).

install

• copy:hooks
• bower:install
• build (see below)

i18n

• clean
• addtextdomain
• makepot

styles

• sass

scripts

• phplint
• concat
• uglify

update_lightgallery

See ## LINK ## Upgrading jQuery lightGallery in the Framework for more information.

• copy:lightgallery
• copy:lgthumbnail
• version:lightgallery
• version:lg_thumbnail

upgrade_modernizr

See ## LINK ## Upgrading Modernizr in the Framework for more information.

• modernizr:dist
• uglify
• version:modernizr

build

This is the master Grunt task.

• bower:install
• sass
• scripts
• i18n