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"
}
}
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
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