Pages

Showing posts with label Grunt. Show all posts
Showing posts with label Grunt. Show all posts

Friday, April 30, 2021

Fedora 33 : Start using the Grunt tool.

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.