Get Started With Grunt - treehouse-code-samples.s3 ... is installed one time for the entire system...
Transcript of Get Started With Grunt - treehouse-code-samples.s3 ... is installed one time for the entire system...
treehouse ™
Get Started With Grunt
treehouse ™
What is Grunt?
‟The JavaScript Task Runner”
Compiles Sass into CSS
Compress JavaScript, CSS, HTML files
Combine JS files into a single file
treehouse ™
task
An automated command. You can create your own or choose from around 4,000 Grunt plugins
concatenate, minify, compile, etc.
treehouse ™
Demo
treehouse ™
Software dependencies
Node: a JavaScript runtime
npm: Node Package Manager
Grunt-CLI: command-line interface to run Grunt
Grunt: the actual task runner
Grunt plugins: thousands to choose from
treehouse ™
High Level Overview
Install node.js
Install grunt-cli
Create package.json file
Install grunt
Install plugins
Create gruntfile.js file
http://nodejs.org
http://blog.teamtreehouse.com/install-node-js-npm-mac
treehouse ™http://teamtreehouse.com/library/nodejs-basics
treehouse ™
About Grunt Node Packages
There are two Grunt node packages:
1. grunt-cli is installed one time for the entire system (-g)
npm install -g grunt-cli
2. grunt is installed for each project in the project directory
npm install grunt
npm install -g grunt-cli
Install Grunt-cli
doesn’t matter what directory you run this command from, it’s a global installation
treehouse ™
The Project
treehouse ™
Two Files You Need Understand
1. package.json describes your project: name, git repository, but most importantly your npm dependencies
2. gruntfile.js is the file that loads plugins, configures those plugins and defines tasks
these files live in the project’s main directory
cd ~/Documents/project_directory
npm init
Creating the package.json file
then follow the instructions...
npm install grunt --save-dev
Install Grunt
--save-dev adds this to your list of packages in the package.json file
treehouse ™
Create gruntfile.js
Create in project’s main directory
What does it do?
Configures tasks
Loads plugins
Registers tasks
The gruntfile.js skeleton
module.exports = function(grunt) {
// Configure task(s) grunt.initConfig({
});
// Load the plugins grunt.loadNpmTasks( );
// Register task(s). grunt.registerTask('default', [ ]);
};
The gruntfile.js skeleton
module.exports = function(grunt) {
// Configure task(s) grunt.initConfig({
});
// Load the plugins grunt.loadNpmTasks( );
// Register task(s). grunt.registerTask('default', [ ]);
};
this is a node thing...
The gruntfile.js skeleton
module.exports = function(grunt) {
// Configure task(s) grunt.initConfig({
});
// Load the plugins grunt.loadNpmTasks( );
// Register task(s). grunt.registerTask('default', [ ]);
}; this is the stuff you change
Load the package.json file
module.exports = function(grunt) {
// Configure task(s) grunt.initConfig({
pkg: grunt.file.readJSON('package.json'), });
// Load the plugins grunt.loadNpmTasks( );
// Register task(s). grunt.registerTask('default', [ ]);
};
treehouse ™
Steps to Adding a Task
Load the plugin
npm install <plugin-name> --save-dev
Add configuration to gruntfile.js
Load plugin in gruntfile.js
Register the task in gruntfile.js
treehouse ™
uglify your JavaScript
Shrink your file footprint and combine your JavaScript files with Uglify
npm install grunt-contrib-uglify --save-dev
Install uglify
must run this command within the project directory
// Configure task(s) grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { } });
Configure: gruntfile.js
// Configure task(s) grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { build: { src: 'src/js/*.js', dest: 'js/script.min.js' }
} });
Configure: gruntfile.js
treehouse ™
About File Organization
src/js: directory holding my working JavaScript files
js: directory holding my final compressed and concatenated file
// Configure task(s) grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { build: { src: 'src/js/*.js', dest: 'js/script.min.js' }
} });
Configure: gruntfile.js
output file
source javascript files
// Load the plugins grunt.loadNpmTasks('grunt-contrib-uglify');
Load the plugin: gruntfile.js
// Register task(s). grunt.registerTask('default', ['uglify:build']);
Register the task: gruntfile.js
all together
// Configure task(s) grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: { src: 'src/js/*.js', dest: 'js/script.min.js' } });
// Load the plugins grunt.loadNpmTasks('grunt-contrib-uglify');
// Register task(s). grunt.registerTask('default', ['uglify']);
grunt
Run it!
must run this command within the project directory
treehouse ™
dev tasks vs. build tasks
// Configure task(s) grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { build : { src: 'src/js/*.js', dest: 'js/script.min.js' }
} });
Create a build task: gruntfile.js
Update the task name: gruntfile.js
// Register task(s). grunt.registerTask('build', ['uglify:build']);
grunt build
Run it!
treehouse ™
dev tasks
Don’t minify code, but do concatenate files
dev: { options: { beautify: true, mangle: false, compress: false, preserveComments: 'all' }, src: 'src/js/*.js', dest: 'js/script.min.js' }
Create a dev task: gruntfile.js
Register the dev task: gruntfile.js
// Register task(s) grunt.registerTask('default', ['uglify:dev']); grunt.registerTask('build', ['uglify:build']);
treehouse ™
watching tasks
npm install grunt-contrib-watch --save-dev
Install watch
must run this command within the project directory
watch : { js: { files: ['src/js/*.js'], tasks: ['uglify:dev'] } }
Configure: gruntfile.js
when these files change
run this task
// Load the plugin grunt.loadNpmTasks('grunt-contrib-watch');
Load the plugin: gruntfile.js
grunt watch
Run watch
You don’t need to register the watch task, just call it
treehouse ™
compile Sass
npm install grunt-sass --save-dev
Install Grunt Sass
Don't use grunt-contrib-sass — it uses slower Ruby-based compiler
treehouse ™
About File Organization
src/scss/application.scss:main Sass file
css/styles.css: my compiled CSS file
sass: { dev: { options: { outputStyle: 'expanded' }, files: { 'css/styles.css' : 'src/scss/application.scss' } } }
Configure: gruntfile.js
...into this file compile this file...
// Load the plugins grunt.loadNpmTasks('grunt-sass');
Load the plugin: gruntfile.js
// Register task(s). grunt.registerTask('default', ['uglify:dev', 'sass:dev']);
Register the task: gruntfile.js
'default'
watch : { js: { files: ['src/js/*.js'], tasks: ['uglify:dev'] }, css: { files: ['src/scss/**/*.scss'], tasks: ['sass:dev'] } }
Add to watch: gruntfile.js
when these files change
run this task
build: { options : { outputStyle: 'compressed' }, files: { 'css/styles.css' : 'src/scss/application.scss' } }
Add Sass Build Task: gruntfile.js
minify the files
grunt build
Run it!