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.phpYou 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.0You 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-devAfter 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 vulnerabilitiesI tried to make changes to the configuration file but it is very restrictive.
Most attempts failed.
