Follow along at home: bit.ly/grunt-gvarb
Automated tasks written in javascript* for javascript everything
*but it's not really javascript. Don't be scared.pug quota ✓
soon.
Saddle up, par'ner
grunt-cli = Grunt Command-Line Interface
npm install -g grunt-cli
*You only have to do this once.
Gruntfile.js - The Grunt config file
module.exports = function(grunt) {
// Do grunt-related things in here
};
package.json - npm packages file
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1"
}
}
npm install
Run npm install
in the same directory as your package.json
file to install all your node modules locally.
.gitignore
node_modules
Be sure you add node_modules
to your .gitignore
.
npm install --save-dev grunt-contrib-copy
Couple of things:
--save-dev
will add the plugin to the package.json
file automagicallyGruntfile.js
-contrib-
in its name is an offical plugin maintained by the grunt core team.package.json
{
"name": "boston1",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-copy": "~0.4.1",
}
}
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
copy: {
main: {
expand: true,
cwd: 'src/',
src: '**',
dest: 'dist/',
filter: 'isFile',
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
};
grunt copy
$ grunt copy
Running "copy:main" (copy) task
Copied 3 files
Done, without errors.
All of the contents of the src/
were copied to a new folder called dist/
Yay.
package.json
{
"name": "boston2",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-copy": "~0.4.1"
}
}
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
clean: {
dist: ["dist"]
},
copy: {
main: {
expand: true,
cwd: 'src/',
src: '**',
dest: 'dist/',
filter: 'isFile',
}
}
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
};
grunt copy
grunt clean
$ grunt clean
Running "clean:dist" (clean) task
Cleaning dist...OK
Done, without errors.
The dist/
directory is deleted.
Yay.
package.json
{
"name": "boston3",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-less": "~0.8.2"
}
}
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
less: {
src: {
files: {
"src/styles/main.css": "src/styles/main.less"
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
};
grunt less
$ grunt less
Running "less:src" (less) task
File src/styles/main.css created.
Done, without errors.
src/styles/main.less
is compiled into src/styles/main.css
Yay.
(the 'copy' portion of) Gruntfile.js
copy: {
dist: {
expand: true,
cwd: 'src/',
src: ['**', '!styles/**'],
dest: 'dist/',
filter: 'isFile',
}
},
We are copying everything in the src/
directory except for the styles/
directory.
(the 'less' portion of) Gruntfile.js
less: {
src: {
files: {
"src/styles/main.css": "src/styles/main.less"
}
},
dist: {
files: {
"dist/styles/main.css": "src/styles/main.less"
}
}
}
Ooo, two targets! This will allow us to run grunt less:src
to compile in the src/
directory or run grunt less:dist
to compile to the dist/
directory. This is important.
(the 'registerTask' portion of) Gruntfile.js
grunt.registerTask('build', [
'clean',
'less:dist',
'copy'
]);
grunt.registerTask('default', ['build']);
Ah, there they are! We've done two things here:
grunt build
grunt
just run the build
taskAll three do the same thing:
grunt clean
grunt less:dist
grunt copy
grunt build
grunt
$ grunt
Running "clean:dist" (clean) task
Cleaning dist...OK
Running "less:dist" (less) task
File dist/styles/main.css created.
Running "copy:dist" (copy) task
Copied 3 files
Done, without errors.
Our src/
code was compiled and copied to a clean dist/
directory ready to be deployed.
Starting to see how this may be useful???
No more example bostons :(
compass: { // Task
dist: { // Target
options: { // Target options
sassDir: 'sass',
cssDir: 'css',
environment: 'production'
}
},
dev: { // Another target
options: {
sassDir: 'sass',
cssDir: 'css'
}
}
}
Requires Ruby obv
imagemin: { // Task
dist: {
files: [{
expand: true, // Enable dynamic expansion
cwd: 'src/', // Src matches are relative to this path
src: ['**/*.{png,jpg,gif}'], // Actual patterns to match
dest: 'dist/' // Destination path prefix
}]
}
}
watch: { // Task
css: {
files: '**/*.{sass,scss}', // Watch all Sass files
tasks: ['sass'], // Run "grunt sass" task on save
options: {
livereload: true, // Reload the browser when this happens
},
},
}
connect: {
server: {
options: {
port: 9001,
base: 'www-root'
}
}
}
Scaffolding workflows in seconds.
(ok maybe minutes in some cases.)
Front-end Package Management
Static site generator for all the cool kids.
Slides available at bit.ly/grunt-gvarb