Grunt Task Runner - en hjælpende hånd!

Grunt er min "lille hjælper" når jeg koder. Jeg arbejder på MAC så nedestående er specifikt til Mac, men windows maskiner fungere på næsten samme måde!
http://gruntjs.com/

Her på siden er Grunt primært brugt til at kode WordPress themes, men det kan selvfølgelig benyttes til alle former for kode.

Først gang du installerer

Har du ikke installeret et program vi terminalen før, skal du lige giv dig selv den rettighed.
Nedenstående og formodentlig login kode til Mac skal bruges.

sudo chown -R $USER /usr/local

Install Grunt

Terminal:

npm install -g grunt-cli

Globalt på computeren

SASS

Terminal:

sudo gem install sass

Globalt på computeren

Start / stop Grunt

Terminal:

Stå i projektmappen og skrive grunt <enter> og stop Grunt igen via <ctrl> + <C>

Klargør projektet til Grunt

Terminal:

npm init

Nu vil du i terminalen blive bedt om at svare på enkelte spørgsmål ang. projektet (navn, forfatter etc.)

Grunt i projekt

npm install grunt --save-dev

SASS i projekt

Terminal:

Navigere til projekt mappen (cd og evt træk mappen ind i terminalen - så får du stien!

npm install grunt-contrib-sass --save-dev

Denne del --save-dev sikre at du kun installere i den pågælende projektmappe!

I projektmappen vil din fil package.json se ud næsten som nedenstående:

{
  "name": "Projekt-navn",
  "version": "1.0.0",
  "description": "Test af Grunt ",
  "main": "index.html",
  "author": "Morten Andersen",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-sass": "^0.9.2"
  }
}

https://github.com/gruntjs/grunt-contrib-sass

WATCH i projekt

Terminal:
Grunt Watch er til automatisk at overvåge projektfilerne for ændringer. Så snart en fil gemmes/ændres vil WATCH undersøge om der er andre GRUNT funktioner der nu skal udføres. Eksempelvis ændre en .SCSS fil til en .CSS fil.

npm install grunt-contrib-watch --save-dev

https://github.com/gruntjs/grunt-contrib-watch

Autoprefixer

npm install grunt-autoprefixer --save-dev

git og WP theming

Når der arbejdes med Grunt og SASS i WordPress theming, er der ting, der ikke skal versions kontrol på.

Filer og mapper der ikke skal med i git:
fil: .gitignore

node_modules
.npm-debug.log
tmp
.sass-cashe
*'scc.map

En typisk Gruntfile.js

module.exports = function (grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    /**
    * Sass
    */
    sass: {
      dev: {
        options: {
          style: 'nested',
          sourcemap: 'none'
        },
        files: {
          'read/style.css': 'scss/style.scss'
        }
      },
      live: {
        options: {
          style: 'compressed',
        },
        files: {
          'style.css': 'scss/style.scss'
        }
      }
    },

    /**
    * Autoprefixer
    */
    autoprefixer: {
      options: {
        map: true
      },
      dist: {
        files: {
          'style.css': 'style.css',
          'read/style.css': 'read/style.css'
        }
      }
    },

    /**
    * watch
    */
    watch: {
      css: {
        files: '**/*.scss',
        tasks: ['sass', 'autoprefixer'],
        options: {
          livereload: true,
        },
      },
    },

  });
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.registerTask('default', ['watch']);

};

WordPress Gruntfile.js

module.exports = function (grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    /**
    * Sass
    */
    sass: {
      dev: {
        options: {
          style: 'nested',
          sourcemap: 'none'
        },
        files: {
          'read/style.css': 'scss/style.scss'
        }
      },
      live: {
        options: {
          style: 'compressed',
        },
        files: {
          'style.css': 'scss/style.scss'
        }
      }
    },

    /**
    * Autoprefixer
    */
    autoprefixer: {
      options: {
        map: true
      },
      dist: {
        files: {
          'style.css': 'style.css',
          'read/style.css': 'read/style.css'
        }
      }
    },

    /**
    * watch
    */
    watch: {
      css: {
        files: '**/*.scss',
        tasks: ['sass', 'autoprefixer'],
        options: {
          livereload: true
        }
      },
      php: {
        files: '**/*.php',
        options: {
          livereload: true
        }
      }
    },

  });
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.registerTask('default', ['watch']);

};

Wordpress functions.php

// LiveReload
if (in_array($_SERVER['REMOTE_ADDR'], array('127.0.0.1', '::1'))) {
  wp_register_script('livereload', 'http://localhost:35729/livereload.js?snipver=1', null, false, true);
  wp_enqueue_script('livereload');
}

Kilde: http://robandlauren.com/2014/02/05/live-reload-grunt-wordpress/

Opdater Grunt moduler

Du kan undersøge med npm outdated, om der er nogle af din grunt moduler, der trænger til at blive opdateret.
Eller du kan bare få det gjort med npm update

Uglify

npm install grunt-contrib-uglify --save-dev

https://github.com/gruntjs/grunt-contrib-uglify