Grunt is a tool that allows us to automatically run any set of tasks.
This tool solve minification and concatenation issues.
This tutorial is a simple intro with this tool.
[mythcat@desk ~]$ npm install
npm WARN saveError ENOENT: no such file or directory, open '/home/mythcat/package.json'
npm WARN enoent ENOENT: no such file or directory, open '/home/mythcat/package.json'
npm WARN mythcat No description
npm WARN mythcat No repository field.
npm WARN mythcat No README data
npm WARN mythcat No license field.
up to date in 1.017s
found 0 vulnerabilities
I install easy with npm tool:
[mythcat@desk ~]$ sudo npm install -g grunt-cli
[sudo] password for mythcat:
/usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
+ grunt-cli@1.4.2
added 58 packages from 71 contributors in 8.981s
╭────────────────────────────────────────────────────────────────╮
│ │
│ New major version of npm available! 6.13.4 → 7.11.2 │
│ Changelog: https://github.com/npm/cli/releases/tag/v7.11.2 │
│ Run npm install -g npm to update! │
│ │
╰────────────────────────────────────────────────────────────────╯
Let's update it:
[mythcat@desk ~]$ sudo npm install -g npm
Each time grunt is run, it looks for a locally installed Grunt using nodes required by the system.
A typical setup will involve adding two files to your project: package.json and the Gruntfile.
These are the Grunt plugins used :
-
Load Grunt Tasks (load-grunt-tasks)
- Time Grunt (time-grunt)
- PHPLint (grunt-phplint)
- JSHint (grunt-contrib-jshint)
- Uglify (grunt-contrib-uglify)
- Sass (grunt-sass)
- Watch (grunt-contrib-watch)
Let's start it with:
[root@desk wordpress]# npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install pkg` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (wordpress)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /usr/share/wordpress/package.json:
{
"name": "wordpress",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes) yes
[root@desk wordpress]# ls
index.php wp-comments-post.php wp-includes wp-settings.php
package.json wp-config.php wp-links-opml.php wp-signup.php
wp-activate.php wp-config-sample.php wp-load.php wp-trackback.php
wp-admin wp-content wp-login.php xmlrpc.php
wp-blog-header.php wp-cron.php wp-mail.php
You can see I set the name of the package: wordpress
[root@desk wordpress]# npm install wordpress --save-dev
added 4 packages, and audited 5 packages in 4s
found 0 vulnerabilities
The Grunt package will be the first thing to add to your project.
[root@desk wordpress]# npm install grunt --save-dev
added 101 packages, and audited 106 packages in 8s
7 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
The npm fund option provides more visibility to npm users on what dependencies are actively looking for ways to fund their work.
[root@desk wordpress]# npm fund
wordpress@1.0.0
├── https://github.com/sponsors/isaacs
│ └── glob@7.1.6, rimraf@3.0.2
├── https://github.com/sponsors/ljharb
│ └── resolve@1.20.0, is-core-module@2.3.0
├── https://github.com/sponsors/jonschlinkert
│ └── picomatch@2.2.3
└─┬ https://github.com/chalk/chalk?sponsor=1
│ └── chalk@4.1.1
└── https://github.com/chalk/ansi-styles?sponsor=1
└── ansi-styles@4.3.0
You can set to false and run again the command:
[root@desk wordpress]# npm config set fund false --global
[root@desk wordpress]# npm config set fund false
[root@desk wordpress]# npm install grunt --save-dev
up to date, audited 106 packages in 2s
found 0 vulnerabilities
The easiest way to add Grunt and grunt_plugins from https://gruntjs.com/plugins is to use this command:
npm install grunt_plugins --save-dev
After each install, you can check the file package.json and see if is updated.
I install these packages:
[root@desk wordpress]# npm install grunt-contrib-uglify grunt-contrib-cssmin grunt-contrib-watch --save-dev
added 58 packages, and audited 164 packages in 8s
found 0 vulnerabilities
Create a file called Gruntfile.js in the project root:
[root@desk wordpress]# touch Gruntfile.js
[root@desk wordpress]# vim Gruntfile.js
Add this source code to the file.
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/js/scripts.js',
dest: 'js/scripts.min.js'
}
},
cssmin: {
minify: {
src: 'src/css/style.css',
dest: 'css/style.min.css'
}
},
watch: {
uglify: {
files: 'src/js/scripts.js',
tasks: ['uglify']
},
cssmin: {
files: 'src/css/style.css',
tasks: ['cssmin']
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Load the plugin that provides the "cssmin" task.
grunt.loadNpmTasks('grunt-contrib-cssmin');
// Load the plugin that provides the "watch" task.
grunt.loadNpmTasks('grunt-contrib-watch');
// Uglify task
grunt.registerTask('scripts', ['uglify']);
// CSSMin task
grunt.registerTask('styles', ['cssmin']);
// Default task(s).
grunt.registerTask('default', ['uglify', 'cssmin', 'watch']);
console.log('... runnning grunt');
};
Because I create in the setting file some paths the next commands will create paths for these.
[root@desk wordpress]# mkdir src
[root@desk wordpress]# mkdir src/js
[root@desk wordpress]# mkdir src/css
[root@desk wordpress]# touch src/js/scripts.js
[root@desk wordpress]# touch src/css/style.css
I can see the grunt version.
[mythcat@desk wordpress]$ grunt default -V
grunt-cli v1.4.2
grunt v1.4.0
Now I can run the command grunt or with a specific task named default.
[root@desk wordpress]# grunt
... runnning grunt
Running "uglify:build" (uglify) task
>> 1 file created 0 B → 29 B
Running "cssmin:minify" (cssmin) task
>> 1 file created. 92 B → 76 B
Running "watch" task
Waiting...
You can see the default task contains both uglify and the cssmin tasks.
If one module is not installed then you can see this type of message:
[root@desk wordpress]# grunt
...Local Npm module "grunt-contrib-sass" not found. Is it installed?
Let's install it:
[root@desk wordpress]# npm install grunt-contrib-sass
added 17 packages, and audited 186 packages in 10s
found 0 vulnerabilities
I tried to make changes to the configuration file but it is very restrictive.
Most attempts failed.
